Logo Quasiorder.png
Music Pre-Order App CONCEPT
illustrated-mockup-featuring-two-iphone-11-pro-screens-with-a-customizable-background-2885

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

Persona1 PreOrderMusicApp_Page_08.jpg
Persona1 PreOrderMusicApp_Page_09.jpg

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

Case study deck_ Pre-Order Music App (1).jpg
Case study deck_ Pre-Order LofiPrototype.jpg
Pre-Order BeforeAfter usability study.jpg

HI-FI PROTOTYPE

The final hi-fi prototype presented cleaner user flows, better scrolling, & more details provided to user when ordering. It also included more recognizable icons.

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.

HOME.png
iPhone X, XS, 11 Pro – 3.png
iPhone X, XS, 11 Pro – 1.png
neon arrow (1)_edited.png
NEWHome.png
neon arrow (1)_edited.png
NEWLibrary.png
neon arrow (1)_edited.png
NEWAlbum Preview.png
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!
neon arrow (1)_edited.png
neon arrow (1)_edited.png
neon arrow (1)_edited.png
neon arrow (1)_edited.png
neon arrow (1)_edited.png