Beyond Broken Project overview

The product:

This is an e-commerce app intended to sell merch for the fictional punk band, Beyond Broken.

The problem:

Currently, the only way to score Beyond Broken merchandise is to physically be at a concert and purchase it from the booth.

The goal:

Make the merchandise available to Beyond Broken fans who can’t go to a concert via a digital app.

Project duration:

January 2022 – April 2022

My Role:

UX Designer

Responsibilities:

User Research, Wireframing, Prototyping

Understanding the User

For user research, I conducted two moderated remote usability studies with 5 participants each. We gave the users a task to complete and monitored how they attempted to complete them. Before the first one, I had assumed that everything should go fairly smoothly, but found a few friction points that needed sanding down in order to hit that sweet spot for usability.

Pain Points

Checkout is Difficult

We need to streamline checkout process and make it as simple as possible.

Trouble Finding Items

We need to categorize products in a way that makes more sense to the user.

Lack of Alt Payments

Apple Pay, as well as other popular alternative payment methods should be available.

Persona: Mandy

Problem statement:

Mandy is a busy mom and corporate drone who needs to order Beyond Broken vinyl so that she can share the vinyl music experience with her kids.

User journey map

Mapping Mandy’s user journey helped me narrow down where to focus my efforts to make the app as easy to use as possible.

Starting the design

I sketched out some wireframes to get an idea of some page layouts and elements that might work. A few ideas that started here made it into the final product.

Digital wireframes

The wireframes evolved over time, and updates were made based on user feedback. One major friction point for users was that they didn’t really connect with the original “creative” category names, so we dialed them back to something more clear and broadly understood.

Low-fidelity prototype

The low fidelity prototype formed the basis for the first usability study. It encompasses a basic flow through the entire shopping experience.

Go to Prototype

Usability Study

For this project, I ran two remote usability studies: one on the lo-fi prototype, and then one on the hi-fi prototype. This really helped confirm that the decisions made solved user issues, and gave insight on how to move forward in the future.

Study 1 Findings

• Users wanted a simpler checkout
• Users wanted alternate payments
• Users did not understand the categories

Study 2 Findings

• Two-step checkout was better
• Needed different color for interactive elements
• Needed a confirmation page

Refining the design

Armed with user feedback, I set off to apply that to the design and move into the hi-fi stage.

Applying User Feedback

Because orange was basically the only color being used for accents and interactive elements, users were often confused as to what was interactive or not. I opted to switch the interactive controls to use a blue color instead.

Mockups

Because this is intended to be a native app, the design was built with a screen width of 375px.

High-fidelity prototype

The final prototype has ironed out all the usability issues we encountered through testing.

Go to Prototype

Accessibility Considerations

All color combinations comply with WCAG AA or better for normal text.

Used icons to make navigation easier.

Animations for steps that progress the user through the process slide-in from the right, and animations for steps that are backwards in the process slide from the left. This creates an intuitive progression through the app.