UX/UI Design | January, 2021

Safe & Sound

Drive-in Music Festival Experience

Concept Project | Case Study

My Role

User Research, Definition & Ideation, Wireframing, Prototyping, Figma Prototyping, Usability Testing, Coded Prototype

PartnerS

Danielle B., David L., Ricky L.: User Research, Definition & Ideation, Wireframing, Figma Prototyping, Usability Testing

Tools

HTML, CSS, JS, jQuery, VS Code, Github, Figma, Miro, After Effects, Photoshop

Timeframe

4 Weeks

Problem

Through interviews and online survey responses, we discovered that people are generally tired of COVID-19 restrictions and have exhausted all of their at-home entertainment options. While they are still very concerned about their health and safety during the pandemic, they would like to find a safe, engaging, smoothly run event where COVID safety measures won't prevent them from having a good time.

Solution

Create an app/website that provides information about a no-contact music festival while reassuring attendees that the event will be safe, efficient and entertaining so that those seeking excitement during the pandemic will be motivated to attend no-contact music festivals.

User Research

Our group started by creating the proto-persona of a 25-year-old party lover who was tired of COVID-19 restrictions (but still wanted to be safe and avoid getting sick) looking for a fun way to socialize and rock out.

We planned and conducted 6 interviews with users similar to our proto-persona with the objective to determine what motivates individuals to attend a no-contact music festival during the COVID pandemic. Users were asked about:

Safety concerns regarding COVID-19
Their current entertainment methods and if/how they changed due to the pandemic
What would motivate them to attend a no-contact music festival?
What their ideal no-contact music event would look like?

“I'd be most comfortable at a drive-thru / drive-in event with a great location, where I'm able to see and hear everything perfectly by staying in my car. I'd like other cars spaced out away from me with no people getting in and out.” - Juliana C.

We created an affinity diagram by tagging and categorizing interview question responses to learn more about our potential users. Their top responses are outlined below:

Frustrations

Very concerned about COVID death rate
Life had changed forever
Can't attend concerts, movies, in-person shopping/events
US is most severe situation in the world
Restricting mandates and limited contact with family/friends

Ideal Experience

Drive in / drive-thru / outdoor event
Stay in car and weak mask
Limited number of socially distanced tailgate parking areas
Require attendees to show proof of recent negative COVID test
Safety measures are strictly enforced

Ideation

After empathizing with our users and defining the problem, we set about coming up with solutions to help users find a fun, safe way to socialize and rock out during the pandemic.

Problem Statement:

How might we create an app/website that provides information about a no-contact music festival while reassuring attendees that the event will be safe, efficient and entertaining so that those seeking excitement during the pandemic will be motivated to attend no-contact festivals?

Feature Prioritization

Interview data was compiled into an Affinity Diagram and Empathy map. From these we created a feature prioritization matrix where we analyzed the major frustrations interviewees had with life during COVID-19 as well as what their ideal no-contact music event would look like.

Final features list:

360° view of the stage
Discount with negative COVID test
Designated socially distanced tailgate area to park car and watch show

Numbers on each parking area to be able to chat with other attendees
Sanitization stations

User Scenario

Storyboard:

Prototype / Wireframes

Style Guide

Our inspiration for the visual design was retro 80's/90's colors - reminiscent of the theme in the movie "Back to the Future". We felt this represented the electric energy of our music festival project quite well.

Wireframes - Lo-Fi

With a solid concept for our two user flows, we developed lo-fidelity wireframes in Figma. First, we created the chat flow below. From left to right the user is shown a map view of their parking space; clicking on another parking space shows them profiles for attendees in that space; clicking on an avatar shows more user details; here they can initiate a chat and finally choose a drink to send to them.

Concert Chat Flow

Next, we moved onto the food ordering user flow. The splash screen dissolves to show the user the main food screen where they can choose to order food, drinks, or check their order status. For the purposes of this prototype, we only built out the food choice.

Once food is selected, the user is show the food menu, they select their food items, confirm their order, then pay with the saved credit card they designated for use when buying tickets. A confirmation message informs them their order will arrive via drone within 15 minutes.

Food Order Flow

Coded Mobile Prototype

We tested the lo-fi wireframes and made a few adjustments based on feedback. Once we were happy with the flow, I began coding the mobile app.

I formatted the layout of the app to the size of the iPhone 11 - 414px by 896px - so the user would feel as if they were interacting with a real mobile app. For this reason, the app may look different when viewing on screens smaller than 1920x1080.

**Note: Optimized for 1920px x 1080px**

Click here to view the same user flows on our Figma mobile prototype.

Desktop Landing Page (Figma)

Usability Testing

5 Usability tests were conducted using a combination of the Concurrent Think Aloud (CTA) method and the Concurrent Prodding (CP) moderation method.

Goal

To determine how easily users could complete the 'Concert Chat user flow and 'Food order' user flow outlined in the wireframes above and built out in the coded prototype.

Assumptions:

Already purchased tickets and downloaded S&S app
Designated a saved credit card for purchases made at the festival
Uploaded a photo and completed the profile linked to their parking space

Constraints:

Users can only chat with attendees who have completed a profile and are online
Only two food items are available for purchase for now
Food and Drink item quantities can't actually be modified
Ticket, Settings, Drinks and Order Status screens have not been built out

Changes Based on Testing Feedback:

Testers stated it would help to see which users were online and available to chat.

Status icons were added - note the red icon indicates user is unavailable.

Testers stated the button on the user profile said "Send Food" but drinks were being sent.

Changed button text to "Send Food/Drink" - to clarify action to take.

Next STEPS

Possibly combining steps in food ordering process when selecting items and quantity
Section for sponsor companies to advertise to attendees
Add live news feed for users to post during the festival to initiate / promote socializing

- Previous Project -

Dictionary.com Redesign

- Next Project -

Sonder, Cultural Tourism
Mobile App