Responsive Web Design, Branding

Creating a mobile app and website for home remodeling startup, Dwellify

Dwellify is a startup that approached Critical Mass to create an MVP to pitch to investors. As a premium provider, their goal is to simplify home remodeling for their customers by providing an invaluable project customization and management service. Our goal was to design an end-to-end user experience that reflects their vision and captures the interest of potential investors.

Agency: Critical Mass

Overview

My Role

UX Architect

Competitive Research
Site mapping
User Journey Mapping
Sketching
Wireframing
Prototyping

Skills Used

Time Frame

October 2019 - January 2020

Two Producers
UX Lead
Art Director
Designer

Team

Tools

Sketch, InVision

Happy path and project overview

Designing the happy path

Our project focused on creating a happy path that would bring the prospective user through the Dwellify home remodeling experience end-to-end, starting on desktop and ending on mobile. This happy path would have to be short yet robust enough to attract investors and inspire them to invest.

Our Audience

For the Happy Path, our primary users were homeowners looking to remodel their kitchen.

These users ranged from newbies to experienced homeowners, with prior remodels under their belt. For both groups, the prospect of renovating their home stresses them out, and they are looking for a seamless and transparent experience. This was the crux of our happy path story.

Customer Flow Diagram

Working with an MVP concept and open requirements, we split our design into 3 Phases to follow along with the customer journey.

  • Our customer would start their flow on desktop, where a majority of their customizations would take place

  • They would switch to mobile to measure their room, and make selections to receive in their sample design box

  • They would finish their flow on mobile where they would keep track of and confirm the final outcome of the remodel

Batch 1: From Desktop to App

Batch 1 desktop flow

Identifying with our “Newbie” user, we defined our Happy Path in Batch 1 to follow through with the Style Quiz. After being matched with a design style, our user would proceed to customize their package to their liking and create an account. At this point, our partnered estimation API would give them a rough estimate which would later be finalized with their room measurements submission.

Batch One Flow, from Desktop to App handoff

Designing the style quiz

My responsibility in Batch 1 was tackling the style quiz, from research through wireframes. For the client, the style quiz was an integral part of the project and an important factor in winning and converting customers.

The product was offering 9 types of interior styles; however, research showed that most homeowners did not know their aesthetic tastes. This is where the style quiz would provide some fun, educate users, and help Dwellify determine which package fits their needs.

Competitive research

After some competitive research and conversations with the client, we decided to go with a simplified quiz with a variety of question types. We would ask the user about their aesthetics, behavior, and lifestyle using a mix of verbal, visual and value-based questions.

Final Designs

Below is a selection of final designs of the style quiz, featuring different types of questions and interactions.

Batch 2: Measure and Pay on the App

Switching to the App

Progressing through our Happy Path, our customer would switch to the Dwellify app after finishing their package customizations on desktop. On app, our big selling point was the Measure Tool. This tool would leverage your iPhone’s AR technology to provide you with accurate measurements.

Dwellify’s internal research showed that room measurements are a consistent pain-point and hurdle for users. With the Measure Tool, we were aiming to alleviate this stressor.

Additionally, we wanted to leverage the Measure Tool as an exciting tech aspect for investors. This tool would set Dwellify apart from the competition, as submission of your measurements into the app would result in receiving your final estimate within ±5% of accuracy.

Flow for the Measure tool

Below is the user flow of the measure tool. We built in manual options in case the user does not want to use the tool, or if their phone does not support it.

Working through the Design Box Business Model

Another big hurdle of Batch 2 was working through the Design Box business model. We had many questions about how the Design Box would be worked into the overall experience. Even though it was an outside item, UX was reliant on understanding how the business model worked before proceeding with designing the experience. Some questions we had were:

Would the design box be free?

  1. If it’s not free, would the pricing be a flat fee or a percentage of the final estimate?

  2. Would the user keep all the design box items, or return it via a Warby-Parker “try as many as you like” model?

  3. How many samples were in the box? Could the user pick as many as they like?

  4. What if a user did not like any of their samples?

Batch Two flow - showing all the waiting times within the journey prior to project start

After many conversations with the clients, strategy, and within UX, we agreed on a flat, refundable deposit of $199, and that receiving a box was reliant on the customer completing all their room measurements. Providing accurate measurements became a gatekeeper for both an accurate estimate and receiving a Design Box. This informed how we proceeded with the UX Customer Journey Map.

Final Designs for Batch 2

Our designs for Batch 2 included a stepped Dashboard, Design Box Approval, and a final itemized estimate. Working with Dwellify’s commitment to transparency, we wanted to have the estimate be dynamic and displayed as a sticky element. We also wanted to highlight the Financing Options, which are another differentiating factor for Dwellify.

The Batch 2 flow relied on the hub-and-spoke model of the Welcome screen to guide the user through the flow.

Batch 3: Project Journey during the Remodel

Building out Product Features

Batch 3 marked the beginning of our customer’s remodel. Here, the customer would mostly be on mobile to track their project’s progress, communicate with their project coordinator, and check-in about project status. The key items to design for Batch 3 were our Dashboard, Project Plan and Messaging Center.

Wireframing a Time Based Schedule

It was important to Dwellify to transparently present project progress to the user. They wanted the user to be able to glance at a calendar and see how their project is moving along. With this in mind, we worked on a time-based approach to the tracker. Leading this effort, I gathered research from similar goal-tracking apps.

Our idea was focused on creating a time and task based schedule that was still generalized enough to allow for leeway between weeks should tasks get moved around, as they very often do during remodels.

Dashboard wires

Our design split up the project between a time based schedule and tasks. The overall progress and current status meters were based on task completion, rather than time. This allowed for contractors to be flexible with scheduling, and for customers to still feel a sense of progress.

Final Dashboard: Task Based Scheduling

After a few additional client conversations, we learned of the need to de-emphasize timing. The nature of remodels is hectic, and Dwellify was nervous about committing to strict timelines. Due to this, we decided to switch to a more task-based project management system, versus time and calendar based. This would allow for Dwellify to have flexibility in their remodeling schedules and not have to worry about overpromising on due dates for tasks.

Building out Messaging Features

Adding in messaging functionality was one of the main features and use cases for the Dwellify iOS app. We needed to find the best paradigm for a messaging app that allowed for the following:

  1. Conversations with a single user (Your Project Coordinator)

  2. Moderated conversations with your contractor and Project Coordinator

  3. Topic based conversations

After exploring various solutions based on both Direct Messaging or Topic Based, Email messaging we landed on a solution similar to Slack. Our messaging system would allow our user to create Topic based conversations, as well as regular Direct Messages.

Messaging Visual Designs

Our final messaging design came out even more simplified. We learned that users would only be messaging with their coordinator, and never a contractor. Designs were simplified and users would be able to create threads based on their choice of topic to send to their coordinator only. This allowed for optimal tracking of topics throughout the remodel. We also included an option for filtering messages.

Desktop prototype

Our final design on desktop featured an example kitchen using the farmhouse style. We presented the look and feel of a user shopping for the “original package” along with an estimate.

Final takeaways and next steps

With the Happy Path complete, we finished 30% of the work for the MVP within 3 months time. This laid the groundwork for our clients to present to investors and for us to continue building out the product features.

Our next steps are to continue filling in the blanks that the Happy Path didn’t cover, ironing out the navigation, identifying authentication states, and building out the experience across desktop, tablet and iOS devices.