Album Pre-Order App for a Rock Band


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


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


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


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


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


Online websites don’t
provide a suitable
mobile browsing


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


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


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

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

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.

Accessibility Considerations

Used icons to help make
navigation easier.

Have chosen appropriate
color contrast

Avoided excessive

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



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.