Guitar Tutorial

Guitar Tutorial is an online guitar tutorial website. I designed the website from conception to delivery while completing the Google UX Design Professional Certificate Course. Throughout the project, I demonstrate my UX skills in conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

📱 Product

Guitar Tutorial is a musiccompany designed to help people learn guitar.

⏰ Project Duration

February 2021 – October 2021

🤔 Problem

Aspiring musicians and creatives are frustrated with the guitar learning process.

🎯 Goal

Design a guitar tutorial website that is easy to use and visually appealing.

💪 My role

UX designer designing an app named Guitar Tutorials from conception to delivery.

👩🏻‍💻 Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

User Research: Summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. The primary user group identified through research was working adults who want a stress-free experience of ordering art online.

This user group confirmed initial assumptions about ordering art from an art gallery. My research revealed that customer service was not the only factor for limiting users to purchase art online. Other users problems included website speed, photos, or other functionalities that make it difficult to purchase their art.

User Research: Pain points

• Site Navigation: Users don’t have an enjoyable user-experience with the guitar website.

• Time: Users find it very time-consuming to watch a 20-minute lesson video.

• Complicated Process: Users are often confused in the learning process.

• Difficult to Start: Some users have never learned to use tutorial videos and need to learn how to do so.

Bill is a busy working engineer who needs an intuitive website navigation and search filters because they want to a guitar website that is stress-free

User Journey Map

Persona: George

Goal: A stress-free experience learning guitar online.

Mapping George’s user journey revealed how helpful it would be for users to have access to a user-friendly guitar tutorial website.

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized an easy way to navigate around the website.

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

Low-Fidelity Prototype

The low-fidelity prototype connected the primary user flow of learning guitar so that the prototype could be used in a usability study with users.

High-Fidelity Prototype

The low-fidelity prototype connected the primary user flow of learning guitar so that the prototype could be used in a usability study with users.

Usability Study: Parameters

• Study type: Unmoderated usability study

• Location: San Jose, United States | Remote

• Participants: 5 participants

• Length: 20-30 minutes

Usability Study: Findings

• Structure: People want to have a clear distinction on learning guitar online.

• Guidance: People want clear guidance on the guitar learning process.

• Search: People want a better search engine to find guitar lessons.

Mockups

There were a few actionable insights I came up with from the usability studies. One of these was creating a clear structure so that the users can have a clear distinction on learning guitar online.

The early design did not include clear instructions for the user on how to learn guitar. I added the instructions to make it clear for the user to follow.

Mockup Screens

High-Fidelity Prototype

The hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.

Accessibility Considerations

• More than one option to complete an action: For example, input an arrow at the bottom of the home page to go back to the top.
• Clear instructions and visual grids: Clear instructions and directions on how to do the checkout process.

What I learned

While designing the Guitar Tutorial website, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s design.