UX DESIGNER
CASE STUDY
OnRepeat
Website/ Mobile site
OnRepeat is Music Streaming site
THE DESIGN PROCESS
INTRODUCTION
OnRepeat
CASE STUDY
Music Streaming App
THE PRODUCT: On Repeat
​
PROJECT DURATION: I month
​
OnRepeat is a music streaming website that helps connect artists with their fans
​
During this process I did interviews, created user personas, empathy maps, and user pathways. I did a competitive audit of exiting apps/ museum tours. I then created sketches, paper and digital wireframes, and low fidelity prototypes. I then conducted usability studies, and made adjustments, both functional and design wise. I then made high fidelity prototypes and conducted more usability tests. I then made final recommendations
Product: OnRepeat
OnRepeat is a music streaming site for fans
THE PROBLEM: Music fans have trouble keeping up with their favorite artist, and it is frustrating to use multiple sites to listen to music, buy tickets and purchase merchandise
​
THE GOAL: To create a site that makes it easy for music fans to listen to their favorite artists music, buy merchandise and buy tickets to their shows
My Role& Responsibilities
Designer
MY ROLE: Self directed UX designer
​
MY RESPONSIBILITIES: Research, persona creation, user journey, ideation, wire framing, low fidelity prototyping in Adobe XD, usability tests,UI, high fidelity prototyping
RESEARCH
User Research
Synopsis
I conducted research interviews, conducted competitive audits, created personas, problem statements and goals and created user journey maps
User Research
In Person Interviews
I conducted in person interviews and also conducted a competitive audit of various streaming sites.
Personas
I created two different persona groups of music listeners/ music fans based on the in person interviews I conducted
Personas
Persona Group 1
Persona Group 1 was made up of regular music listeners who was looking for a fun easy way to listen to their favorite artist, buy their merchandise, and tickets to their shows
Personas
Persona Group 2
Persona Group 2 is made up older music fans, who have a deep appreciation for their favorite artists and would support them online.
Journey Map
A Breakdown of the User Journey
I created a user journey map to map a users journey across multiple devices and identify pain points
Pain Points
Multiple pain points across different sites
PAIN POINT 1: Users were frustrated trying to find their favorite songs across different states
​
PAIN POINT 2: Users were unable to find merchandise and albums for their favorite artists
Pain Points
Multiple Pain Points Across Sites
PAIN POINT 3: Users found it frustrating to track their favorite artist on tour
PAIN POINT 4: Users also found it hard to find out news about their favorite artists because of paywalls
​
THE DESIGN
The Design Process
Synopsis
During this design process, I created a sitemap, paper wireframes, digital wireframes, low fidelity prototypes in Adobe XD. I also conducted usability studies.
Sitemap
Website Sitemap
I created a sitemap for a music streaming website. The sitemap was adjusted as the design process went on
Paper Wireframes
Website
I created very simple paper wireframes for the website, ( the one pictured is for the credit card pre checkout page) Originally this was combined with the actual purchasing page. This designed changed in the digital wireframe.
Paper Wireframes (Different Sizes)
Paper wireframes for mobile
I also made very simple paper wireframes for a mobile site ( the example pictured is for what ended up being the music player on the listening page)
Digital Wireframes
App/ Website
I then translated the very simple paper wireframes into more detailed digital wireframes using Adobe XD
LOW FIDELITY PROTOTYPE
Low Fidelity Prototypes
Wireframes to Prototype in Adobe XD
I made a low fidelity prototype for the website using Adobe XD. This prototype featured the main screens of the website: the home screen, the store, the credit card screens etc
USABILITY STUDIES
Usability Studies
Synopsis
I conducted unmoderated remote usability studies that lasted 20-30 minutes for 5 participants, where the participants clicked through the website and offered feedback
​
Usability Findings
Confirmation
Users wanted a to be able to clearly see the items they had purchased on the checkout page
Usability Findings
Clarity
Users wanted to make sure all the information was included on the checkout page ( zip/ email etc)
Usability Findings
Ease
Users were happy with the ease of having everything in one place, and were happy that 100% of the sites proceeds went to the artists
Incorporating the Results into the Design
Mockups, High Fidelity Prototypes and Accessibility
I then took the findings from the usability studies and created mockups, high fidelity prototypes and made sure the designs were accessible.
Mockup I: Example
Before Usability Study
This first example is the low fidelity digital wireframe of the credit card payment page that was tested.
Mockup I: Example
After Usability Study
Based on user feedback, I updated the mockup to have complete credit card input fields and made sure the colors used on the page were readable
Mockup II: Example
Before Usability Study
The second example is the digital wireframe from the checkout page. It is a very simple layout.
Mockup II: Example
After Usability Study
This is the mockup of the checkout page from after the usability study. I separated the "edit" and "purchase" buttons for clarity and added the graphic of the album being purchased
MOCKUPS
Mockups I
Website and Mobile Screens
These are the designs of the final screens for both websites and mobile
Mockups II
Artist Homepage
This is the final design of the artist homepage for both web and mobile.
Mockups III
Website Screens
Images of final website mockup screens for the checkout and payment screens
Mockups IV
Mobile Mockups
Mobile screens including the shop page
ACCESSIBILITY
Accessible Design
Contrast
A site that compares the hex colors that are used in designing, was utilized to make sure that the website met accessibility standards
Accessible design
Hierarchy
I used different heading sizes to clarify importance
Accessibility
Easy Navigation
The  navigation through the site, was simple, clear and consists of multiple pathways.
HIGH FIDELITY PROTOTYPE
High Fidelity Prototype
in Adobe XD
The mockups were used to create a high fidelity prototype
CONCLUSIONS
Takeaway& Next Steps
Styles, Customization and Community
Next steps included community and customization of individual profiles
Individual Profiles
Styles
One of the next steps would involve testing out different styles and designs for individual profile pages.
Site Customization
Possibilities
Another step was testing site customization, with different features for users.
Community
Fan Communities
The final next step would be testing out different versions of fan communities, and seeing what if any would be of interest to users