top of page

Case study:
viva concert app design

Screen Shot 2021-12-30 at 5.49.22 PM.png
Screen Shot 2021-12-07 at 2.56.22 PM.png
Screen Shot 2021-12-07 at 2.52.20 PM.png

Project Overview

The problem:

Busy individuals lack the time to go to the box office to purchase concert tickets.

The goal:

Design an app to allow users to easily purchase concert tickets virtually.

The product:


Viva Concerts is a nationwide app to purchase concert tickets without service fees or order processing fees. Concerts are available virtually and in-person. You will be buying directly from the creators, transfer easily to your friends, and sell transparently to other fans.

Project Duration:

April 2021- April 2022

My role:

 

UX Designer designing an app for Viva Concerts from conception to reality

Responsibilities:

 

Conducting interview, paper and digital

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

understanding the user

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to go to the box office to purchase concert tickets.

This user group confirmed initial assumptions about Viva Concert customers, but research also revealed that time was not the only factor limiting users from purchasing concert tickets anywhere. Other user problems included obligations, interests, or challenges that make it difficult to get concert tickets in-person.

user pain points

1. Time

Working adults are too busy to purchase concert tickets in person

2. Accessibility

Platforms for purchasing concert tickets are not equipped with assistive technologies

3. IA

Lack of color and small font are often difficult to read and select from

Persona & problem statement
Screen Shot 2021-12-07 at 12.40.32 PM.png
user journey map

Persona: vivian Whittaker
goal: An effortless way to purchase concert tickets on mobile application

Screen Shot 2021-12-07 at 12.43.24 PM.png
Starting the design

paper wireframes

Taking the time to draft iterations of each screen of the app n paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy selection process to help users save time.

Screen Shot 2021-12-07 at 12.50.43 PM.png

digital wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Our home page provides users an easy way to find the items they are looking for.

Screen Shot 2021-12-07 at 12.58.32 PM.png

digital wireframes

We wanted the receipt to be clean and only show necessary information.

Screen Shot 2021-12-07 at 1.00.12 PM.png

Usability Study Findings

I conducted two rounds of usability studies Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 findings

  1. Users want confirmation of purchase

  2. Users want color and large font

  3. Users want an easy way to search for concerts

Round 2 findings

  1. Users want an easier way to checkout

Refining the design

Mockups

Early designs allowed for some customization, but after the usability studies, I revised the design so users see all the options when they first land on the screen. This way, users don’t have to go back and forth on the screen to select a concert. The location and the Month are clickable so that the user can select their choice.

before usability study

Screen Shot 2021-12-07 at 2.32.45 PM.png

after usability study

Screen Shot 2021-12-07 at 2.30.35 PM.png

Mockups

before usability study 2

after usability study 2

The second usability study revealed frustration with the checkout flow. To streamline this flow, I consolidated the checkout and payment details in one page.

Screen Shot 2021-12-07 at 2.39.02 PM.png
Screen Shot 2021-12-07 at 2.40.37 PM.png

Accessibility considerations

1. Provided access to users who are vision impaired through adding large text to images for screen readers.

2. Used icons to help make navigation easier.

3. Used specific images of artists to help users find their favorite artist.

Refined designs

Screen Shot 2021-12-07 at 2.30.35 PM.png
Screen Shot 2021-12-07 at 2.52.20 PM.png
Screen Shot 2021-12-07 at 2.40.37 PM.png
Screen Shot 2021-12-07 at 2.56.22 PM.png

high-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for purchasing a concert ticket and checkout.

Screen Shot 2021-12-07 at 3.02.35 PM.png

Going forward

Takeaways

Impact: 

The app makes users feel like Viva Concerts really thinks about how to meet their needs.

 

One quote from peer feedback:

“The app is very easy to navigate with images and color. I would definitely use and recommend this app to others.”

What I learned:

While designing the Viva Concerts app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

next steps

1. Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

2. Conduct more user research to address any new areas of need.

bottom of page