Zum Hauptinhalt springen

· Manuel Fessen · Documentation  · 5 min read

Home Building Customer Portal

A web platform for a national market leader in the home building industry to enable their customers to monitor the construction of their new homes.

Overview

This web and mobile platform for home building enables the client’s customers to monitor the construction of their new homes. The development of the portal began during the initial stages of the Coronavirus pandemic, specifically during the Easter week. A product manager oversaw the client communication, while two UX designers worked towards delivering a seamless user experience and reducing the manual administration burden on the client.

Role

User Experience Designer
Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing, Pitching

Background

The client is a long-time customer of EASY Software and a national market leader in building more than 3000 homes for their customers each year. Due to holidays and illness, we had only one week to decide whether to participate in a tender and meet the deadline for submission. Additionally, the tender came from a different part of the company than the one with whom EASY Software had successfully collaborated before, so there was neither additional information nor special treatment. Consequently, EASY Software was informed on Maundy Thursday 2020 that the following week would be dedicated to the tender, and other tasks needed to be deprioritized.

Understanding the Problem

On the Tuesday after Easter, an initial meeting was held where the client’s requirements were presented by product management. After a brief introduction and task delegation between the product manager and UX designers, the team moved into the research phase, created empathy maps, and conducted a competitive analysis. At that time, there was no similar product available, or at least not widely known.

Defining the Problem Statement

In the afternoon, the team moved into the analysis phase, created personas, user journeys and stories, and task flows based on the collected information and discussions with the product manager. The app was to look and function identically in both the web client and the app. As the “Mobile first” approach was already being followed in our department, this was not a problem for the team.

The Product Vision

After making adjustments to the personas and the user journey, the team employed thinking methods and began the ideation process, focusing on creating an excellent customer solution. You know, this solution, where in the end the user says “wow that’s cool, they thought it through. I like!” This is the goal with every feature, with every product.

One of the ideas that came out of this was to always visually display the current construction phase in animated form on the dashboard, so that the user always knew exactly how far the process had progressed. The focus here was that this graphic should contain a few Easter Eggs that would make the user smile. Nothing that will make more money in the end, we were aware of that. But the smile was the goal. The product was also intended to serve as a single point of contact, so a chat and a phonebook were integrated.

After the creative phase, the team began crafting the product. We decided to use low-fi wireframes to create the prototype as it would help us conduct better user tests and save time. (I, as the UX Designer responsible for this decision, will soon write a blog explaining why user testing with lo-fi is better than hi-fi.) We splitted the design work and quickly shifted to individual work. Of course, there was still a lot of communication between us and the product manager and any questions or concerns were addressed promptly.

I took on the task of creating the architectural system and the dashboards. My colleague designed the individual elements of the user interface with our company’s own design system and adapted them to the customer’s wishes.

Defining the MVP

To ensure that the design was accessible to all users, the team also conducted usability tests with individuals who had varying levels of technical proficiency. This helped identify areas where the design could be improved to make it more user-friendly and intuitive. After conducting this three user tests, we moved on to the next phase.

On the one hand, because conducting 3 tests can already yield a lot of insights (still not enough, but better than 0, which were not initially planned for; “you’ll figure it out” was the statement). Also, because we only had 1.5 days left. We had to choose our battles.

We moved on to implementing the low-fi screens in hi-fi. The team agreed on an MVP version with their colleagues from the product manager. What we presented to the client was a combination of the required screens, visually impressive screens, and screens deemed necessary. This allowed us to meet the formal requirements while contributing our skills and ideas. As I said, we wanted to create the smile and admiration by the user.

The challenge was that the design had to be implemented in three completely different CIs at the client’s request. This meant that we had to be very meticulous and work against Adobe XD, which kept throwing obstacles in our way. The final solution was to implement all screens in our own CI and then adjust the UI on each screen only in the final step just before exporting/linking the file to match the desired CI for the client’s subsidiaries.

Designs

Here is a selection of screens that we sent to the client. Due to various reasons, this is the version with the EASY Software CI.

Submission #1 Submission #2 Submission #3 Submission #4 Submission #5 Submission #6 Submission #7
Share:

Let's create together

Ihre Vision, meine Lösung - sind Sie dabei?