Embedded Files
This project was part of my Google UX Design Professional course. The objective of this project as part of the course was to create a responsive website using Adobe XD by exhibiting all the principles and concepts of UX design learned from the course.
PROJECT OVERVIEW
PROJECT OVERVIEW
Introduction
Introduction
Yogi Music is a small music shop startup in the suburbs of a metropolitan area. They offer quality music albums at competitive prices both in-store and online. Yogi Music targets customers who wish to purchase music albums, but due to their tight schedules, are unable to listen to their favorite and emerging artists to follow up and purchase their albums.
The Product
The Product
Yogi Music website is a user-friendly responsive website that allows a user to listen to and order quality music albums through the best user experience and interaction by providing clear navigation and a fast checkout process.
The Problem
The Problem
Busy workers with tight schedules who need enough time to rest and reduce stress, do not have the luxury to listen to and follow their favourite and emerging artists to purchase their albums. Also, available online shopping websites have cluttered designs, inefficient systems for browsing through products, and confusing checkout processes with hidden charges.
The Goal
The Goal
Design a responsive website that allows users to easily listen to their favourite and emerging artists around the world and place an order with ease and a fast checkout process without any hidden charges.
My Role
My Role
UX designer designing a website for Yogi Music from conception to delivery.
Responsibilities
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
UNDERSTANDING THE USER
UNDERSTANDING THE USER
User research
User research
Summary
Summary
I conducted interviews and created empathy maps to understand the users I am designing for and their needs. A primary user group identified through the research was working adults who have busy time schedules and therefore do not have the luxury to listen to and follow their favourite and emerging artists in order to purchase their albums.
The research also revealed that time was not the only factor why people prefer to shop online for music albums but also the ability to sample through a large collection of genres and artists from around the world at their own comfort and ease without having to stress themselves.
Persona
Persona
User Journey Map
User Journey Map
Audit
Audit
STARTING THE DESIGN
STARTING THE DESIGN
Sitemap
Sitemap
One of the primary pain points for users was difficulty in navigation, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve the overall website navigation.
Paper Wireframe
Paper Wireframe
Taking the time to draft iterations of each screen of the website on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
Paper Wireframe Screen Size Variation
Paper Wireframe Screen Size Variation
Because Yogi Music's customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital Wireframes
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Screen Size Variations
Screen Size Variations
Low-fidelity Prototype
Low-fidelity Prototype
The low-fidelity prototype connected the primary user flow of listening and ordering albums in a usability study with users.
At this point, I had received feedback on my designs from members of my team about things like buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
USABILITY STUDY
USABILITY STUDY
Affinity Mapping
Affinity Mapping
I used affinity mapping to help me find patterns common to users, which further helped me to gain insight into users pain points by understanding the users from a different perspective.
Findings
Findings
I conducted usability study and these were the main findings uncovered by the study.
REFINING THE DESIGN
REFINING THE DESIGN
Mockups
Mockups
To make the checkout flow easier for users, I added a check box that allowed users to use the same address for billing and shipping.
Based on the insights from the usability study, I made changes to improve the site's checkout flow. One of the changes I also made to improve the site's checkout flow was adding an option to change order type by cancelling the current order without having to restart the process.
Original Screen Size
Original Screen Size
Screen Size Variations
Screen Size Variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablets, so that users have the smoothest experience possible.
High-fidelity Prototype
High-fidelity Prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes suggested by members of my team.
View Yogi Music's
Accessibility Considerations
Accessibility Considerations
GOING FORWARD
GOING FORWARD
Takeaways
Takeaways
Impact
Impact
Our target users were of the view that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned
What I learned
I learned that everyone is different. You should not expect everyone to use your product the same way. There are no absolute certainties in designing. Also, listen to feedback to enable you to understand the pain points of users. And finally, do not make assumptions. Always make an effort to clarify and validate information if it is not clear.
Next Steps
Next Steps
Let's Connect
Let's Connect
Thank you for reviewing my work on the Yogi Music's website!
If you are interested in this project and you'd like to see more or get in touch, my contact information is provided below.
Page updated
Google Sites
Report abuse