UpBeat

Enjoy rewards and special privileges at your favorite music venue, by attending your favorite music venue

What is Upbeat?

For this project, the task was to design a loyalty program mobile app for an iconic music venue. It was a great opportunity to experience all the phases of UX Design. As a lover of music and frequenter of music venues, I was excited to take on this project and learn what I could from it. Continue reading to hear more about the project, its challenges, and what I learned.

*NOTE/UPDATE, 12/2022: This project was originally completed in May of 2022, and I’ve learned a lot since then. Out of curiosity and interest, I decided to take what I’ve learned and give UpBeat an update. The results of the update can be seen at the bottom of this page: jump to update

It Starts With a Beat...

The Goal

As mentioned, the design prompt was simply to create a loyalty program app for an iconic music venue. This provided room for A LOT of creativity. The target audience was anyone that goes to music venues for concerts or dance events, or has an interest in doing so.

Roles

Research, results analysis, persona development, journey mapping, concept ideation, concept testing, wireframing, visual design, prototyping, user interface design.

Constraints

Because this was an independent project, it wasn’t easy to bounce ideas off other people or split up tasks such as research, competitive analysis, usability testing, etc. Also, there was flexibility with deadlines, but being able to invest a consistent amount of time into the project was challenging due to other competing demands.

Research Methodology

• 8 Interviews performed
• Age Range: 28-63
• Non-specific gender
• Various family situations
• Various professions
• All interviewees must attend – or have an interest in attending – music venues for concerts, shows, dance events, etc.
• Semi-structured, centered around music venue experiences, venue likes/dislikes, goals, pain points, and what interviewees would find helpful
• Partially remote, partially in person

Persona Development

Through the data collected during my initial research, I was able to develop the following personas. They contrast each other significantly, yet both fall within the target audience.

Ideation

From the research performed, it was found that many of the interviewees hated waiting in line to get into their favorite venue. Having a loyalty app that allowed them expedited entry via a “Fast Pass” is something they took significant interest in. Providing app users with special privileges was the foundation of UpBeat. UpBeat would also recommend upcoming shows to its users as well as show them who was attending a certain show or event.

*NOTE: The accumulation of points is assumed to be done through venue attendance and related purchases, but requires further exploration. The focus of this project was on points usage and basic app features.
Storyboard of how UpBeat is used
Concept sketches of UpBeat's Home Screen

Initial Wireframes

Early Usability Testing

Testing an early concept with the target audience proved the idea of UpBeat to be well-received. Users found the product to be desirable and stated that they would use it. They did, however, experience confusion when performing the task of redeeming points for a Fast Pass. There wasn’t a clear indication that something was “added to the cart,” so a confirmation screen was added to provide more clarity. Testing throughout the development of UpBeat continued to ensure that the design was on the right path.

UpBeat - High Fidelity

The Prototype

(developed in Figma)

Conclusion

Impact

Those that the app was tested with liked the concept, function, and design of the app. They believed that it served a useful purpose and that it was well-designed:

“I would totally use this, it would have been handy last weekend.”

What I Learned

• The importance of users knowing that their actions led to a result; make it clear that something was ‘added to the cart.’
• Be aware of implicit bias during all phases of the process.
• Bake in accessibility.

Further Detail and Documentation

Update, 12/2022

I’ve learned a lot since UpBeat’s completion in May of 2022. With the knowledge and wisdom I gained, I wanted to see how I could improve upon the original design. Continue reading to find out how this turned out.

Areas of Improvement

Visual Design

Through a variety of projects, various sources of inspiration, and more familiarization with common design tools, my visual design skills have significantly progressed. Using what I now know, I was able to give UpBeat a cleaner and more polished look. Color is used in a more balanced fashion, buttons are refined, and the app’s various components are more cohesive. Items like a splash screen and iPhone status bar were also added to provide more realism.

Communication

With improvements to visual design came improvements to general communication. UpBeat now provides the user with more useful information without making the screen more cluttered. The user is less likely to get lost or confused, and it takes fewer taps to answer questions they might have (when is the event? how many people are going? do I have enough points? etc.). Some of the verbiage was also updated to improve the perception of value, for example: “Fast Pass” was replaced with “VIP Entry.”

Simplicity

Spending time to further think about how UpBeat would be used and how similar apps are frequently used, it became clear that there were some unnecessary redundancies within the app. For example, a ‘Get Tickets’ button and screen didn’t make sense, because this could be done from the screen for a given event, and tickets aren’t the only redeemable reward. Additionally, using Figma’s overlay feature allowed for an overall reduction in screens for the main user flow.

UpBeat: Revised Mock-Ups

The Revised Prototype

A fresh prototype with a more simplified user floe