At Soup, a Bay Area-based non-profit, I was the lead designer on a web application that helps people build Accessory Dwelling Units (ADUs). In addition to the product design, I led the project’s roadmap and specification.

Motivation

At Soup, we saw ADUs as an efficient mechanism through which we can expand affordable housing supply in close proximity to economic centers, like San Francisco and Silicon Valley. As opposed to other solutions, building ADUs is beneficial to both property owners and tenants because not only do they provide low-cost housing, they would help owners receive rental income and increase their overall property value.

We wanted to build a tool that helped property owners navigate the ADU process, build ADUs, and increase the overall affordable housing supply in high-cost/high-rent areas.

The User

Our user had the following characteristics:

• New to, or inexperienced with, large home construction projects.
• Has little experience navigating relationships with architects and contractors, permitting processes, and long construction timelines.
• Not knowledgable about ADUs and related terminology.
• Do not require fine-grain control over project details and design.
• Want to build an ADU for either rental income, family members, short-term rentals, or personal use.

In essence, we wanted our tool to accessible to a very general audience as our overall intention was to facilitate a general increase in ADU construction and thus affordable housing.

Background Research

Before getting into designs and prototypes, I tried to get more familiar with the problem domain, analyzing the greatest pain points for people building ADUs and how other existing ADU services/solutions were addressing them.

I read up on the latest ADU research and surveys and found that the biggest obstacles to people building ADUs were:

• Navigating complicated permitting processes
• Variation and unreliability in dealing with contractors and construction timelines
• Great financial costs
• Design and property constraints and requirements such as lot setbacks, utility connections, and parking requirements

Additionally, I explored existing public and private sector organizations and startups in the ADU space, most of which broke down into two categories:

1. ADU Fabricators: Firms that manufactured prefabricated ADU models (typically offsite, in a facility) and provided a service that would install them on your lot for you.
2. ADU Services: Firms that offered a way for you to determine the feasibility of an ADU on your property, but left design and construction up to you.

Amongst these, ADU Fabricators seemed like the easiest way to build an ADU, however, these only provide a limited set of ADU models to choose from and do not allow people to find their own third-party contractors and services at a (potentially) lower cost.

Our Solution

What we felt was missing from the ADU landscape was a truly complete process that took someone from checking the feasibility of building an ADU on their lot all the way to handing them the keys to the finished unit. Specifically, we wanted to provide an experience that was easy to navigate, abstracted away the most complicated aspects of building an ADU such as permitting, and didn’t overwhelm people with too many decisions.

One key aspect of this vision was to focus specifically on prefabricated, detached ADU units, that is units that are built offsite and exist as standalone structures on a property. While this focus allowed us to simplify many of the decisions we would confront the user with throughout the process, it also enabled our tool to be much more predictable in terms of construction costs and timelines.

Designing a Framework

Since our application’s primary role and value provided to the user was centered around streamlining the entire ADU process and helping users manage its complexity, I wanted to construct a general framework of the user’s journey through our application before going into any designs or mockups. Specifically, I wanted to turn the complex ADU process into a linear one that was defined by discrete steps, each having their own set of “tasks” the user needed to complete to move onto the next step.

Our framework was laid out as follows:

In designing the experience around a framework such as this, it allowed the following designs to maintain coherence and logical flow which in turn allows the user to have a clear, consistent mental modal about what is happening and what their next steps are.

Implementing the Designs

Throughout the designs, we tried to stick as close as possible to the following guidelines:

Select Interfaces and Components

Authentication: Standard authentication form, conveying a clean, friendly brand.

Property Check: A single, focused UI element with a clear description of its purpose and the action the user should take.

Breadcrumbs: A breadcrumbs element in the navigation bar informed the user of the current context as well as hint at what the next steps are.

ADU Designer: The designer is a single, richly interactive UI component that has its own internal navigation between the ADU model listings and ADU details. We did not want standard web page navigation within the designer because we want to ensure that the user understands that navigating between the model listing and details is all part of the same step and context.

Project Workspace: All tasks and information related to a project were organized into distinct tabs. The goal is to make it easy for users to get any task done or reach any bit of information quickly.

Project Stage Tracker: We included a persistent “project stage” tracker to inform users of their project’s status as well as what steps lie ahead.