Case Study:
Case Study:
MOXY Music Responsive Website
MOXY Music Responsive Website
Embedded Files
Project Overview
Project Overview
The Product
The Product
This responsive website is meant to allow music listening and purchasing and provides real time updates to artists via social media integration.
The Duration
The Duration
August 2022-January 2023
The Goal
The Goal
Many music website interfaces are who needs nature space to educate the community youth w physical music purchases.
The Problem
The Problem
To create a simpler user interface and music playing experience, allow physical music purchase and provide real time updates for artists via social media.
My Role
My Role
My roles in the project were lead UX designer, UX researcher, Interaction Designer.
My Responsibility
My Responsibility
My responsibilities included, user research, wireframing, prototyping, Ideating, Case study planning and Testing.
Understanding The User
Understanding The User
User Research
User Research
Summary
Summary
An Unmoderated 20-30 online survey and short questionnaire that follows the conclusion of the study. This questionnaire included 7 participants between the ages of 20-37, an album listening and purchasing website that is responsive to multiple screens with an interface that isn’t distracting, easy to navigate, facilitates easy search and immediate listening and exploring music, artists, genres and playlists. In addition to this we want to include a timeline feature that gives real time updates of their favorite artists, music and events.
- User Research
- Problem Statements
- Personas
- Ideation
Pain Points
Pain Points
Interface
Interface
Most sites have complex interfaces and pages and some users are distracted from listening to music with site browsing.
Responsiveness
Responsiveness
Most users want a ubiquitous site experience on all screens; and most services today have separate experiences between desktop and mobile screens.
Updates
Updates
Many users want real time web and social media updates of their favorite music artists in addition to content access in one location.
Finding Music
Finding Music
Many users want more than one way to search artists content and a persistent way to search.
Personas
Personas
Problem Statement
Problem Statement
Benjamin is a student who needs updates to the favorite artists he follows. He wants real time updates on new music, shows etc.
Goals
Goals
More productive with music.
Listens to his favorites songs, artists and playlists undistracted.
Wants a customizable interface with useful features.
Wants relevant artists and song suggestions.
Frustrations
Frustrations
Frustrated by not being able to find what he wants faster.
Anxious about complex interfaces.
Overwhelmed with too many options on the homepage.
Benjamin 🌍
Benjamin 🌍
Age: 24
Education: Master's student
Hometown: Flint, Michigan
Family: Parents, one cat
Occupation: Geology Student.
Benjamin is a 24-year-old geology student working towards his master’s degree. He works 30 hours per week at the school’s laboratory as a research assistant to pay the bills and put himself through school. His job has flexible hours, which is nice, but balancing school and work is still a challenge. Sometimes, he has to work nights to get everything done. Benjamin has two-hour breaks between work and school four days a week, which he uses to exercise and work on homework. He loves listening to music during these activities and doesn’t want to spend too much time finding the right song on a clean and organized site.
“The interface is too distracting, and I spend too much time finding something to listen to.” -Ben
Bens Journey Map
Bens Journey Map
Goal: To spend more time streaming music and using features I want.
Problem Statement
Problem Statement
Brittini is a student who needs a minimal site interface because she wants to spend more time listening to music and less time learning to use the site.
Goals
Goals
Discovers artists through exploration.
Follows her favorite artists.
Wants to learn more even more about artists.
Wants access to artist across multiples sources in one place.
Frustrations
Frustrations
Frustrated when they can’t learn more about a song or artist or album.
Frustrated when streaming has bad sound quality.
Frustrated with the suggested music choices.
Has difficulty understanding the interface when she wants to explore.
Brittini 🎓
Brittini 🎓
Age: 22
Education: Engineering student
Hometown: Chicago, Illinois
Family: Parents
Occupation: Part-time auto mechanic
Brittini is a 22 yr old engineering student who works part time as an auto mechanic to put herself through school. She takes classes at night, and work during the day. Living costs are expensive. Brittini has a couple hours between work and school a few days a week. Brittini likes to stream music while at work and during homework and study activities. She feels motivated by music.
“Listening to my favorite artists elevates my mood.” - Brittini
Brittinis' Journey Map
Brittinis' Journey Map
Goal: I can discover more info and be updated on my favorite nonmainstream artists.
Ideation 🖼️
Ideation 🖼️
Competitive Audit
Competitive Audit
My process included researching any streaming service/product space, how it was implemented and find any missed opportunities. My goals were to review competitor sites UX and find ways to create responsive consistent experience across platforms.
Starting the Design
Starting the Design
Sitemap (Information Architecture, Hierarchy)
Sitemap (Information Architecture, Hierarchy)
Card sorting was used amongst users to determine the categorization of pages and grouping relevant features with those pages in a hierarchical top-down approach.
Digital Wireframes
Digital Wireframes
The initial goal here was to make playing music immediately accessible to users. In addition, a persistent search bar across all pages allows users to find music, artists, genres etc. at any time.
Low Fidelity(Lo-fi) Prototypes
Low Fidelity(Lo-fi) Prototypes
Mobile
Tablet
Desktop
Usability Studies 📃
Usability Studies 📃
Usability Study: Findings
Usability Study: Findings
1
1
Users are overwhelmed with too many music options.
2
2
Users want more artist and music related updates and information from one service.
3
3
Users want a simpler high contrast user interface with features found on one page.
Refining the Design
Refining the Design
- Mock-ups
- High-Fidelity(HiFi) Prototypes
- Variations
- Accessibility
Mock ups(Desktop)
Mock ups(Desktop)
The goal was a simpler page with contrast and relevant info, So I responded by leaving out some page sections.
Before
Before
After
After
Mock ups(Tablet)
Mock ups(Tablet)
My thought process and goals were to over simplify the interface and make additional info temporary. So I simplified the interface even further creating more contrast, larger section labels and placing more content into overlays and consolidating other features and info to relevant pages.
Before
Before
After
After
Tablet Home Page
Tablet Home Page
Tablet Library Page
Tablet Library Page
Mobile Timeline page
Mobile Timeline page
Mobile Discover Page
Mobile Discover Page
Desktop Home Page
Desktop Home Page
Desktop Checkout Page
Desktop Checkout Page
High Fidelity Prototypes
High Fidelity Prototypes
Hi-Fi Prototype
Hi-Fi Prototype
Variations
Variations
Desktop Checkout Page
Desktop Checkout Page
Desktop Discover Page
Desktop Discover Page
Mock-Ups
Mock-Ups
Phone
Phone
Tablet
Tablet
Desktop+
Desktop+
Accessibility ♿
Accessibility ♿
1
1
Page sections are labeled. As well as general and C.T.A. buttons.
2
2
Labels have been designated and the correct HTML tags for screen readers is implemented.
3
3
I included contextual iconography to improve navigation.
Responsive Design
Responsive Design
Sitemap(Information Architecture)
Breakpoints
Breakpoints
Breakpoints
390 x 834 Phone
1024 x 1366 Tablet
1512 x 982 Laptop+
Going Forward
Going Forward
Takeaways
Takeaways
Next Steps
Next Steps
Takeaways
Takeaways
Impact
Impact
What was learned
What was learned
The simple interface and responsiveness was very much appreciated. Users got a familiar experience across various screens and appreciated no being bombarded with too many choices and features all at once. Features and settings were centralized to one location. Features were mostly toggles making use easy. Music is available while using most screens of the site.
“I appreciated the “Timeline” and social media features on one page I can browse all at once.” -User
I learned that the users studied emphasized ‘Need to haves’ instead of ‘Nice to haves’. These users appreciated a clean minimal and simple interface with limited options upfront. When designing for multiple screens consistency is very important.
Next Steps
Next Steps
1
1
I would add additional features because of user Feedback.
2
2
I will add more motion design and micro interactions to engage user focus and signal actions.
3
3
I will include additional accessibility features to make the site more inclusive for people with disabilities.
Thank You 👍
Thank You 👍
Page updated
Google Sites
Report abuse