Shop Feature - Apple Music App

Role: UX research and design, UI design.
Market and User Research, Data Analysis, UI/UX Design - wireframing, prototyping

Project Overview

As part of coursework for the Google UX Design Certificate, the prompt I initially selected for my coursework was ‘Design a concert merchandise app for your favorite band’ and although I had a laid out plan for this design, the results of my preliminary research led to a new prompt; 'Design a simple, non-intrusive ‘Shop’ feature for an existing music app where concert-goers or regular listeners can buy merchandise at their favorite concerts venues or at the coziest spot in their homes with minimal interruption to the music listening experience’

User Research: Opportunities

Concert Culture

In Lagos, Nigeria, the concert/fan culture is young and still evolving - whatever solution for buying merch will need to be easy to access

Artist-Fan Interaction

As fan culture is evolving, it is important to build extend already established interaction platforms

Too Many Apps

Most participants were not keen on having to download a new app just to purchase items a few times a year

Ease-Of-Use

The solution needs to be direct and simple.

a young african woman, smiling, with curly hair in a white blouse and brown blazer

'Tobiloba

33, MSc., Lagos Nigeria, Landscape Architect

Tobiloba is a landscape architect who needs a simple way to order experience-enhancing merchandise from her favorite bands and musicians because She is a fan and wants to support them as they grow.
Getting access to merchandise from her favourite bands is annoying as she has to visit their individual websites to do so.

a young african man, smiling, with low cut hair in a teal shirt and blue jacket

Chuma

29, BSc., Lagos Nigeria, TV Host

Chuma is very active in the Nigerian entertainment scene and frequently interacts with actors, musicians and other celebrities for work. He has a few favorite musicians but won't describe himself as a 'fan'. He would however like to show his support for and maintain good relationships with everyone he works with.
Getting access to merchandise means visiting different websites which can be time consuming.

Wireframes

I considered a total overhaul of the Apple Music design system and looked at a few options for layout and flow.
I decided to stick with the current system as it mirrored the desirable elements from my sketches.

Low Fidelity Prototype

User Research: Findings

2 unmoderated usability studies with recorded click paths, survey questions and usability scales were conducted and adjustments made to the design based on user insights.

The checkout process needs to be clearer

The app flow is not familiar to a number of users

Onboarding elements need to be added to help new users

Button states need to be indicated

Mockups

Working within the existing design system for Apple Music, I worked on creating an clean interface with internationally recognized icons, accessible color scheme and maintained the apps existing spacing.
The existing library formatting works well for the ‘Shop’ tab. I kept the graphic language consistent and easy to follow.
The ‘empty cart’ icon shows up only in the ‘Shop’ tab - via the artists’ profile, the ‘full cart’ icon only shows when an item is added.
As the system already has a the option to add bank cards for subscriptions, the Cart Summary page prompts to edit existing information. Quantities and varieties can be selected as well. The overlay is on the entire screen to keep focus on the summary page.

High Fidelity Prototype

User Research: Takeaways

Impact

The new design is much stronger visually and easier on the eyes while in use. The ‘Shop’ feature feels like it was always a part of the application and is something a lot of testers looked forward to seeing implemented.

What I Learned

Accessibility is easy to achieve if it is well considered at all stages of the design and research process. Small changes can have an impactful change and must not be overlooked in the big picture. Most importantly thorough research is vital to achieving a product that satisfies users.