Front
Back
Bryan is a busy student/worker who needs an efficient way of watching DIY tutorials because they have a busy schedule and want to save time to do more of what they love.
Stefani is an individual saving up for a new home who needs a cost-effective way to find and make DIY projects because they need/want to save money and DIY is a great way to.
Alice is an unemployed individual with a lot of free time who needs a fool-proof plan to stay motivated and inspired throughout the crafting process because they can get side-tracked and lose motivation easily.
CraftHaus DIY Prototype
CraftHaus is a DIY project sharing site that allows an easier way to complete DIY projects. CraftHaus' goal is to make the DIY process easier and more enjoyable for all types of users.
Conceptual Web & App Design
Problem
Available DIY websites have unappealing and inefficient designs for finding and crafting DIY projects.
Note: This is a conceptual project I completed as part of Google's UX Design program.
Solution
Design a DIY website that has an efficient design and engages with users, keeping them motivated and inspired throughout the crafting process.
Overview
Project Duration: August 2022 - September 2022
My Role: User Research, Wireframing, Prototyping, Usability Testing, Responsive Design
Tools Used: Adobe XD
Empathize
Research Goals
I began the process with the following research goals:
-
I want to identify common user behaviors and experiences with tasks that my product is trying to address
-
I want to understand user needs and frustrations as they relate to the product I'm designing
Target Participant Characteristics
-
Individuals who like to do DIY projects and crafts
Interview Questions
-
How often do you DIY (Crafts, Art, DIY Projects)?
-
Do you use some form of guidance (video, instructions, website) to help you through the process?
-
Where do you usually get your DIY ideas from? (YouTube, TikTok, Pinterest, DIYProjects.com, etc.)
-
Can you describe your experience while using the tools mentioned above?
-
What challenges do you face when using these tools for guidance when crafting?
-
Is there any way in which you feel these challenges could be resolved?
Primary Research
To better understand the pain points and goals of those who shop/work at craft stores, I developed an interview script and conducted user interviews with participants over the internet.
Interview Questions
-
How often do you DIY (Crafts, Art, DIY Projects)?
-
Do you use some form of guidance (video, instructions, website) to help you through the process?
-
Where do you usually get your DIY ideas from? (YouTube, TikTok, Pinterest, DIYProjects.com, etc.)
-
Can you describe your experience while using the tools mentioned above?
-
What challenges do you face when using these tools for guidance when crafting?
-
Is there any way in which you feel these challenges could be resolved?
Target Participant Characteristics
-
Individuals who like to do DIY projects and crafts
User Research
I conducted user interviews, which I then turned into empathy maps and personas to better understand the target users and their needs. I discovered that many target users treat DIY projects as a fun and relaxing activity to be creative and save money, However, many DIY websites are overwhelming and overcrowded with information, which frustrated many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of relaxation and having fun.
Pain Points
After my research, I found that there were four main categories of user pain points:
Empathy Maps
Using my research, I created empathy maps reflecting three of my interviewees.
Personas
In order to understand my key users better, I created three personas:
Define
User Stories
User Journey Maps
I created a user journey map of Alice’s experience using the site to help identify possible pain points and improvement opportunities.
Problem Statements
Competitive Analysis
After completing my user research, I conducted a competitive analysis of websites and apps that shared similar target audiences and provided similar services as CraftHaus. I assessed each competitor by accessing their websites and installing their apps (if they had one).
Some gaps identified across the platforms included:
-
Desktop experience not as polished as mobile experience
-
Being too wordy or not having enough description
-
No search filters or category narrowing
-
No interaction among users
Some opportunities discovered based on my competitor analysis:
-
Create a clean and fully responsive desktop and mobile experience
-
Make sure there is the perfect amount of text, detail and photos for users to successfully complete the DIY projects. Make sure everything is accessible on the website (they don’t have to go elsewhere for information)
-
Text, video, and audio descriptions
-
Clear search filters and category narrowing
-
User interaction with fellow users and projects; make it feel like a community
Some opportunities discovered based on my competitor analysis:
-
Create a clean and fully responsive desktop and mobile experience
-
Make sure there is the perfect amount of text, detail and photos for users to successfully complete the DIY projects. Make sure everything is accessible on the website (they don’t have to go elsewhere for information)
-
Text, video, and audio descriptions
-
Clear search filters and category narrowing
-
User interaction with fellow users and projects; make it feel like a community
Some gaps identified across the platforms included:
-
Desktop experience not as polished as mobile experience
-
Being too wordy or not having enough description
-
No search filters or category narrowing
-
No interaction among users
Ideate
Crazy 8's
Having a better understanding of my users and competitors, it was time to focus on coming up with a solution.
The front side frames 1-5 demonstrate ideas for the homepage layout. The following frames 6-8 were additional ideas I had for the project pages.
The back side frames 1-4 were additional comments or details about front side 1-4. Frames 5-8 on the back side demonstrate ideas I had for the project page layout.
Sitemap
After sketching ideas for what the app might look like, I needed to solidify the organization of the screens within the app and website.
Prototype
Paper Wireframe
Homepage
Starting the prototype stage, I sketched out paper wireframes for the website’s homepage first.
The images to the left were the initial brainstorming sketches and the image to the right is the refined version that implemented most of the features highlighted in the initial versions.
Project Page
I also needed to decide what the DIY project pages would look like since it’s a major part of the website.
These drawings showcase the design and features that I kept throughout my design iterations.
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing an efficient search system was a key part of my strategy.
I developed wireframes for desktop, tablet, and mobile to reflect the adjustment in screen size.
Low-Fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of searching for and completing a DIY project.
Test
Research Plan
I tested the usability of the main user flow using the low-fidelity prototype. My main goals were to:
-
Evaluate the overall usability of the app.
-
Make note of any difficulties for further iteration/improvement.
-
Collect feedback from users on ease of navigating app.
Usability Study
To test my design, I tested the low-fidelity prototype on 5 imaginary users with an unmoderated usability study. Each participant conducted 5 tasks:
-
Search for a project
-
Choose a project
-
Confirm project
-
Follow the project's instructions
-
Post a comment or leave a rating
In the document below, you can see observations I made about each participant's attempt as well as each participants click path, quotes, and task completion.
Affinity Diagram
My analysis via the affinity map below is categorized by task and is filled with observations, quotes, or task completion by each participant (A, B, C, D, and E).
Themes and Insights
Patterns identified:
-
It was observed that 1 out of 5 participants had trouble searching for a project. This means that the search functionality should be further tested and revised to ultimately make it easier for the user.
-
It was observed that 4 out of 5 participants had trouble choosing a project. This means that the layout and user flow of this specific action should be revised to make it easier and clearer to the user.
-
It was observed that 1 out of 5 participants had some trouble following the project’s steps and step navigation. This means that the steps and navigation user flow need to be revised so that they are easier and clearer to the user.
-
Insights identified:
-
Based on the theme that: the search functionality should be further tested and revised to ultimately make it easier for the user, an insight is: incorporate search filtering and make sure the ‘next’ and ‘back’ buttons are clear and noticeable.
-
Based on the theme that: the layout and user flow, when ‘choosing a project’ needs to be revised to make it clearer and easier to the user, an insight is: making sure all buttons and icons are labeled and make the ‘next’ and ‘back’ buttons clearer and noticeable.
-
Based on the theme that: the steps and navigation user flow need to be revised so that they are easier and clearer to the user, an insight is: include detailed instructions for each project and include informative photos and videos to further guide instruction, as well as including a profile so the user can see the past projects that they saved for later.
Implement
Visual Design
Entering the final stage of development, visual design was locked in and a sticker sheet was created to guide me through working on the interface design.
Refining the Design
Change #1: Based on the insights from the usability study, I included labels on the buttons and made the search bar more noticeable. This allowed users to recognize the function of the buttons and more easily find the search bar, greatly improving user experience.
Change #2: To clear any confusion, I removed the arrows from the carousel.
Change #3: I included a back arrow near the top of the screen so that the user wouldn’t have to scroll all the way to the bottom or use the dropdown menu to go back a page.
High-Fidelity Prototype
Putting these final changes into play, my high-fidelity prototype for both desktop, tablet, and mobile was complete.
Reflecting and Looking Ahead
While designing the CraftHaus website and app, I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next steps include:
-
Conduct follow-up usability testing on the website.
-
Identify any additional areas of need and ideate on new features.
-
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.