DIYscover

"Do it yourself" platform - course project

DIYscover is marketed as a one stop shop for all your DIY project ideas. Depending on the topic, the user range is large and it can encompass different types of people. To deal with such a large possible group, I want to focus on ease of navigation and clean layouts.

View prototype

Project impact:

The users really appreciated the navigation and browsing experience of this website. They said that it was engaging and intuitive.
I like the navigation and it shows on all the pages.
- Participant

What I learned:

The biggest thing I learned was the importance to try new ideas and not go with the first one in mind. By doing that I was able to find a better and simpler solutions. This was especially helpful to get myself unstuck on a problem.

Project Overview

The problem:

Current DIY sites are hard to navigate and don’t offer as much filtering options like most recent, popular, relevant, ect. A secondary issue is that the layout of the instruction pages are sometimes confusing as well.

Date:

Sept 2022 to Oct 2022

The goal:

Design a DIY platform that is easy to browse both using categories and search bar. Also to create a better layout of the instructions pages for people to follow along.

Role:

UX researcher and ux designer

Tools:

  • Paper notebooks
  • Google Suite
  • Adobe XD
  • Discord

Responsibilities:

  • Conduction research
  • Brainstorm on paper and digitally
  • Paper and digital wireframing
  • Low and high-fidelity prototyping
  • Testing prototypes
  • Conducting usability studies
  • Accounting for accessibility
  • Iterating on designs

Discovery

Research summary:

I conducted interviews and created a user journey map to understand the users I’m designing for and their needs. The primary user group identified through research were cosplayers or prop building enthusiasts who want to learn to build better props or costumes. This makes sense certain niche products are either not available for purchase or very expensive. They want to have access to quality instructions as well as ways to interact with the community and ask questions.

Persona 1: Josh

Josh is an amateur prop builder enthusiast who needs access to quality step-by-step instructions because he wants to build better fan made props.

Persona 2: Eleanor

Eleanor is an experienced gardener who needs an easy to use platform for gardening because she wants to connect with others in the community.

Competitive audit summary

Instructables

Pros

  • specific for DIY content
  • Has contests to encourage people to create instructions
  • Has comment section
  • Easy to search and find categories
  • Has videos

Cons

  • Search bar not prominent
  • No filters for search results
  • Hard to navigate back to homepage
  • Recommended blogs are above comment section
  • Videos don’t have transcript

Youtube

Pros

  • Largest public video database
  • Lot of variety
  • Has comment section
  • Easy to search and find categories
  • Has filters for search results and categories
  • Video has transcript

Cons

  • Not DIY focused, need to know what you need to search for
  • No dislike button
  • Based on popularity for video

eHow

Pros

  • Simple menu and navigation
  • Good mobile navigation

Cons

  • Search results has no pictures
  • Search results has no filter
  • Infinite scrolling on posts. Hard to tell when an article ends
  • No recommended posts

Reddit

Pros

  • Community focused
  • Focus on forum style
  • Has videos
  • Easy search and categories
  • Has filters for search results and categories

Cons

  • Overwhelming, too busy
  • Hard to navigate
  • Forum/comments layout confusing

First iteration

Sitemap

  • Identify important menu items like popular categories and subcategories.
  • Ordering of subcategories is done first by adding popular subcategories then alphabetical the rest.
  • Search filtering was an important concern so adding different filtering options is crucial.
  • This sitemap is slightly different than the final one. Art/Craft category was added later as well as additional pages for account.

Paper sketches

  • Identify key pages like home, different categories,  article, account pages, ect.
  • Identify the important functions that these pages need like navigation, card for images and text, buttons and text.
  • Create multiple version of each of these key pages.
  • Focus on easy navigation.
  • This screenshot shows multiple versions of the homepage. Best features from them were chosen for digital mockup.

Low-fidelity wireframes

Homepage

  1. Navigation menu and search available on all pages
  2. Engaging browsing by providing featured, latest and popular posts for all categories

Category page

  1. Logo on all headers to easily go back to homepage
  2. All subcategories displayed before page break to ease browsing
  3. Filtering options (featured, recent, favourite and popular) on all categories, subcategories and search pages

Article page

  1. Gallery of all images from article at the start of the post
  2. Sticky table of content to make navigation on long posts easier
  3. Comment section above recommended posts

Homepage

  1. Navigation menu and search available on all pages
  2. Engaging browsing by providing featured, latest and popular posts for all categories

Category page

  1. Logo on all headers to easily go back to homepage
  2. All subcategories displayed before page break to ease browsing
  3. Filtering options (featured, recent, favourite and popular) on all categories, subcategories and search pages

Article page

  1. Gallery of all images from article at the start of the post
  2. Sticky table of content to make navigation on long posts easier
  3. Comment section above recommended posts

Low-fidelity prototype

User flow:

  • Searching for the article “building a deck for beginner” through categories or search bar.
  • Clicking on the article, browse and add comment.
  • Reply to comment from account activities.

Usability study summary

I conducted a moderated usability study. The study was performed on 5 participants (each study) for 2--30 minutes. The main goal of both studies was to test it ease of navigation and article layout.

Comment section:

Most participants were confused about the many places to add comments on an article.

Image gallery:

Most participants rather have text instructions instead of image gallery first.

Breadcrumb:

Most participants did not notice or use the breadcrumb feature present on most pages.

Save button:

Some participants felt having a save button when editing profile and settings is necessary.

Refining the design

Article page

  1. Most users preferred having the image gallery at the bottom of the article.
  2. Comment section is congregated all at the end of the article instead of each instruction step.

Account settings

  1. Payment options were removed since it is not a main priority right now.
  2. Added save button on profile info and settings

Category page

  1. Table of subcategories replaced with sidebar showing all categories and subcategories of the current category the user is in.
  2. Easy post shows number of views, favourites and bookmarks to help better inform the user.

Search page

My activities

Profile page

Favourite articles page

Mobile mockups

  1. Burger menu to accommodate small screen
  2. Image galleries scrolling horizontally benefitting from mobile sideway scroll
  3. Sidebars like table of content and categories are switched to dropdown to save space.

High-fidelity prototype

This high-fidelity prototype is created with all the feedback in mind. The layout and browsing experience has been greatly improved.

Proposed next step

  1. Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
  2. Create assets like hover changes for buttons and text. Create sticker sheets for all design elements like colours, fonts and components.
  3. Conduct more user research to determine any new areas of need. For example, users who wants to post their own articles.