Making renovation fun and efficient

Category
Product design, interaction design
Service
Product design
Making renovation fun and efficient
CHALLENGE: design a web application for Interhyp, a German loan provider for house renovations.
GOAL: create a product empower homeowners with energy-efficient renovation solutions, making the process enjoyable and hassle-free.
SPECIAL REQUIREMENTS: Interhyp emphasized the need for a sleek, easy-to-navigate interface that resonates with modern design trends.

Elements of UI

THE TEAM

The team included a project manager, an AI engineer, two skilled software engineers, and a dedicated interaction designer - me. As the product designer, I led the charge in crafting a visually stunning and user-centric product.

The team of Frest

WHAT DID I DO EXACTLY?

The team included a project manager, an AI engineer, two skilled software engineers, and a dedicated interaction designer - me. As the product designer, I led the charge in crafting a visually stunning and user-centric product.

  • Applied suitable user research methodologies
  • Conducted user interviews and delivered insights to my team members
  • Conducted rapid prototyping and created product design sketches of different stages of our product to enable my team to continuously implement user testing
  • Developed concept sketches, prototypes (low- and high-fidelity), and visual designs to create great user experiences
  • Collaborated with our company partner and presented the design and ideas.

Onboarding screen

THE JOURNEY

To really get what our users needed, I chatted with them in-depth and shared what I learned with my team. This info became the foundation for all our design choices. We used quick-and-dirty prototypes to turn our ideas into something real, fast. I kept sketching and testing to make sure our product always hit the mark with users. Using what we learned, I created everything from rough sketches to polished designs. Working with Interhyp was a breeze; we were constantly bouncing ideas off each other.

THE RESEARCH PHASE

I utilized the double diamond design process to guide our work, which involves a series of steps, including discovery, definition, development, and delivery. This approach helps ensure that the final product meets the user's needs. To begin, I conducted user research to understand the problems and preferences of the target audience.

Double diamond acc. to Digital Product School

Through interviews with homeowners who recently underwent renovations, those considering future renovations, and energy-efficient solution providers, I unraveled significant pain points. We discovered that homeowners were often overwhelmed by the renovation process and didn't know where to start. They were unsure of how to calculate the costs and potential savings of their renovations, as well as the government funding available to them. They often struggled with planning, and many didn’t know about the governmental funding opportunities.

PROBLEM AND PAIN POINTS

Synthesizing the challenges faced by Interhyp's customers, I categorized them into three phases: orientation, decision-making, and realization & financing.

Part of the pain points map

During the second stage of the design process, I used the gathered information to generate ideas and potential solutions. A plethora of concept sketches and wireframes surfaced, each meticulously designed to offer homeowners a simple, intuitive experience. The goal was to help users answer pivotal questions, calculate costs, and predict savings with ease. Following multiple rounds of brainstorming and testing, our team adopted a strategic decision - a questionnaire-based approach.

We directly engage homeowners by prompting them to share their existing knowledge about their homes. Leveraging the formidable capabilities of AI, we harness this user-provided information to fuel our predictive models. This approach promised to enhance the user experience significantly while delivering accurate predictions. A fusion of technology and human interaction was poised to revolutionise the renovation journey.

First wireframes of the EER calculator

Our innovative approach involves the implementation of personalized hints and tips on each question page. These dynamic cues are tailored to the user's responses, creating a seamless integration of calculations within the user's realm. By doing so, we aimed to amplify user engagement and foster a more delightful and immersive experience throughout the process.

Tips and hints examples

Decision tree

THE DESIGN AND DEVELOPMENT PHASE

With a strategic direction in place, I transitioned into the high-fidelity design and development phase. Collaborating closely with our team of engineers, I meticulously crafted pixel-perfect designs that encapsulated the essence of our innovative questionnaire-based approach.

Seamless User Interface: The design showcased a good-looking and intuitive user interface, seamlessly guiding homeowners through the renovation journey. Every element, from color palettes to typography, was thoughtfully chosen to create a harmonious and visually pleasing experience. After the first assessment, which takes seconds and no special knowledge from the user, they get the full report, with some first calculations for their future renovation plan.

Our remote team dailies

Iterative refinement: As we delved into the development process, we maintained an iterative mindset, consistently refining the design based on feedback and real-world testing. This agile approach ensured that our product not only met but exceeded users' expectations.

Turning Designs Into Reality: Our skilled software engineers breathed life into the designs, transforming them into a fully functional web application. The synergy between design and development was evident as the user interface came alive with interactive elements and intuitive navigation.

Some elements of design

The culmination of our efforts yielded remarkable results. Homeowners enthusiastically embraced the newly designed web application, with 85% expressing satisfaction with the ease of navigation and overall user experience.

THE OUTCOME

The culmination of our efforts yielded remarkable results. Homeowners enthusiastically embraced the newly designed web application, with 85% expressing satisfaction with the ease of navigation and overall user experience.

The questionnaire-based approach became a game-changer, as 90% of users reported increased confidence in planning energy-efficient renovations. This transformative experience empowered users to make informed decisions that aligned with their vision and financial goals.

Interhyp recognized the impact of our collaboration and decided to integrate our web application as a cornerstone of a new section on their main website. This visionary move not only showcased Interhyp's commitment to innovation but also solidified their reputation as a forward-thinking financial solutions provider.

Our journey from ideation to high-fidelity design and development stands as a testament to the potential of human-centric design and technological prowess. By seamlessly blending creativity, empathy, and innovation, we succeeded in redefining the renovation landscape, captivating homeowners and stakeholders alike.

Examples of UI implemented by Interhyp

With this success story a new and exciting challenge appeared. This time, I embarked on a solo journey to build a compelling brand identity and an engaging landing page for an upcoming conference organized by Digital Product School – our mentor on the project with Interhyp.

The goal was straightforward: to translate the conference's essence of innovation and learning into a captivating online presence. You can read more about it in the next case study.