DIY HUB
A responsive website that helps people find, view and keep track of their favorite DIY tutorials.
Embedded Files
CHALLENGE
The prompt for this Google UX Design Certificate project was to design a responsive website for finding and viewing do-it-yourself tutorials.
SOLUTION
DIY Hub is a DIY tutorial aggregator website that allows users to find, organize and track video and text tutorials from different Internet sources in a single location.
USER SURVEY & INTERVIEWS
The first step I took to fulfill the prompt was carrying out an online survey with 25 participants about online DIY tutorials (the inclusion criterion was that they watched at least 1 tutorial in the previous 6 months). I then recruited 8 people with the same inclusion criterion and interviewed them about their experiences. These steps were aimed at collecting both quantitative and qualitative data, which allowed me to gain some valuable insights into their habits, pain points and needs.
KEY INSIGHTS
Computers and smartphones turned out to be the main devices participants viewed tutorials on. Many switched between them depending on the situation, which supported the case for a responsive website.
Although the majority of participants resorted to tutorials for a variety of spontaneous one-time tasks, almost just as many used them recurrently in relation to a particular hobby, interest, or job. The latter were identified as the key users for the DIY Hub project because they were the most active tutorial consumers and could benefit the most from a service for organizing and keeping track of categorized tutorials.
The first two questions of the online survey
Key results
What device do you normally use to view online tutorials? [multiple choice]
What topics are the tutorials you view about? [multiple choice]
Where do you normally look for / find tutorials? [multiple choice]
Do you keep track of the tutorials you viewed?
87% No
Would you like to keep track of the tutorials you viewed?
47% Yes
pain point
keep track of tutorials from multiple sources
Many participants who regularly used tutorials for a specific reason were frustrated by the difficulty of finding previously viewed tutorials again. Interestingly, the great majority of participants did not keep track of tutorials, but almost half of them wanted to. People reported using a wide range of workarounds to retrieve tutorials, such as googling the same tutorials again, setting browser bookmarks, copying URLs, and saving social media posts. However, most methods were platform-specific or could not be used across devices and search results could vary depending on the device.
With the DIY Hub project I mainly aimed at solving this pain point.
PERSONAS & EMPATHY MAPS
Drawing from the results of my user interviews and survey, I created two personas and empathy maps that summarized and humanized the main findings.
pERSONAS
EMPATHY MAP
COMPETITIVE AUDIT
Next, I collected and analyzed information about similar websites to understand their strengths and weaknesses in relation to the activities of finding and keeping track of tutorial content.
Since I couldn't identify any direct competitors in my area (i.e. DIY tutorial aggregator sites), I audited three popular sources of tutorials: wikiHow, a wiki-style website featuring how-to articles on a variety of topics, YouTube, the leading video sharing and social media platform, and Pinterest, an image sharing and social media service designed to enable saving and discovery of ideas on the internet.
Key INSIGHTS
Pinterest features quite a large amount of promotional/sponsored pins (marked in red) in its search result pages, which are visually similar to organic results and can distract users.
Due to the shape and size of Pinterest pins, minimal information is given about their content (in this example, just a picture and part of the source). Users need to click on the pin to see more details in a new page.
If more information were visible directly in the search result page, users could scroll search results more efficiently and without interruptions.
If more information were visible directly in the search result page, users could scroll search results more efficiently and without interruptions.
YouTube
wikiHow
Given the huge amount of topics covered by the competitor sites, prominent search bars (marked in red) are the main point of access to content above the fold.
YouTube and wikiHow also feature an Explore section with category menus, and YouTube has additional personalized category chips (marked in blue).
While my later usability studies confirmed that the search bar is indeed used far more often than navigation to find content, category menus also helped users get to the desired content. A mix of both was therefore used in the DIY Hub homepage.
YouTube and wikiHow also feature an Explore section with category menus, and YouTube has additional personalized category chips (marked in blue).
While my later usability studies confirmed that the search bar is indeed used far more often than navigation to find content, category menus also helped users get to the desired content. A mix of both was therefore used in the DIY Hub homepage.
As users are extremely likely to have used YouTube before, leveraging their prior experience with its sharing and playlist features could helped flattening the learning curve and facilitating adoption of DIY Hub.
Dos
Make sure users are provided with as much information as possible to quickly navigate to their desired content
Ensure focus on the main task
Whenever possible, offer users different ways to carry out a task
Take advantage of users' prior experience with established products
DoN'Ts
Avoid distractions that hinder users in their task flow
Minimize the number of clicks/taps needed to perform an action
Keep redirection to other pages to a minimum to help users stay focused (as redirection is already necessary to view some content)
Some Dos and Don'ts from the SWOT analysis
INFORMATION ARCHITECTURE
Keeping in mind the previous insights, I defined the main areas of the DIY Hub sitemap to be included in the MVP user flow:
HOME
The main point of entry, focused on enabling users to quickly find their desired content. A search bar supports known-item seeking, while category megamenus accommodate exploratory seeking. Sign-up CTAs are also present to drive engagement, as well as popular content / custom recommendations for recurring users.
SEARCH RESULTS
Search results are presented as cards with detailed information to help users quickly select the most relevant content.
Filters allow users to sort the results and refine their search by criteria such as type of content, duration, and upload date.
TUTORIAL PRESENTATION
Here users can actually see large size versions of the selected tutorials as embedded videos or links. Signed-in users can interact with them by liking them, commenting, sharing them on their social media profiles or via email, and adding them to a collection.
Related content is also displayed for further exploration.
ACCOUNT
After setting up an account, users can manage their personal details, account settings, and favorite tutorials in this area.
Users can create collections and populate them with tutorials to keep everything organized.
The complete DIY Hub sitemap with the tutorial presentation page at its core.
The area inside the dotted line is part of the MVP I developed.
The area inside the dotted line is part of the MVP I developed.
WIREFRAMES
At this point I tackled the layout of the desktop website by sketching various pages on paper and then turning them into digital wireframes.
In this phase, I was careful to minimize the cognitive load on users by relying on user interfaces and principles they already knew, so that they could focus on the main objective of learning from tutorials rather than learning how to interact with DIY Hub interface.
Using the graceful degradation approach, I then rearranged the page elements for mobile screens.
Some iterations on paper for the desktop homepage
Early desktop wireframes
Tutorial presentation page, desktop and mobile
USABILITY STUDY
Once finished wireframing, I used the low-fidelity prototype to carry out a moderated usability study with five users to determine if they could complete core tasks within the DIY Hub website. I then categorized my notes in an affinity map and synthetized them into themes that guided the transition to the high-fidelity prototype.
PROMPTS
Set up an account
Find tutorials about model aircraft
Filter the search results by upload date
Leave a comment on a tutorial
Add a tutorial to a collection
Navigate to your collection
Change your account password
Log out of your account
KPIS
Use of navigation vs search
Drop-off rates
Time spent on task
Error rates
System Usability Scale
SUS
I think that I would use this site frequently.
I find the site unnecessarily complex.
I think the site is easy to use.
I need the support of a technical person to be able to use this site.
I find the site easy to navigate.
There is inconsistency within the site.
I imagine that most people would learn to use this site quickly.
I feel confident using the site.
I need to learn a lot of things before I can start using this site.
The steps needed to carry out a task are clear
KEY INSIGHTS
Based on the theme that participants could easily locate the top search bar but found it more difficult to find the Sign up button, an insight was to duplicate the Sign up button on the homepage, rather than the search bar.
Before
After
Based on the theme that participants had some difficulty distinguishing collection cards, an insight was to differentiate the appearance of collection cards from that of single tutorial cards.
Before
After
Based on the theme that participants found it inconvenient to have to re-open the filter menu after every change, an insight was to add confirmation/cancellation buttons to the filter menu.
Before
After
Based on the theme that some participants were confused about what they were actually saving when they clicked on the Save button in the account settings, an insight was to add dedicated Save buttons for each setting.
Before
After
Based on the theme that some participants expressed the wish to be able to reorder the items in a collection, an insight was to add an intuitive drag & drop interaction to carry out this task.
USER INTERFACE DESIGN
Most of the pages are dominated by colorful tutorial thumbnails. There I used neutral background colors to avoid unpleasant chromatic clash and keep users focused on the content.
For navigation and CTA elements, I chose intense contrasting shades of purple and orange with gradients to signal interactivity and make them visually stand out, creating a clear separation from content sections.
For navigation and CTA elements, I chose intense contrasting shades of purple and orange with gradients to signal interactivity and make them visually stand out, creating a clear separation from content sections.
In the logo, which is set in a customized Righteous typeface, the counter of the letter B is shaped like a play button as a hint to video content.
For the general typography I chose Kanit, a contemporary sans serif typeface family. The flat angles of its stroke terminals allow for decreased spacing between letters while preserving readability and legibility at smaller sizes.
MAIN USER FLOW
Home page
Tutorial card:
Source
Thumbnail
Author and creation date
Text or video tutorial icon
Title
Likes
Signing up
Searching
Filtering the search results
The design is based on the YouTube website to take advantage of users' previous knowledge
Viewing a tutorial
Adding a tutorial to a collection
I chose the word 'collection' instead of 'playlist' because tutorials can be both in video and text form, and text tutorials cannot be 'played'.
Opening the personal library
(FINAL) PROTOTYPES
Click on the images to open the (final) Adobe Xd prototypes for the different screen sizes.
GOiNG FORWARD
Going forward, it would be interesting to carry out more usability tests on the high-fidelity prototypes to further refine the design and implement functionalities that I left out in the MVP (e.g. the ability to suggest or upload tutorials).
The opportunity of applying real business goals to the project and actually launch it would also be very motivating, as it would challenge me to tailor the project to specific parameters, goals and restraints and measure its success against them.
WHAT I LEARNED
This project mainly taught me how powerful the knowledge transfer between user interfaces can be. I was amazed by how users' mental models and previous experience can support them in using a product and reduce the cognitive load on them, allowing for a smoother user experience.
Google Sites
Report abuse