ORB

A dedicated mobile app to share, like, request and purchase concert merch.

UX designer and researcher conducting research and designing an app for ORB from conception to delivery.

My Role

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Responsibilities

Target Audience

Fans of indie rock band ORB.

ORB logo


Background

ORB is an Indie Rock Band (previously XYZ) which has been gaining a diverse and dedicated following over the past few years. ORB wants to reward fans who enjoy taking part in the community with their unique merchandise, by giving them an easy and fun platform without the need for long lines and sold out items. The ORB app aims to provide an efficient way for fans to shop and receive rewards from the band itself.

Problem

Long lines at venues and an overwhelming amount options that are difficult to sort through in person, make it stressful for fans to find and purchase their favorite pieces of ORB’s merch.

User Research

To understand user pain points and needs, I conducted user interviews and prepared an empathy map. From this data, low-fidelity and high-fidelity prototypes were made and tested with an unmoderated usability study. The primary user group identified through research was younger adults who enjoy Indie Rock music. All users agreed that waiting in line and deciding on a purchase at a venue feels rushed and unsatisfactory, as per our previous assumptions.

While using the app, a majority of users pointed out that they felt uncomfortable entering or saving their credit card information in an app. Furthermore, users noted that they wanted a quick sign up process with easy to understand confirmation and security measures and the use of images or animation to guide them through the app processes or display information such as in filters. Overall, the main complaints can be summarized as the need for security, minimal text and quick payment options.

User Pain Points

1

Waiting in line at concert venues takes too long. Similarly, fans who do not decide on an item beforehand have to spend time trying to sort through the merch, leading to a rushed purchase, more likely to be regretted.

Time

2

There are too many items to look through at live venues, fans need a way to look through all of the items that may interest them.

Filters

3

Desired item may be sold out and fans are unable to reserve from the next stock or make decisions based on the available quantity since that information is not available to them.

Stock

4

Fans who have built a community or enjoy the music with their friends want to be able to commemorate the events and music with their friends by sharing the items that they like for a group purchase.

Sharing

User Journey Map

This user journey map follows high schooler persona William who wants to attend the ORB concert as a final celebration with his friends before college. Afterwards, they want to buy merch to remember the event.

Mapping William’s user journey revealed the importance of filtering and sharing features within the app. It was also noted that the connection to the band made the process more memorable.

  1. Designing a secure purchasing system that’s quick and reliable.

  2. Easy sharing with friends without the need to switch between screens or physically show screen.

  3. Fitting several key pieces of information /text heavy data from sizing, stock, reviews, availability, etc. within a minimalist design that doesn’t tire the user.

Key Challenges

Design an app for ORB that allows users to easily purchase their favorite merch and receive rewards from the band for their support and loyalty.

The Goal

Inital Designs

Paper wireframes of homepage, app navigation and product pages.

Several iterations were made of each screen in order to satisfy each customer pain point that was brought up during the user interviews. For the home screen, I prioritized a simple and minimal layout in order to allow users to easily fulfill the main task of the app — shopping.

Paper wireframes of homescreen designs.

Digital Wireframes

Moving on from paper to digital wireframes, I focused the designs on addressing the user pain points highlighted during user interviews.

This home screen design addresses three pain points; time, filters, and sharing.

Home screen with product images and descriptions listed in two columns.

Easy and secure payments was a pain point 80% of users agreed on. 60% of users also noted unease in saving credit card information in indie shopping apps. To address this point, I implemented biometrics and the option to connect to their mobile wallets into the app. Users that are already utilizing these features on their phone can use them to check out items without saving their information directly into the app.

Payment options screen with credit card and biometrics options.
Prototype screenshot

Low Fidelity Prototype

Upon completion of the digital wireframes, I prepared a low fidelity prototype of the entire user flow for the purposes of a usability study.

User Testing

Study Type

Unmoderated usability study

Location

United States, remote

Participants

5

Length

30-60 minutes

I conducted two rounds of usability studies. The first was done with a low-fidelity prototype and helped build the base for the mockup designs. The second study was conducted with the first iteration of the high-fidelity prototype.

Findings

  1. Sign up process takes too long and lacks confirmation.

  2. Images and animation are preferred on text heavy pages.

  3. Users prefer a quick and easy payment process without entering sensitive data directly into the app.

Round 1 Findings

Round 2 Findings

  1. Confirmation page is preferred after “place order“ page and before “thank you.“

  2. Change username/email options needed.

High Fidelity Designs

Early designs had the filters in a text based format. After the first usability study, I changed the design to display images more heavily so that users can easily navigate without reading and the use of text in minimized.

The second usability study revealed users wanted a confirmation page at the end of the purchasing process. I added a confirmation page after the payment processing page, users have the option to place their order or cancel and return to cart.

High Fidelity Prototype

App screens connected to form prototype.

The final high fidelity prototype addressed user feedback from the second round of usability testing. New account reset functions, a confirmation page as well as a cleaner user flow were implemented.

Design System

Accessibility Considerations

  1. The app is available in multiple languages to eliminate the language barrier.

  2. Icons are used throughout the app to make navigation easy to understand.

  3. High contrast colors and alt text are used to accommodate screen readers.

Impact

The ORB app allows users to easily order their favorite items from the band’s merch store and have tangible memories as well as rewards from the band. As a result, it allows users to feel connected with the band.

“I got a reward from the band? That’s really cool, I was not expecting that, it really makes me feel connected.“ -Anonymous user

What I Learned

While designing the ORB app, I learned about the impact and use of animations. During user interviews and usability studies, multiple users both directly and indirectly pointed out the need for animation. As a result, several iterations were made in order to put together an app that is easy to understand regardless of a user’s background.

Tools used: Figma, Photoshop, Procreate

Thank You!

Thank you for your interest in my work on this project. For more details or questions about the project or to get in touch regarding your own project, please feel free to contact me using the link below.