View on a larger device.
My portfolio is not yet optimized for viewing on smaller devices. For optimal viewing experience, please view my portfolio on a larger device, such as a laptop or desktop.
My portfolio is not yet optimized for viewing on smaller devices. For optimal viewing experience, please view my portfolio on a larger device, such as a laptop or desktop.
First-time homeownership is abundant in resources on purchasing a home, but resources about caring for one’s home lack in comparison. How might we enable first-time homeowners in the US to learn about and organize home maintenance tasks so they can protect their investments and better care for their homes? As one of two designers, I build a platform from scratch to guide first-time homeowners through home maintenance.
Branding, Design System, User Research
Figma prototype (MVP), Web application (Final product)
Rachel C., UX Designer
John-Luke D., UX Researcher
Ratul J., Back-end Developer
As a senior at the University of Washington’s School of Information (iSchool), I was determined to take on my Capstone Project as the ultimate opportunity to showcase my skills. I worked with one other designer, managed product design, led user research, and fully built our design as the sole front-end developer.
Two-thirds of contemporary first-time homeowners experience homebuyer’s regret. Surprise maintenance costs are the leading cause of this, despite home maintenance being included in homebuyer education resources. The uniqueness of each home adds to the difficulty of properly attending to one, as there is no such thing as a “one-size-fits-all” checklist for home maintenance.
an individual who has purchased their first home in the last five years.
How might we enable first-time homeowners in the US to learn about and organize home maintenance tasks so they can protect their investments and better care for their homes?
Among the topics pertaining to homeownership, resources regarding the post-purchase process lacked the most. After consulting both first-time and experienced homeowners, as well as real estate agents, we aimed to create a product that addresses home maintenance guidance.
To further define our investigations, we placed topics such as budgeting and other finances out of scope.
15
interviewees
first-time homeowners,
experienced homeowners,
real estate agents
40
respondents
first-time homeowners,
experienced homeowners,
prospective homeowners
Maintenance is commonly the least prepared for aspect of homeownership.
"[Home maintenance has] a lot of things that new homeowners may not know to do unless they do research or are speaking to friends or family who are already homeowners."
"I think I have nothing to keep track of because I bought a new build."
Different homes have different maintenance needs & people have varying maintenance goals.
Centralized information is a highly sought after commodity.
"[I wish I had access to] some sort of guide that had everything [I need to know about maintenance], but I know it's not one-size-fits-all."
"I use Google Docs to keep track of maintenance... It's messy, but it's there."
Common to lack a reliable way to organize and track maintenance tasks/projects.
“The homebuying process was quite stressful because we did not have connections to people with experience, but I’m excited to finally own a house and start a family.”
Both Kai's parents and his in-laws are from Singapore.
Based on Kai’s pain points, we identified three key concepts to focus our product on:
Personalize a one-stop home maintenance experience.
Track and notify about tasks.
Provide education and guidance.
By inputting details about their homes, first-time homeowners can organize and keep track of personalized maintenance tasks.
UCHI recommends home maintenance tasks and provides step-by-step guidance about how, when, and why to do those tasks.
We designed core user flows to correspond to each of the insights drawn from UCHI’s key concepts. As a responsive web application, we engaged in mobile-first design, iterating based on user feedback before engaging in designs for larger devices.
The following user flow diagram outlines the process of adding a Home Feature to UCHI, which provides a customizable user experience.
As a homeowner, I want to receive maintenance tasks customized to my home, so that I can learn how to properly care for my specific appliances.
UCHI. a part of a user’s home that can be maintained (i.e. appliances, materials, etc.). Abbreviates to HF.
UCHI. categories to which Home Features belong to (i.e. Bathroom, Exterior, etc.).
The Dashboard greets Kai upon login, so we aimed for an organized appearance that would not overload users with too much information, as many competitor applications do. It took several user testing sessions and iterations to arrive at a version that our users were satisfied with in terms of usefulness of the Dashboard.
Navigation through the app is one main interaction difference between mobile and larger screens. The Home Features page exemplifies how mobile-first design drives consistency between platforms. Although larger screens afford additional space, we avoided adding content that did not exist in the mobile version.
Mobile navigation from Dashboard (version 2) to Home Features (version 1).
In the following demonstrations, Kai selects the Kitchen Space and is prompted to choose a Home Feature from a dropdown. We initially utilized a modal to present this dropdown, but changed this to a new page upon designing the desktop version. While user tests with the modal went without complaints, we noted that modals are rarely used on mobile web applications. Furthermore, the disruptive nature of modals was evident when compared to replacing the page content.
Select a Home Feature (mobile - version 1).
Modals are disruptive in nature and are best utilized for errors and other urgent messages.
Select a Home Feature (desktop - version 1).
The basic process of adding a Home Feature consists of the following details: type (if applicable), age, additional key information (if applicable, optional), and brand and model number (optional). Our design for this process was key to making UCHI stand out among competitors; we provide homeowners with information pertaining to their particular homes without requiring too much input from them.
Of course, we didn’t get this right the first time, but feedback from users testing our early iterations indicated we were on the right track. One participant directly mentioned other home maintenance software are “way harder to [use than UCHI].”
“I found it easy and fun enough that I’d definitely go back and add [more Home Features].”
residential realtor, Seattle
Input Home Feature details (mobile - version 1).
Utilize a bottom sheet to enhance the experience of dropdown selection on mobile.
Reduce form fatigue and shorten flow by 1 click.
Input Home Feature details (desktop - version 2).
Once UCHI finishes adding a Home Feature to the user’s database, its details are displayed as inputted, and related maintenance tasks are listed. These maintenance tasks are automatically added to UCHI’s Task Tracker.
The following user flow diagram outlines the process of finding and completing a home maintenance task, which provides an organized and educational user experience.
As a homeowner, I want to view step-by-step instructions for how and when to do tasks, so that I can learn how to do home maintenance tasks and keep track of them.
After using UCHI for a couple months, Kai is aware that he is due to clean his gutters sometime this month. He logs onto UCHI wanting to learn more about how to do and prepare for this task. The following Dashboard mockups are the final iterations based on 14 usability tests.
UCHI’s Task Tracker is one of the key concepts we built the application on, yet our users rarely visited the Tasks page during usability tests. When asked why, one participant compared the Tasks page to the Dashboard, claiming the Dashboard is sufficient in informing them of what tasks to do and when to do them. This sparked the idea of replicating Dashboard elements across the application, driving design consistency and maintaining usefulness. After making these changes, users understood the Task page to house a full list of Tasks, while theDashboard displayed a limited version.
“The Tasks page is really boring. The Dashboard does a good job of telling me what to do and when to do it.”
first-time homeowner, mid-20s
The Task Details page is the core of the educational aspect of UCHI. While a comparison between early and final UI iterations may not be dramatic, this page was heavily scrutinized in terms of UX writing and its efficacy as a learning resource. The following table outlines merits and demerits as pointed out by our user test participants, as well as the strategies we used to improve their experience based on the demerits.
🡢
Checking off Task steps (mobile Task Details - version 2)
Expanded, deletable steps 🡢 only first step expanded based on the following user and stakeholder feedback:
Expanding and collapsing Task steps and completing a Task (Desktop Task Details).
In UCHI’s early stages, our user test participants experienced an average of 4.5 pain points while walking through the above core user flows. Applying their feedback to several sprints of iterations, we reduced this to an average of 1 pain point per participant during our final round of user testing.
“[UCHI] is a home maintenance planner and a home care education center. The planner is a plus. It’s an educational experience.”
first-time homeowner, early 30s
“[UCHI] is a home maintenance planner and a home care education center. The planner is a plus. It’s an educational experience.”
first-time homeowner, early 20s
UCHI was selected and my team and I were interviewed as finalists among 150+ other Capstone teams and projects at the 2022 UW iSchool Capstone Gala.
UCHI was presented as a final product at the University of Washington iSchool Capstone Gala. UCHI is a live web application available at https://uchi.vercel.app/. Due to last minute backend issues, the live web application does not support login functionalities. However, the web application is fully functional when run locally. See UCHI on GitHub.
*Please note UCHI has been visually redesigned since the recording of the following presentation.
This project was fulfilling in every aspect as it involved extensive research, detailed user experience design, and cross-discipline collaboration. Envisioning the product from scratch also provided the experience of prioritizing and backlogging features. Throughout the duration of this project, I have grown as a professional, as a UX-UI Designer, and as a leader.
Realistically, scope matters, and constraints exist
Utilize a backlog instead of feeling pressured to put 100% into everything at one time
Whether for my teammates, instructors, stakeholders, or future mentees, I strive to provide thorough support for this project
To create a cozy and encouraging environment akin to its name, UCHI begins the onboarding process by asking for a username. Users are not pressured to share their real name, and the information is used only to maintain a personalized experience.
UCHI begins its onboarding tutorials with the Dashboard, the first place users arrive at upon logging in.
The remaining tutorials correspond to the other pages in UCHI’s navigation menu in their order of appearance.
After going through the onboarding tutorials, UCHI invites the user to add a Home Feature. As the final step of the onboarding process, UCHI will guide the user through adding their first Home Feature. After the user adds their first Home Feature, the onboarding process is complete.
The following prototypes demonstrate the onboarding process in both mobile and desktop form.
*If the prototype gets stuck at any point, press the "R" key to restart.
The following prototype exemplifies UCHI (desktop version) as demonstrated in our above Capstone presentation. Feel free to explore UCHI as a platform or try to achieve these common uses:
*If the prototype gets stuck at any point, press the "R" key to restart.
