Apollo
Apollo is an app designed for users to be able to preorder music albums with ease. Apollo strives to deliver a fast, unique and equitable experience, focusing on the speed of purchase and the core idea of inclusivity.
This app will focus on addressing various accessibility needs of users and will make it simple for users to buy their favourite music.
PROJECT OVERVIEW:
Project Duration
November 2023 to December 2023
My Role
UX Designer designing an app for Apollo from the conception to the delivery.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem
There are many apps on the market that offer users the ability to preorder albums. However, most of these website / apps do not cater to people that are busy and would like to purchase as fast as possible as well as people impairments who tend to receive information in a different way.
The Goal
Design a preorder app for music that can tackle different accessibility needs of the users and makes it easy for users to purchase their favourite music.
UNDERSTANDING THE USER:
I conducted interviews and created empathy maps to really empathise and understand the users I’m designing for and their wants and needs. A primary user group identified through research was with students who really love pre-ordering albums/music but don’t have the time to keep looking for the album they want to pre-order.
This user group assured me that when pre-ordering an album, the process needs to be quick, easy and straight to the point. Upon further investigation, time was not the only limiting factor when it came to pre-ordering albums. Other user problems like visual impairments, obligations and other challenges make it harder to preorder an album as quick as possible.
Persona Empathy Map
User Pain Points:
Time
Whether its students or working adults, both groups of users think pre-ordering an album takes too long.
Accessibility
Platforms for pre-ordering albums are not equipped with assistive technologies.
IA
Text-heavy menus in apps are often difficult to read and order from.
Meet The Users:
Name: Zareen
Age: 22
Family: Lives with Uni Friends
Occupation: Student
Zareen is about to complete a B.A. in Business Administration and hopes an internship will launch her career in project management. Even though Zareen most enjoys the time spent working with her mentor on a campaign, She also loves hip hop music and also has a massive CD collection at home. She is an avid concert goer too and loves to spend her time finding new music.
Name: Max
Age: 35
Family: Wife and 2 kids
Occupation: Tech Consultant
Max is a mid-career professional who was recently promoted in their job at a large tech company. They live in the suburbs on the outskirts of a large city. They enjoy dining out and discovering new music. Max may not be able to find as much time for those activities as they take on more responsibilities at work.
Alfie wants to make their team proud, level up their skills and forge positive relationships at work but at the same time stay up to date with the latest music that his favourite rappers release.
User Journey Maps:
I created a user journey map that both my personas will go through. Mapping their journeys revealed the need for an app that helps users pre-order their favourite albums as fast as possible.
Goal: A quick way to pre-order a physical copy of an album
Zareen’s User Journey Map
Competitor Research:
To understand what is already available in the music preordering market and what features are available, from each competitor. This will enable me to assess whether the limitations and pain points have been addressed by comparing my study with the user journey map.
While these platforms offer wide selections and robust features, many lack a seamless mobile experience tailored to preorder-specific interactions
Key Competitors Analysed:
Amazon: Extensive product range but cluttered mobile navigation. Limited preorder-specific features.
HMV: Strong brand identity but inconsistent mobile experience and limited interactivity.
Rough Trade: Niche appeal with a clear tone, but lacks seamless user flow for preorders.
iTunes: Polished design and content tone but less intuitive navigation for preorder workflows.
Key Insights:
First Impressions (Mobile Experience): The competitors often prioritised broader product catalogues over preorder user flows.
Interaction: Features like preorder navigation and accessibility are often underdeveloped.Visual Design: Many competitors maintain strong brand identities, but Apollo’s sleek, modern design stands out.
Content: Descriptiveness and tone vary, with some failing to communicate preorder benefits clearly.
STARTING THE DESIGN PROCESS:
Paper Wireframes:
I started to put together the concept into form. It was good doing mulitple of these, so I could quickly start identifying the pros, cons, and "what-ifs" of each sketch. It was interesting to see the differences between each idea as this was essentially the first time i could see all my different interpretations of what I initially thought the app should look like.
As the design phase continues, i made sure to take feedback and user research findings into account when designing the base screens.
Digital Wireframes:
Easy navigation was a key user need as it help them navigate the app very quickly.
An equitable design is key when it comes to providing an equal user experience for all users.
Low-Fidelity Prototype:
The low fidelity prototype connected the primary user flow of pre-ordering an album.
Usability study: Findings
I have conducted two rounds of usability studies. Findings from the first study helped guide the design from wireframes and the low-fi prototype to mockups. The second study used a high-fi prototype and revealed what aspects of the mockup need to be updated / changed to aid in improving the user experience.
Round 1 Findings
Users want a cart to review purchase
Some users were confused on how to edit profile
Users found app quick and easy to use
Round 2 Findings
Create order summary once purchase is complete
Make the accessibility buttons clear and visible
Allow for more colour contrast in the cart page to be able to visually identify pre-orders quickly
REFINING THE DESIGN:
Mockups:
Early design of the cart page allowed for some extra customisation moving forward. After the usability study was conducted, users highlighted that if there was more than one product on the cart page it would take too much time to scroll down and double check the items in the cart. I then redesigned the page to contain everything album preorder in a frame, with all the important information such as: type of album, price etc.
Designing the cart was crucial. Earlier in the design process, i aimed to make the album covers be the standout elements on the page to aid with the speed of checkout. However, during a usability study a user with a visual impairment pointed out how the colour contrast could have been better. I revised the design a decided that each album element will contain a colour from the album cover to aid with the checkout process for people with visual impairments as well as speed up the checkout process for users without it.
The second usability study revealed user frustration when trying to use the accessibility features and the add to cart button. They were not visible enough for some users. So i made it larger and changed the colour to white in order to give a better colour contrast so that visually impaired users can also see the buttons.
The add to cart button did not stand out enough and often it would take users a second or 2 longer to checkout, so to combat that i also changed the button colour so that it contrasts the rest of the page and it also highlights a level of consistency in the application as all buttons on the app are in white.
A couple users highlighted, that they not able to see the order summary at the end so they can be able to review the preorder after purchase. As a result of this I made the message box bigger and I added the order summary so it allows users to review purchase. This also offers a level of familiarity to the user.
High-Fidelity Prototype:
The final high-fidelity prototype presented a better user flow for users, a more consistent and equitable design and a fast checkout.
THE FINAL DESIGN:
TAKEAWAYS:
Impact:
Apollo focuses so need of pre-ordering music and inclusivity focusinng on user needs. Apollo aims to give every user an equitable experience when pre-ordering the album of their choice.
A quote from peer feedback: “The app made me feel included and its easy to use… I usually struggle to complete album pre-orders with ease, but this will allow to save a lot of time”
What I Learned:
I learned while designing the Apollo Album Pre-Order app, that the design and research processes are iterative processes, and the design will always have room for improvement.
THE NEXT STEPS:
Conduct another round of usability studies to see whether the user pain points have been effectively addressed.
Conduct more user research to determine any new areas / features of need (e.g. Album Scanner to allow users to scan album artwork and be directed to purchase page).