NOV- JAN 2023 / WEB / CASE STUDY
Shop Dwgs - an open source housing resource platform
Providing resources for homeowners to develop housing in their backyards.
OVERVIEW
Shop dwgs. is a housing resource platform that connects homeowners to resources to develop small scale housing in their backyard. The product integrates three main functions including a connecting users to professionals, a construction and development cost calculator, and a public forum to ask questions to local experts.
The product arose out research on the housing crisis in California. To increase housing supply, the state passed laws in 2017 and 2021 to permit small scale housing to be built in single-family zones that comprises 80% of all residential land (7.5 million homes).
Homeowners are now potential developers that can build, rent and even sell their backyards to unlock housing supply. However pain points in the development process can be daunting. In addition, housing laws are interpreted differently by each city, which adds complexity to the process and means knowledge is concentrated locally.
Click here to see full Secondary Research Report.
ROLE
Lead Product Designer
TIMELINE
Nov 2022- Jan 2023 (3 mos)
DELIVERABLES
Demo UI/ UX, Research, Information Architecture, User Testing
Solution
Shop dwgs. provides a resource platform for homeowners to help decipher the confusing construction process. It connects them with (1) qualified, local professionals, (2) provides a calculator to estimate projects costs and project future valuation and (3) provides a public forum for users to share insights on common development issues specific to their jurisdiction.
Forum
Quality responses to pressing questions
01
Use the forum to ask commonly asked development questions not easily found on Google or ChatGPT
Financing & Construction Calculator
Estimate Construction Costs and Project Value
02
Use the Calculator to determine if building housing meets your financial goals
Match With Professionals
Match with Local Professionals
03
Define your project criteria and share them with local professionals to find the right fit
Message Professionals
Browse Local Professionals
04
Browse local professionals and message the one’s you like
Finding The Target Users
Shop dwgs includes diverse use cases so my screener included socio economic questions to understand which homeowners were most (1) likely to go through with developing housing on their land, and (2) what their major pain points with the current workflow.
Target Audience
The screener had (53) responses from California residents. It determined the following target user criteria:
Middle class families in urban areas in California, with home values between 800k-1.3 million are most likely to be interested in developing housing
Primary Reasons for Building Backyard Housing
Homeowners were generally interested in building for two reasons which correlated with age.
Younger homeowners often want to build as a shorter-term, 5-10 year investment to help them support their incomes
Older homeowners are primarily interested in providing living space for their families in the short-term and supporting their retirement in the long-term.
Click here to view the full Interview Script.
Synthesis
After conducting the interviews, I synthesized the findings into two personas: Jane & Andrew and Carlos.
Jane and Andrew are retired accountants from Sunnyvale, CA, who want to build to provide housing for their son and his new wife before they buy their first home and to eventually support their retirement so they can travel.
Carlos is a younger homeowner interested in building to receive passive income, increase his net worth and buy his dream house in 5-10 years.
Insights
1. Daunted by the complexity of the development process
Long and tedious process to design, permit and construct a building is daunting to users. They need a resource to breakdown the process so there are less surprises.
How might we connect users to the right people and resources to explain the intricacies of the development process before starting their project?
2. Wary about working with contractors
Untrustworthy contractors who are not pre-vetted are exasperating are make them abandon ship.
How might we connect users with vetted professionals to make homeowners feel secure with their workers throughout the process?
3. Confused by the different financing options
The high cost of construction, variety of financing options and accurately determining their return on investment is difficult to navigate.
How might we help homeowners determine their return on investment so they understand if the project fits with their financial goals?
Competitive Analysis
In addition to defining core user needs through primary research, I conducted a competitive analysis of companies that provide similar services.
All of the products had components that were similar, however none combined the functions I had in mind for Shop dwgs. Revival Homes and Houzz were the companies with the most similar services of, so I looked deeper into their website Information Architecture to understand user expectations.
Houzz verifies professionals with certifications and ratings which gives professionals credibility to users. Users can find professionals through searching, browsing or ‘matching’- which pairs users with contractors that share the same project expectations. Revival Homes organizes financing and policy information well- allowing users to compare the merits of mortgage options easily- it uses too many navigation tabs which distracts from their value proposition.
MVP
1. Connecting homeowners with local, qualified homeowners using search, browse and match functions.
2. Financial calculator to project costs and returns.
3. Resource Forum to share information and answer common questions.
Information Architecture
Using the core functions defined in the MVP, I made a closed card sort test using Optimal Sort to have users organize cards by categories to validate the structure of the site. There are a total of 11 cards and 5 top navigation categories: Learn, Professionals, Calculator, Forum and Profile. It is the users’ job to organize the cards into the 5 categories to validate the information architecture or indicate poorly worded cards or categories.
Card Sort Result
The card sort activity was done remotely by 10 participants, with 5 of the same participants that participated in interviews and 5 others that matched the target users identified by the screener. Since they are the target audience, information architecture tailored to their needs is the first priority.
The overall test results showed users consistently organized cards into the same categories with the exception of the Finance card which was sorted 50% of the time to its correct category of ‘Learn,’ and the other 50% of the time to the ‘Calculator’ category. This most likely happened because users associated it with the Calculator, and so I changed the card name to ‘Financing Information’ to associate it more with other information-based cards.
Site Map
Once the information architecture was validated, I created a detailed sitemap to guide the design of the user flows.
User Flow 1: Check Eligibility and Onboarding
First-time user wants to check if their property qualifies and sign up
User Flow 2: Estimate Construction Projections and Share Results
User needs to check their construction costs and valuation and share their results
User Flow 3: Post a Question on the Forum
User has a question regarding their specific jurisdiction and wants to ask the community
User Flow 4: Message a Professional
User wants to browse professionals and set up a call with an architect they like
User Flow 5: Create a Project Profile and Match with Professionals to
User wants to create a project profile and match with professionals to create high quality quotes
Treejack Test
To validate the site map’s content organization, I used a Treejack test from Optimal Treejack to test if my User Flows worked as expected. Treejack observes how users navigate the site by asking them to find site content within the information architecture. The result validated that users would associate the ‘Forum’ tab with asking questions to the public and the ‘Professional’ tab for connecting with local professionals.
Ideation
After the card sort and Treejack tests, I felt confident in the information architecture of the site and created quick, low-fidelity sketches to lay out the UI of each tab. Using hand-drawn sketches helped me focus on the priorities learned during research and early testing and helped me translate the drawings into a low-fidelity prototype easily.
Wireframing
Once there was no issue with the sketches, I moved on to creating wireframes of the user flows in Adobe XD. To save time, I used wireframe kits to develop high-fidelity wireframes rapidly.
Prototyping
I used Figma to create a low-fidelity prototype that I shared with the same ten card sorting participants and used to conduct moderated user testing.
Click here to view full prototype.
Colors
Fonts
I used the font, Inter, to design the application because of its clarity and contrast between its regular, medium, semi bold and bold options.
Examples
User Testing
I conducted 10, remote moderated users tests using the Figma prototype. I asked each participant to complete basic tasks that test the core functions of the product and vocalize their thoughts and feelings throughout the process. I recorded these interviews to review responses in detail to understand users thoughts and frustrations better.
Click here to see full User Testing Script and Report.
Results
Users consistently commented that a brief description of what they could use these functions to do would be helpful. Saying the Forum could be used to find info specific to their jurisdiction, such as Fire Sprinkler requirements, would be helpful. Similarly, a description to tell homeowners that the calculator could also determine their project’s ROI in addition to their project estimate was vocalized.
Apart from these two major issues, users had cosmetic comments about the color contrast and size of the text throughout the site.
Forum Page Redesign
The redesign of the Forum page created higher visual contrast and between text and colors. A more informative description was added below the headline text to let users know what they can use the Forum page for.
Calculator Redesign
The redesign of the Construction Calculator page also created higher visual contrast and between text and colors and a message state to tell users to complete the form before receiving their construction estimation.
Conclusion
Knowing what you know now, what would you do differently?
Homeowners comprise a very large user base with several use cases, I would have liked to spend more time developing more personas and use cases to represent more components of the product. Personas like city planning employees who answer commonly asked development questions in the Forum, or prospective home buyers who want to find if a parcel can be developed on and meet their financial goals before buying it. These use cases would most likely create more feature differentiation, but would not change the core functions of the product.
However even testing with 5-10 participants, gave me quality insights into the motives and needs of the target audience. This helped me understand that most common use cases, motivations and fears of the users, and the experience they expected to have when trying a new product.
