Case Study: DIY Tutorials - Responsive Website

This project was for my Google UX Design Professional Certificate. The objective of the course was to learn the foundations of UX design, including empathizing with users, building wireframes and prototypes, and conducting research to test the designs. I completed this project over the course of 2 weeks, and learned how to use and implement mockups and prototypes on Adobe XD.

Tools used: Adobe XD, Adobe Photoshop, pen and paper.

My role: UX Designer designing a mobile app and a responsive website for DIY Tutorials from conception to delivery.

Responsibilities: Conducting interviews, papel and digital wireframing, low and high-fidelity prototyping, conducting usability studies, account for accessibility and iterating on designs.

The Product

DIY Tutorials is a responsive website for finding and viewing DIY (do it yourself) tutorials

The problem

When you search for a DIY Tutorial in the internet it’s hard to know if the information there is really reliable, what are the list of materials and if other people found it usable

The goal

Integrate the tutorials in one platform where you can separate them by category, search by materials and type of crafts

User Research

The research conducted to this project was interviews, where was possible to find the pain points and necessities of the possible users of an responsive website do viewing and finding DIY Tutorials.

During the research some assumptions changed, like the categorization of tutorials and search by materials.

Persona: Gerard

Gerard is a Pastry Chef, he’s very creative in his profession and like to do the same outside work. He like to find tutorials, ideias and find a creative destination for the craft materials that he already have at home.

Pain Points

Search

In addition to searching by type, some people also want to find what kind of DIY they can do with materials they already have

View

It is important to browse lists of tutorials by category so users have ideas of what to choose

Video and text

People don't always want to watch a video to understand something, so it's important to also have a written description of the tutorial in addition to the video

Sitemap

The sitemap was constructed based on considerations raised in the interviews during the user research.

Starting the Design

Paper wireframes

The interactions and possibilities to create a responsive website with work in different platforms started on paper with wireframes.

Digital wireframes

To improve the initial design, the results of the user research and paper wireframes were studied and adapted to the digital wireframe.

Screen size variation

On the mobile version, the categories are hide in the hamburger menu, otherwise they would take up a lot of screen space.

Low-fidelity prototype

The low-fidelity prototype presented a initial way to construct the user flow based on feedback.

Usability study: findings

Search

Users want to do a quick search by type of tutorial or material

Save

Users want to save some tutorials to watch later

Information

When enter a category, it could be confused to see too much tutorials, some users like to see a division

Refining the design

After the usability study, the head of the website was condensed in only one line to give more space for images and tutorials.

A button to back to the top in the mobile version was added after the usability study, because the list of tutorials in some categories can be long.

Mockups: Original screen size

Mockups: Screen size variations

High-fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for find a tutorial.

View the DIY Tutorials High-fidelity prototype

Accessibility considerations

There are headings with different sized text for clear visual hierarchy and The colors used in the project were adapted for accessibility issues.

What I learned

While designing the DIY Tutorials responsive website I learned more the importance of accessibility in a webpage, and how it can benefit all the users.

Next step

Conduct more usability studies to validate and then improve future areas of the website.

Thank you for your time reviewing my work on the DIY Tutorials responsive website!

Page updated

Google Sites

Report abuse