_edited.jpg)
Music Pre-Order App CONCEPT
Product Design / Research / User Testing / UX Design / Visual Design / Interaction Design / June 2021
Create a new app to provide a platform for users to pre-order music. The app needs to offer the ability to play other music/bands, recommend similar music to the user, and be able to play from different devices (ie car, home speakers, tv, etc). This project took 2 weeks to complete.
TOOLS USED: Figma, Pen & Paper
PROBLEM
Users don’t tend to pre-order music because they don’t feel like there is any real advantage to pre-ordering.
GOAL
Design an app that is easy for users to find and pre-order music.
USER RESEARCH
PAIN POINTS
SURVEY:
4 music lovers who used an app to listen to music at least 3x/week. Varying genders and ages 23-64.
REVEALING:
Confirmed initial assumptions about music consumers, but research also revealed that no advantages to pre-ordering music was not the only factor limiting them from pre-ordering. Other user problems included that they didn’t know how to find out about pre-orders, as well as the ability to listen to music on the go.
No Advantages
to Pre-Ordering Music
Ability to Listen to Music on the Go
Users Unaware of App to Find
Pre-Order Music
USABILITY STUDY #1
FINDINGS
Need confirmation of payment type before ordering
Desire to switch between playing devices while listening
Need more details before clicking purchase (release date, cost, etc)
STUDY TYPE
LOCATION
Unmoderated Usability Study
Mirrored Screen Recording with Voice & Audio
USA: Remote
From user's desired location (home, vehicle, etc)
PARTICIPANTS
8 total users:
(1) w/ age range of 16-20
(2) w/ age range 21-28
(2) w/ age range of 29-39
(3) w/ age range of 40-70
LENGTH
(2) sessions per user ranging from 8 - 40 minutes
.jpg)
USABILITY STUDY #2
FINDINGS
Buttons too
small for bigger fingers. Clicking other things by accident.
Overage of items on one screen was overwhelming.
Text too small for some users.
UPDATES
#1
To make the buttons easier to click for all sizes of fingers and to declutter the home screen:
-
Removed a row of buttons from the 2nd and 3rd rows
-
Made all selections larger
-
added box behind each selection so user can delineate each choice clearer
#2
-
Made all text larger.
-
Removed a row of selections from each column
-
Enlarged all buttons and user choices
-
Eliminated using more than 1 color under "ORDERS" to match Album Preview Page: teal means downloaded/received & magenta means paid for but not received/released yet.
-
Changed date format from names of month to #'s for accessibility of different language speakers.
-
Added scrolling dots to allow user to access more of their orders, purchases, and playlists.
#3
-
Made all text larger.
-
Removed a row of selections from each column
-
Moved action buttons underneath "Lmtd Edition Vinyl" so user won't miss the option to purchase.
_edited.png){kind=small}
ACCESSIBILITY
-
All colors easily readable for color blind and macular degeneration
-
All colors WCAG and AAA checked & approved
-
All fonts kept above size 14
-
Navigation bar at top and bottom are always present and clickable
-
Icons are recognizable and used in other popular apps
-
Dates in international format for differing languages to read correctly.
TAKEAWAYS
IMPACT
The app makes provides users a full music listening experience by providing a constant list of pre-order music available while simultaneously allowing them to listen to regular music too. Adding a rewards system for pre-ordering also adds incentive to drive ordering.
One quote from peer feedback:
“If this app only hosted pre-order music, I probably wouldn't use it."
If this project were to move forward, I would continue user testing and bulk up the rewards/incentive program.
WHAT I LEARNED
-
Design: While designing, 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 designs.
-
Iconography: using icons from other known apps is helpful in recognition. Creating a unique icon isn’t always beneficial to the user.
-
Color: Color blindness is a more common than previously thought: 1:12 men and 1:200 women
If you're interested in this project or would like to hear more, get a hold of me!
_edited.png)