UX Design Case Study
DIY Guys
DIY Guys is a project I took on during my UX Design Certification Course at Google. My randomly generated prompt at the start of the Course was "Design a website for finding and viewing DIY tutorials". So I set out to discover what I could do to bring a DIY website to life.
​
Over the length of this project, I was tasked with researching and solving design problems for my target users.
Client /
Google UX Certification
​
Role /
UX Research
UI/UX Design
Agency /
Year /
2021
Over the course of 2 weeks, I created designs for a community driven DIY Tutorial Website. The goal of the project was to deliver an effective design that allows users to find and view DIY tutorials and projects quickly and easily.
​
The Problem
My challenge here was to create a website for a fictional DIY community that not only conveys their purpose, but delivers a modern design to its users. We also have to keep accessibility in mind, to reach as many people as possible.
​
The Goal
Deliver a website that allows users to find a DIY tutorial quickly and easily, while following accessibility standards and modern visual design principles.
​
My Responsibilities
Conduct usability tests and user interviews, and iterate upon my prototype designs to build a final deliverable.
One of the Personas I created while researching for this app.
This Here is the User Journey for Ryan, and how he might use the app.
One of the Personas I created while researching for this app.
User Research Summary
I conducted usability tests and interviews, and built empathy maps to better understand the users this site might serve. A primary user group I discovered after researching is hobbyists looking for in depth tutorials to help them on their next project.
This group confirmed some initial ideas about DIY Guys users, but addition research adds to the conversation. Customers who use our site are not just hobbyists, our demographic also includes students, and retirees looking to learn or make something. Factors that lead them to use our site include: necessity, saving money, convenience, speed, selection, or simply looking a new hobby.
Competitive Analysis
I looked at several potential market competitors, and most compete directly with DIY Guys in the type of content they provide, and will influence the potential revenue an popularity of our website. DIY Guys has the chance to compete due to the lack of community driven content in the larger competitors.
​
The variation in our competition was great, and it goes from large enterprises, to small arts and crafts blogs. Here are the main things I've noted:
​
- Most large companies have accessible apps, while smaller websites do not.
- Apps and websites vary in the amount of community engagement greatly.
- Most large competitors have their own proprietary formatting for tutorial presentation.
Preparing for the Designs:
I constructed a site map based on the basic user journey through the website, from Home or Search to Checkout. This helped me understand ways users will or could interact with certain steps of the process and how they should loop back together to converge on the user goal.
Digital Wireflow
​
After sketching out the designs on paper, I decided on the features and UI elements I wanted to bring with me into the digitizing phase. I poured a lot of time into this step, and took my usability tests to heart before moving on to the visual design stage.
Iteration
After finishing the prototype from low fidelity wireframes, they were given to 5 testing users in an unmoderated usability study of the primary user flow. After this test, I interviewed them to further understand their likes and dislikes about using the website. What are the users pain points? What was difficult and what was easy? Where were users the most confused? How could that be worked on?
These are the type of questions I wanted to gain insight to answer.
​
Findings
​
Round 1:
- Users need imagery and text descriptions to better understand the interface
- User curiosity leads them off the main flow and they need direction
- Users would like a way to return home at the end of the flow, to repeat the cycle
​
Round 2:
- Long pages require excessive scrolling to return to the navigation
- Contrast needs to be increased for accessibility reasons
After usability testing, I spent time adding effective visuals and creating a more effective use of screen real estate. I wanted the user to have the same options available to them without the clutter. So I combined the feature section with the hero image, and altered the carousel to a single item that will cycle daily.
While working on the mockups, I spent my extra time creating separate designs for smaller viewports like tablets and smartphones. This was an interesting challenge as I had to consider different screen size and real estate when restructuring the website for a wider audience.
Style Guide
​
With DIY Guys, I wanted to present the DIY Guys brand with modern simplicity and eye appealing colors. I also wanted to focus lots on imagery and text, rather than have a clutter of controls in the users face. Since this is a community driven site, I'd like for the user viewing the page to feel relaxed and welcome by the visuals we give them.
Takeaways
After completing the second round of user testing, I truly believe this website has made great progress, and can achieve its goal of giving users easy access to professional and community made DIY tutorials. One quote I received during peer feedback was "I really enjoy the idea of being able to rely on professionals where it matters, while still being able to gather insights from the community." During this project, I truly learned the importance and impact of user agency and the users desire to have an accessible experience, whether or not they require accommodations. Using text, imagery, and sound to convey ideas is the best method for everyone to use this website.
The next steps from here are to hold further rounds of usability studies to ensure all user pain points are addressed, and that accessibility standards are held up.
​
Thank you for taking the time to read through my work.