Designing a Comprehensive Homebuilding Tool

Project Context

This client project was the first and largest task that I faced as a full-time UX designer. This web application contains a great balance of catering to user needs while never keeping business goals out of sight.

Under it's parent company Banker's Financial, Maverick is a comprehensive homebuilding tool that allows builders to easily enroll homes, utilize Maverick's first-ever self-serve builders risk tool, and provide homeowners with a digital experience that helps them get settled in.

The Task

My design team of 2 (myself and my Senior UX Supervisor who oversaw my design work) were tasked with carrying out Maverick's vision of a software tool that allows homebuilders to manage properties and risk products in one place. Further, homeowners and builders can connect through the platform by managing tasks, finalizing the builder to homeowner transfer, and more.

User Group

The user groups that the Maverick platform caters to are Home Builders, Homeowners, and Maverick Administrative users.

Please note that I was brought into this project in the middle of preliminary research, so not all initial research work is solely mine.

‍

‍

User Journey Mapping

After some initial requirements gathering and kickoff calls, my team began generating user journey maps for each user type to get a better understanding of their processes. Here were our goals for engaging with this method:

• Assess the core journey for each user type to better understand UI segmentation (main dashboard vs regular platform pathways)
• Find gaps in the user experience and ensure that core features are accounted for
• Understand the interaction between Builders and Homeowners

note: "Mulberry" is the former name of "Maverick"

User: Builder

Expand Builder Journey

User: Homeowner

Expand Homeowner Journey

User: Maverick Administrator

Expand Administrator Journey

Key Insights + Feedback

• There are quite a lot of areas where a user will have to enter a questionnaire-type flow
• For the Builder platform, properties serve as a crucial launching point for Maverick's proprietary flows and key features
• Leave room for more nav items to be added in the future

Now that we had each user's journey mostly mapped out, I decided to tackle our second insight above. My supervisor and I knew that there would be quite a bit of fields to fill out whether a user was onboarding, filling out a proprietary Maverick product flow, or entering other information.

‍

We wanted to answer the question of: "How can we make filling in lots of fields enjoyable and engaging?" as this would inform a key element of our UI.

‍

‍

‍

Comparative Research

In order to make this field-filling piece of the experience enjoyable and user-friendly, we analyzed how a few different companies handle questionnaires and quoting.

• What makes these UX flows enjoyable or unenjoyable as the user progresses?
• How do these flows personalize the experience for policy/home owners?
• How do these flows keep the user engaged as they progress?

Key Insights

• Advancing through a question flow question-by-question (rather than all at once) helps to split up the feeling of it being a "form"
• Having a progress bar is crucial for general usability and the "visibility of system status" heuristic--it helps keep users from wondering "how much longer?"
• Some users won't know what they need unless presented with a few various options upfront

‍

Sketching and Low-Fi Mockup Creation

‍

After getting a better understanding of our users and their goals, I began sketching and low fidelity prototyping with my supervisor. After a few demos and rounds of feedback with our stakeholder, we had a grounded, testable UI for each user type.

note: The "Administrator" User Type UI would mainly show an overlay over the Builder and Homeowner UI views upon sign-up/login, so this didn't require as much UI attention.

User: Builder

User: Homeowner

‍

UI Assets

Maverick already had an existing color guide for my team to utilize, however, we were required to generate components such as fields, button styles, card styles, and more.

Our stakeholders liked the idea of a segmented dashboard and enjoyed the fact that we accounted for more app sections being added in the future. Given this, I began referencing our requirements and began multiple months worth of demos and iteration.

‍

Contextual Sidebar

A key item to reiterate for the Builder platform (shown below) is that a Builder's individual properties serve as a crucial launching point for features and many of Maverick's proprietary flows. I knew that I would have to make this portion of the journey especially enjoyable as a lot of the Builder's time would be spent engaging with their properties.

Current Version:

Future State Design (created later):

‍

User Testing

My supervisor and I were not able to test with users. However, Maverick informed us that they were able to secure 3 Builders to test our design with. The primary goal was to analyze whether the builders found any gaps in our design or whether we had missed any key features that are important to their workflow.

Key Insight

• One of the builders mentioned that there wasn't a place to enter "Lot #11" in his list of new projects

Action Items

• This meant that we would have to add some way for Builders to classify their projects via a name or a number
• Since the Builder mentioned a number, I decided to add a "Builder Reference ID" in all applicable areas as this would help builders reference their properties correctly and utilize their internal nomenclature if desired

The examples below (highlighted in blue) reflect this change in a few commonly used areas:

‍

After lots of stakeholder feedback and design work, I had landed on our final design for each user type.

‍

High Fidelity Interactive Prototypes, Dev-Ready Design

After ensuring that I had a system down to accommodate for all user types and the unique features that each would require, I had completed my first large industry project. The project is currently in pre-launch development. Check out the interactive prototypes for each user below!

Stakeholder Feedback

Our stakeholders were beyond pleased with the design system, research, creation, and delivery of our work. Our design efforts are currently being referenced by developers as the project nears launch. Maverick was pleased by the way we presented our work throughout the entire process and voiced their joy with the design side of things as we slowed down and developers sped up.

What I Learned

• Sometimes stakeholders have a certain level of predefined requirements that aren't malleable through research
• Designing one shared system for multiple user types can be challenging but also rewarding if done in a complimentary way
• Dashboard UI exposure helped me grow as a designer, as I still reference many of the philosophies today
• Creating a design system that was used across hundreds of screens helped me perfect my component building methodology
• Working on a small team forced me to face some new, fun challenges!

‍