Meet the Makers
Meet the Makers is a responsive website designed for people who enjoy and have a knack for completing home projects on their own. DIY’ers are able to share and access tutorials for upgrading their house, while also building community support for inspiration, motivation, knowledge and free tools to ease their mind as they create a space they always dreamed of.
My Role
UX Researcher, UX Designer, UX Writer, UI Designer & Information Architect
Duration
April 2022-June 2022
Creating understanding
Many DIYers are using social sites like YouTube and TikTok when they are searching for step by step instructions or inspiration for a home project they would like to complete. However, the missing element is community support and access to free or low-cost tools.
What problem were you solving?
Meet the Makers site is a place where DIYers can not only find tutorials, but they will be able to build a supportive community and have access to free or low-cost tools that will help them finally complete that home project they have desired to finish.
What was your goal?
Throughout the process, I was responsible for creating a user survey, recruiting participants, building a sitemap, paper and digital wire-framing, low and high-fidelity prototyping, conducting moderated & unmoderated usability studies, accounting for accessibility, iterating on designs and responsive design.
What were your responsibilities throughout the process?
Introducing the users
I created surveys on Typeform and recruited a diverse set of six research participants through my personal social platforms such as Facebook, Instagram, and Twitter. I learned that many users spend mostly their weekends and weeknights working on home projects and while sites like YouTube have been beneficial in providing great instructions, the missing link is the ability to easily find the tools to complete the projects on their own. This would cut down on the amount of time spent on each project and will allow them to use their time effectively since they are building in their spare time. Lastly, I discovered that users would like to build community to share resources, tips, and inspiration throughout their process. I utilized this knowledge to focus on designing a site that would allow users to not only build trust, but also community to ease their mind while their upgrading their home.
Lack of Community
DIYers currently lack opportunities to create community around their projects. It’s hard for them to find the tools & equipment they need to complete the tasks. This decreases their efficiency and increases the time they have to allocate to building on their own. The website will allow them to connect with other DIYers who are either giving away their tools or selling them at a reasonable cost.
Rankings
When searching for the best tutorial to follow, DIYers have a hard time selecting the correct one. Often times, they have to spend hours watching various tutorials and reading the comments in order to determine if it would be beneficial to their project. This website will highlight the best tutorials based on the recommendations of other users to provide feedback to DIYers who want to save time during their selection process.
Cutting time
Since DIYer’s mostly complete these projects in their downtime, they need to have a quiet space or recommendations on how to create efficiencies when there are many distractions. The website will allow them to connect with others who have found ways to work around their distractions
After conducting my research, I wanted to visualize the pain points in order to find opportunities to improve the user’s experience. So, I created a journey map based on the actions Lizzy currently takes in her DIY adventure.
Beginning the design
An area of frustration for users was that they were overwhelmed with the amount of tutorials they had access to and not being able to quickly find a great tutorial to get them started on their project. With this sitemap, I focused on ease of navigation and the ability to move quickly through the site. My goal with using information architecture was to be strategic in creating simplicity and ease throughout the user’s experience.
When laying out the digital wireframes, I kept the user’s issues front and center. I wanted to make sure I created community while addressing their need to have an effective and efficient process that makes great use of their time in finding the appropriate tutorials.
Homepage has featured and highly rated tutorials so users can get to the highest ranked quickly
Users can easily access the community they have built through their account, as well as tutorials. These pages are easy to navigate to from the homepage.
Here are digital wireframes of various screens to give a visual representation of how the website would respond to different screen sizes.
For the low-fidelity prototype, I wanted to show two different user flows. One is for an account holder who would like to view their saved/favorite tutorial and the other is for a non-account holder who is viewing a top recommended tutorial
Testing low-fidelity prototype
I conducted a moderated usability study with 5 participants that lasted about 45 minutes. With this study, I wanted to determine how easily users were able to navigate in each page and also what they prioritized in finding the type of tutorial they needed. Below are the main insights I derived from this study.
Search
Users struggled with finding the search bar, so I wanted to make it more prominent on each page
Saved Tutorials
Users wanted to save their favorite tutorials to be able to easily reference them from their account
Ratings
In order to determine the quality of the tutorial, users were adamant about knowing how the video was rated amongst other users
Elevating the designs
Based on the findings from the usability study, I made changes to the search bar, saved tutorials and the tutorial page. For the search bar, I moved it to the center page on the homepage while adding some elements around it on the sub-navigation pages. I also included a “heart” on each tutorial to allow users to add their favorite tutorials to their account to revisit later. Lastly, I switched the ratings and likes to make it more important and easier for the user to find.
Before usability study
After usability study
Original screen sizes
Since many users access webpages on their mobile devices such as tablets and smartphones, I thought it was important to optimize the site for a variety of devices so users have the most seamless experience possible. Included is the site optimized for a smartphone.
vs screen variations
This flow shows a user selecting the best tutorial to view for their home project. It also shows them searching for a specific tutorial
During the design process, I considered the accessibility of the website in the following ways:
I used different colors to indicate actions within the website and also made them prominent through visual elements such as bordering
I used various titles for each page to denote their purpose while also using universal language for users utilizing screen readers
I used headings with different text sizes for clear visual hierarchy
Proceeding forward
When users tested the final mockups of the site, they shared that it was intuitive, seamless, and engaging. With the images, clear visual hierarchy, and the use of coloring, it made their experience fun, informative, and easy. Small changes in your design can significantly impact the user flow and remove a barrier for them to be able navigate a website with little to no frustrations. Putting the user first, removing any biases you may have, and focusing solely on what the user needs will always create the best experience for the person who is actually using your design.
Conduct another usability study to iterate on designs and ensure designs address user pain points
Conduct additional user research to determine other needs