Album Pre-Order App for a Rock Band

Overview

This album pre-order app for the rock band, Mayonnaise is perfect for fans who want to get their hands on the latest albums before their release date. With this app they will be able to purchase the album, stream the band’s music, connect with other fans of theband and even get the latest update about the band.

Project Duration

March 2023 to August 2023

My Role

Lead UI/UX Designer

Responsibilities

User research, paper and digital wireframing,
low and high-fidelity prototyping, conducting
usability studies.

Problem

People do not have time to check to see if the
album that they want has been released.

Goals

Our project seeks to create an Album Pre-Order App to fill
the gap between the convenience of digital music and the
delight of physical music collections. This will allow users
to have a seamless experience in pre-ordering the album.

In order to comprehend the target user and their needs better, I conducted user interviews, which I then translated into empathy maps. Even if they are fans of the band, I discovered that many of my target audience members like to listen to albums before purchasing them.

In order to maintain a pleasant experience, the check-out procedure should be easy and user-friendly.

Pain Points

Time

Users don't want to
waste their time trying to
find out when they can
place an order.

Experience

Online websites don’t
provide a suitable
mobile browsing
experience.

Experience

Sometimes albums are
already sold out the
same day that they are
released.

Interaction

The inability to preview
the songs on the album
may hinder some users’
purchase decision.

Personas

Kevin is a Data Analyst and music fan who needs to be notified on latest album releases and pre-order dates because he often miss out the pre-ordering period thus albums are already sold-out.

Jannika is a Graphic Designer who needs to have an app that can make her listed to a few tracks before she can order it for her boyfriend.

Paper Wireframes

Paper wireframes provide quick and inexpensive iteration. I sketched first the ideas I have in mind for this album pre-order app.

Digital Wireframes

As we go along in the design phase, I ensure to base the designs on feedback and findings from the user research. In this document I chose to show one part of the ordering process.


As we go along in the design phase, I ensure to base the designs on feedback and findings from the user research. In this document I chose to show one part of the ordering process.


Low-fidelity Prototype

This show the flow of pre-ordering the album up until the checkout process

View low-fidelity prototype

Usability Study: Findings

Round 1 findings:
  1. More information about the album.
  2. User wants a way to see all the available modes of payment.
  3. Users will have a hassle free ordering experience.
Round 2 findings:
  1. Buttons are a bit smaller. Needs to be resized for optimal navigation

Mockups

Based on the insights on the usability study, I made changes on the Complete Order page. All other payment options that the are available are already shown to users.


High-fidelity Prototype

The user flow of my hi-fi prototype was the same as that of my lo-fi prototype, and it incorporated the design modifications implemented after the usability study.

View high-fidelity prototype

Accessibility Considerations

Used icons to help make
navigation easier.

Have chosen appropriate
color contrast

Avoided excessive
animations

"Over-all, the User Experience is very straight forward, easy to navigate and use."

Takeaways

Impact 

By developing the Album Pre-Order App, we aim to provide music fans with a modern and convenient solution to pre-order albums, combining the joy of physical ownership with the benefits of digital connectivity. This app will not only benefit users by enhancing their music discovery and collection experience but also support artists in building a strong fan base and driving pre-order sales for their music releases.

What I learned

I learned the initial ideas and design that comes up is only just the beginning of this process. Regardless of the project one is working on, usability study and peer feedback will affect the final result. A good design that take into consideration the accessibility needs of other will not just give them a great user experience but will benefit others as well.

Next Steps

Conduct additional usability tests to confirm that the pain points that the users encountered have been successfully addressed.

Conduct more user research to determine any new areas of needs and ideate new features.


Thank you for your time reviewing my work on Album Pre-Order App!
If you’d like to see more or get in touch, my contact information is provided below.

Email: hello@charmerazo.design
Back to Top
See More 
Top