case study: UBuild Tutorials



The Product: A responsive website for at-home construction tutorials.

The Duration: ~1-2 months

The Problem: People often had difficulty finding short, straightforward tutorials for completing home improvement projects.

The Goal: Creating a website containing a multitude of construction tutorials that could be accessed by people looking to complete projects by themselves.

Roles and Responsibilities:
UX Researcher - User Interviews
UX Designer - Personas, User Flows, Wireframing, Prototypes, Mockups

case study: UBuild Tutorials image

key takeaways

1. User Interviews are vital. I found that I had a lot of ideas for this project, but I made sure to focus on the user feedback I collected to ensure I was designing for my users, and not just for myself.


2. Accessibility helps everyone. I made to consider accessibility in my designs, and in doing so I made the user experience better for all users. Accessibility is never something to be added on at the end.


3. Having a sticker sheet is a time saver. I made sure to create a detailed sticker sheet for my project and it really paid off. It was able to save me a lot of time since I only had to change the component, and I loved how efficiently I was able to work.

Features

Video Length

Many people found it difficult to find the video they were looking for, and said they lost momentum while searching. Once they found a video, they felt their time was wasted on ads and unrelated content.

Supply Lists

Many users reported inaccurate or incomplete supply and tool lists from other construction tutorials they've seen. They also don't always know what a tool or item is called.

Time & Duration

Participants noted that current videos don't always give an estimate on project length, leading them to feel overwhelmed. They mentioned wanting to feel like they could budget their time.

personas

sketches and design system

Hi-Fi Mockups

Accessibility Considerations

Tool & Supply Photos

I included photos next to every tool and item listed to ensure users would be able to identify and understand everything needed for the project. There is also a download feature so a user could take the list with them to the store.

WCAG3 Color Contrast

I used a WCAG contrast checker on each color against all backgrounds to ensure all texts were readable by WCAG standards. WCAG 2.0 guidelines require a ratio of at least 4.5:1 for normal sized text and 3:1 for large text.

Alternative Text

I made sure to include a note in the design specs to add captions for descriptions to each photo so those who use visual readers or don’t have enough service to load the photo to still understand what the photo is showing.

Testimonials

 "Now I feel like I can complete the project I’ve been putting off." 

User 3
I BUILT MY SITE FOR FREE USING