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, Coding
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.
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)
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.

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:

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