2024 - Master thesis project

Sustainahome

A master thesis project focused on increasing renovation rates in Germany through architectural solutions and a web app. This page highlights the interface design.

The Challenge

Encouraging homeowners to choose renovations through a user-friendly digital interface while ensuring it benefits building experts and supports government goals for sustainability.

01. Research
Insights

Due to the lack of app-specific reviews, I explored customer pain points by analyzing discussions and feedback from internet threads to better understand their needs and challenges.

Reddit - Renovation flat procedure : r/germany , Renovating an old house - is it really that terrible? : r/germany, House renovation : r/germany
Improving policy instruments to better tap into homeowner refurbishment potential: Lessons learned from a case study in Germany
Existing app with similar features

KfW Sanierungsrechner

An existing website application to roughly calculate the renovation cost.

Pros:
Collects simple data from users and provides improvement ideas like adding insulations, HVAC improvement, Windows, doors, rough estimation of costs and saving over long term. 

Cons: 
Since the cost estimations are given out, it would be nice to know the how long a material might last, which is missing in the calculation.

existing user flow

Observation:

I analyzed the user flow and found a major issue: the process is fragmented.

Cost estimation happens in the app, but users must handle other steps, like finding experts and filing loans, separately. The service lacks integration.

Ideas from other website

Die Hauswende 

Pros:
The website takes through how to do small self -renovations around the house for users. 

Cons :
The steps are all written wordy and step by step videos or images would be of great help.

TABULA Web tool 

Pros:
 Could find the typical building details and the ways to improve the performance of the enclosure, HVAC and Warm water solutions. 

Cons: 
It is much more difficult for common people to understand in first glance due to the user interface which is not so friendly. Also, the cost involved in these renovations are unknown.

02. Define problem
User-Persona

I created a potential user persona to better visualize the target audience, streamline service design, and identify pain points effectively.

User journey mapping

By mapping the user experience, I identified opportunities to uncover pain points and gaps in the process

Problems

- Interrupted long process
- Overuse of technical words
- Repetitive information

user feedback and features

I generated feature ideas to enhance the app and organized them as titles. Then, I card sorted user feedback against these features for better alignment.

Feature mapping

I mapped the features based on their importance and feasibility into four quadrants:

Step 1: High importance, easy feasibility
Step 2: High importance, hard feasibility
Step 3: Low importance, easy feasibility
Step 4: Low importance, hard feasibility

For the stage 1 development focused on the step 1 features.

Idea

- Fully integrated processes within a app
- Step-by-step guidance for simplicity
- Intuitive and familiar user interfaces

03. Explore & iterate
new user flow

Ensuring the new user flow integrates all key processes like contacting expert or options to bank and information seamlessly within the app.

Information architecture

Designed an information architecture that allows users to:
- Create and save projects for future use.
- Input essential data about the building, site, and surroundings for accurate solutions.
- Explore improvement options with detailed documentation or instantly view results based on key data.

Sketches

I translated the information architecture steps into rough screen layouts to visualize the flow, ensuring:
- Seamless integration of key processes
- Clear component placement for usability
- Logical transitions between steps
- Intuitive user interactions

components and wireframes

I identified common components from the sketches to ensure reusability and created wireframes that:

- Replicate shared components for consistency
- Streamline the app flow for better user experience
- Ensure logical navigation across all screens

04. Solution
Hi-fidelity screens

The Homepage enables users to:
- Create and save new projects for future access.
- Resume work on saved projects anytime.
- Ensure continuity without losing progress.

Essential Input screens

- Essential data inputs are broken down into key steps for a smooth process.

- Top progress bar helps users track completion time. Guided flow ensures users provide necessary details efficiently.

Goals

- Goal-based selection replaces long forms for a streamlined experience

- Pre-filled fields based on selected goals to reduce manual input.

- Simplified decision-making for users to focus on solving their problems efficiently.

Your specific needs

- Editable process flow for users with specific needs.

- Option to add more details and variations for precision.

- Ensures accurate estimations tailored to individual requirements.

Result

- Results displayed based on goals, with both standard and advanced ranges.

- Zoom button on title cards provides detailed steps for DIY options.

- Direct contact options for both the bank and experts who provided the solution.