Beat Drop :)

UX design
The Problem
BeatDrop is an album pre-sale app designed to provide a platform which allows users of all kinds to access and download new music directly to their destination of choice.
Project type
UX design
Project Duration
February 2021- August 20211
The Goal

Design an app that allows user to easily download albums as thery are released and pay with a large assortment of payment options.

My Role
Sole UX Designer for the BeatDrop app from conception to delivery.
Concept creation, conducting research and interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iteration of designs throughout the process.
I used the design thinking methodology by conducting interviews and creating empathy maps to better understand the users and their needs. Two primary user groups which were identified throughout the research busy tech0savvu people as well older individuals who were less technologically inclined with an important range of accessibility considerations.


Problem Statement:

Chris is a tech savvy young person who needs an easy way to pay with digital currency because it streamlines his life.


Problem Statement:

Colleen is a loving mom who needs an easy no-fuss app that's accessible and understandable because she not as technologically inclined.

I decided to dig deeper into the user process by creating a User Journey map for each persona.

Mapping Chris' user journey revealed how helpful having the digital currency options really could be.

Mapping Colleen's journey map revealed the level of complexity required to provide Colleen with an equally seamless experience while keeping everything simple for her to easily follow.
I began to draft each screen as a paper wireframe to get a clean and simple user flow established. I wanted things to be easily identifiable and usable.


                                                         As the design process continued to evolve, I made sure to keep the design aligned with the information obtained through user research.

Here you can see navigation cues at the top left using universal icons

such as the hamburger menu icon for easy recognition and access to other

parts of the app

Additionally, you can see that a variety of payment options are provided to

accommodate for user preferences.

Simple fonts and clean lines were essential in maintaining the accessibility concerns as well as a fresh design for the tech savvy.  I wanted to ensure that this screeen was also balanced in the sense that it was not overly text heavy since it was already so image heavy with album art.

Simple layout used to provide easy and organic navigation.

The completed spread of digital wireframes was userd to create a low-fidelity prototype. the user flow that I connected consisted of making an album purchase which, would be used in the usability study so we could gather feedback.

Low-Fi Prototype
The findings from round 1 of our usability study were actually quite positive. It did highlight areas of improvement and therefore, i began to implement these into the next round as well as the mockups.

                                                                          The final high-fidelity prototype allowed for a cleaner flow for purchasing the albums and also curating a rewards system.

High-Fidelity Prototype

Accessibility is always important and especially considering the wide breadth of users who will hopefully be utilizing this product. I wanted to be sure to take these into account to enusre equitable design.

The first usability study indicated that users were annoyed and concerned that there was no order summary before the payment is actually made so, I added an order review screen between the "Payment" screen and the "Order Confirmation" screen.

On the left you can see the Payment screen followed immediately by the Congratulatory screen. On the right, you can see the newly added Cart Review Screen I added post usability study.

The second usability study revealed subtle design consideration that were desired so users could easily differentiate the menu screen. I wanted to keep things rather simple while still denoting that this screen was different from the others by simply adding colored confetti in the background to make it stand out more clearly to users.

These are some other screens mockups the users will see within the application.
No items found.

Other projects

Let's Innovate!

If you'd like to collaborate with me, please feel free to reach out below

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.