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!Â