Fulya Gursel - DIY Tutorials Responsive Website Case Study

DIY Tutorials Responsive Website Case Study

This project assists DIY enthusiasts in connecting with the DIY community and selecting suitable projects by providing various criteria for them to choose from.

My Roles

I’m a UX/UI designer taking part of all of the all process and steps.

My Responsibilities

Research
User Flow
Persona Mapping
Competitive Analysis

User Journey Map
Low-Fidelity Wireframes
High-Fidelity Mockups
Prototoyping

DIY Tutorials Responsive Website Case Study

Project Overview

The Problem

Users attempt to navigate through the project using scattered and unclear step-by-step tutorials from various websites, which lack consistent criteria.

The Goal

Assist users in discovering clear, step-by-step DIY tutorials through search filters, and enable them to connect with the DIY community on a user-friendly website.

Understanding The User

User Research

I conducted interviews and crafted empathy maps to gain insights into the users I am designing for and their needs. Through research, I identified a key user group: enthusiasts seeking tutorials to assist with their upcoming projects.

Users encountered difficulties while researching project ideas on multiple websites and faced challenges in finding the desired information. They struggled with decisions about the necessary tools and materials for their projects, resulting in decreased motivation before initiating the project, despite anticipating an enjoyable experience.

Pain Points

Information

Finding clear and appropriate DIY tutorials in one place is challenging due to the varying quality and clarity of available resources.

Time

Having to spend additional time and effort searching for extra resources to meet the high expectations set by the project is incredibly time-consuming and often challenging.

Filter

Determining the appropriate skill level and accurately estimating the time required for a project can be particularly challenging when relying on DIY tutorials due to their varying complexity and the potential for missing details.

Community

Finding comprehensive and user-friendly tutorials in a single location, along with opportunities to learn through interaction with other users, can often be a challenging and time-consuming task.

User Personas

Empathy Maps

User Journey Map

Competitive Analysis

My goal is to identify my key competitors and review the products of my competitors and find their gaps in this competitive audit.

Starting The Design

Site Map

The primary challenges included insufficient search capabilities and a lack of clear tutorials on DIY websites. Keeping these issues in mind, I designed the sitemap to address these concerns.

Paper Wireframes

Low Fidelity Wireframes

I wanted to ensure that users could be searching the project name that they were inspired by something and could be browsing the details.

Responsive Variations

Usability Study Parameters

Usability Study

Unmodareted

Time

20-30 Minutes

Remote

USA, Turkey

Participants

4 participants

Usability Study : Findings

I conducted an unmoderated usability study with 4 participants. Research goals are determining if users can complete core tasks and making sure the user flow is correct if the app has any pain points in the whole process of the task flow. These pain points below are items that users have determined.

Search Bar

I moved the search bar from the hero section to the header section, so that users could access it easily.

Create Post Button

Some users wanted to create a project easily so I put on the "create a post" button on the header section.

Project Time

Some users wanted to see the total time of project info on the project content box.

Search on Community Forum

Some users are frustrated about not searching feature on the forum page.

Based on the insights from the usability study, I moved the search bar from the hero section to the header section so that users could access it easily. I removed the content of the features section because some users found this section unnecessary.