UI/UX CASE STUDY
HATCH
A personalized project management website for all of your DIY construction planning needs. Starting with tutorials written by experts for DIYers of all levels. The site also creates custom task lists, budgets and schedules to boost confidence, ensure quality construction and stay organized. This project was designed for the Google UX Certificate Program.
THE PROBLEM
With real estate markets skyrocketing and people spending more time than ever in their homes, DIY home renovations are up. But, many homeowners feel overwhelmed by handling power tools or tackling large projects. Others are jumping in, but the results are dangerous or lackluster. Hatch gives them the confidence and the knowledge they need to turn their house into their dream home.
CLIENT
This was designed as an assignement for the Google UX Certificate.
DURATION
January 4th – January 25th, 2022
ROLE
UX designer responsible for responsive website design from conception to delivery.
RESPONSIBILITIES
- User research
- Wireframing
- Low and hi-fidelity prototyping
- Accounting for accessibility
- Iterating on designs
THE GOAL
Develop a website that gives homeowners and renters the confidence to pick up a paintbrush or a nailgun and the knowledge to make renovations that are both to code and beautiful. The website needs to provide tools to plan their project and resources so users can get help if they have questions.
EMPATHY
RESEARCH
At the beginning of this project, my focus was entirely on creating a long list of tutorials for DIYers to access when trying to figure out how to do a project. After conducting my initial user research (which included competitor audits, interviews and user stories), I realized there was a great deal more potential for the site to help both new and experienced DIYers to manage their projects and get help from the experts. We had a chance here to influence the DIY community and push for quality construction, as well as re-using materials rather than scrapping them and dumping them.
In order to get this right, it was clear that the website needed to feature the ability to chat with an expert, easy to navigate menus and easy to read and digest tutorials.
PAIN POINTS
1
CONFIDENCE
All of the new DIY subjects felt they struggled with gaining the confidence to jump in and actually start renovating their home.
2
Questions
Many of the new DIYers and even one of the experienced subjects felt that they needed someone to bounce ideas off of or to double check they were doing the right thing, but they didn’t love the commenting platforms.
3
TIME MANAGEMENT
Many of the subjects indicated that they did not have a single go-to tutorial location and would sift through dozens of tutorials before they found one that they trusted and fit their situation.
4
PROJECT MANAGEMENT
With the larger projects that involve dozens of tasks, or for projects that seem to keep growing, participants of the study felt overwhelmed and frustrated by not having a clear to-do list.
PERSONAS
Ophelia
“The world is sad and lonely
when we don’t add a little color.”
Ophelia is a young millennial renter who needs the confidence to take on her first DIY project.
AGE
24
FAMILY
Single
PRONOUNS
She/Her
OCCUPATION
HR Representative
EDUCATION
BA in HR Management
HOMETOWN
Garner, NC
GOALS
- Learn how to do some minor renovation projects to her rented home
- Feel confident getting started
FRUSTRATIONS
- Wants something that doesn’t feel like it is just for DIY experts.
- She doesn’t have people to help her.
Ophelia is a young millenial who recently graduated from NC State and started her first job. She also started renting a little bungalow in Garner. She is always on Instagram and dreams of tackling her own DIY projects to up her Insta game. She’s talked to her landlord and he’s open to some minor projects.
Liesel & Finn
“With a little love and a lot of elbow grease, we can make this world a little more beautiful.”
Liesel and Finn recently purchased a large farmhouse built in the early 1800s outside Boston to be closer to family. They need to do pretty much a complete renovation in a hurry because Liesel is pregnant. They won’t get all the work done, but at least a few key projects. They want to do most of the work themselves because they just finished renovating their 1950s home in Virginia and feel confident they can do it, but they need a schedule and can’t spend hours finding tutorials.
EMMETT
“Before you can understand me, you need to
see the world through my eyes.”
Emmett is a non-binary Hispanic individual who owns a 1970s home in Austin, TX with their partner and cat. They host small gatherings regularly and have done some minor cosmetic renovations to their home that they love but they are ready to tackle some bigger projects like the kitchen and bathrooms. They are nervous they will just end up with a big mess or will miss critical details like permits.
WIREFRAMES
Research with users indicated that most of my participants would browse ideas and inspiration on their mobile devices, but did the serious searching for renovation tutorials and design decisions on a laptop or desktop, then would switch back to their phones to follow the tutorial while actually working on the project. As a result, I designed part of the website first on desktop and the inspiration sections first on mobile.
Introduction
Because this is a new website, the main page begins by giving users an understanding of Hatch. The second focus was on giving users a sense of excitement and anticipation about tackling projects for their home and point them in the right direction.
An intro is first in the hierarchy because this is a new site and the user needs to get acquainted with features.
Trending home DIY projects provides inspiration and project ideas to tackle.
To give confidence to new DIYers, the main page features a link to the DIY academy.
Tutorial
The tutorial screens are carefully considered to ensure that users are able to easily read and then review multiple times to ensure they have the materials and understand the steps before beginning. With links to tested products and experts available for advice, users are sure to feel confident that they can tackle any project.
A sticky menu on the side allows users to quickly move between parts of the very long tutorial.
Details about the project include the time it takes to complete, the skill level involved and the estimated cost of the project.
The tools and materials section link to reviews and where to purchase.
Each step is easy to digest and includes an image or video that demonstrates the step for visual learners
USABILITY STUDIES
TYPE
moderated
LOCATION
United States, remote
Participants
six (3 male, 3 female)
Length
20-30 min
ROUND 1 INSIGHTS
1
BROWSE VS SEARCH
Users were more likely to browse through projects instead of searching for a specific idea.
2
MENU TERMS
Users were confused by terminology in the main menu.
3
Search
Users felt that the search functionality was being pushed too hard.
ROUND 2 INSIGHTS
1
Flow Confusion
Users had trouble understanding where they were in the flow
2
renovate + decorate
Users had trouble understanding the difference between renovate & decorate
3
too much clicking
Most users felt there was too much clicking to get to their tutorial
THE SOLUTION
MOBILE TUTORIALS
The tutorials are the soul of the project and need to be engaging, informative and simple to use. For this particular aspect of the website, the mobile version was more important than the desktop and we started the design on mobile and worked up to desktop.
OVERVIEW
The tutorials are broken out into sections including an introduction about what to expect, tools and materials, what to consider before getting started, and the instructions.
Tools & Materials
This is a list of everything you will need to complete the project. Each one is clickable to see a review of our favorite tool. You can also create a shopping list and purchase items online.
BEFORE GETTING STARTED
This section covers everything to consider before you pick up a tool including design, how to responsibly dispose of old materials and project waste, creating a budget, etc.
Instructions
The instructions section is broken into bite sized pieces that are quick to review and include large images that are visually descriptive and helpful.
MEMBER LOGIN
For members, they can login and have access to a dashboard where they can create a schedule, set and track their budget, check on their progress and create custom tasklists that link to tutorials.
RESPONSIVE TASKLISTS
The tasklists are designed to be used across screens to simplify and organize projects. They give users the confidence to know what needs to be completed and keeps project information in one place, including contractor information, paint colors and materials used.
RENOVATE & DECORATE
These two pages are the landing pages for users who are browsing projects and looking for ideas. They also have search bars for users who know what they are looking for. Major renovation projects like Bathrooms and Kitchens have their own pages that walk users through the process step-by-step.
PRODUCT REVIEWS
With the goal of making renovation projects approachable and easy, the site will also include product reviews to save users time researching the best tool for the job. To give users peace of mind that the products are indeed the best, they are throughly tested in the lab and by DIY users with the results shared. Items are linked so users can find and buy them easily.
ACCESSIBILITY
Specific accessibility considerations were made for legibility and navigation with limited mobility. These considerations are important for all users because they will likely be using the app while performing sometimes dangerous tasks.
1
contrast
The website’s text has all been tested against the WebAim Contrast Checker to ensure that anyone with color blindness or who needs heavy contrast will still be able to read and use the tutorials
2
CLOSED CAPTIONS
For all video tutorials, text versions must be included, and the screen must be able to be easily read to the user so they can listen to instructions while simultaneously re-tiling a backsplash.
3
mobility
Touch points are designed intentionally large and centered when possible. This is because users are more likely to be interacting with the screen with their non-dominant hand while working with tools.
NEXT STEPS
1
Budget & Schedule
I would love to build the entire site out further, including the budgeting and scheduling feature to give users a more complete project management tool when planning for larger projects.
2
Mobile App
I think developing a mobile app version of the site would be critical for users to manage their task list and complete tutorials away from their desktops.
3
Language
DIY home renovations aren’t only happening in America, so expanding the website to be compatible with a global audience would be a logical next step. We’d need to ensure that the tutorials are interpreted correctly and considerations for tools and materials are made.