A common pain-point in music festival environments is how difficult it is to locate friends amongst a sea of endless people. It can be near impossible to find friends if your group gets separated in-between sets at music festival. It is because of this context that I began my project by trying to solve the following problem:
How might we help users easily locate friends amongst a crowd of people?
I took on the role of UX Researcher and UX/UI Designer for this solo project. I was responsible for this project from concept to execution which included tasks such as user research, personas, competitive analysis, wireframes, mockups, brand identity, prototyping, and usability testing.
Totem is a mobile app that uses AR & GPS technology in order to help friends find each other by creating a virtual object that can be used as a beacon which stands out amongst the crowd. This virtual object can be assigned to friends and viewed through a cellphone camera lens.
- Dance Music NW
What is a festival totem?
"An object used as a beacon or group locator at EDM events – often times a meme, plush toy, or sign fixed to a pole."
My friends and I at EDC... Just a bunch of Boneheads! ☠️
Concept art from early brainstorming sessions
I knew I wanted to based my capstone project around music festivals and find ways of making these events a more pleasurable experience for people. I began my design process by conducting user research in order to identify a target audience and define their goals, needs, and frustrations. I interviewed 4 participants who frequently attended music festivals in order to understand their current experience.
1. Why do you go to music festivals?
2. How would you describe your taste in music?
3. Who do you typically go with?
4. What are some of the best and worst experiences you’ve had at festivals?
5. Do you have any traditions or rituals specifically around music festivals?
6. How do you prepare for an event?
1. Friends are the main component for a good festival experience.
The people you go with determine the atmosphere and tone of the night. Being surrounded by friends brings a level of comfort that aids in a good experience.
2. Feeling lost is the main cause of bad experiences.
The anxiety and fear that comes from being separated from your group can ruin a person’s festival experience. This a problem worth solving for. While some users are able to enjoy themselves on their own, most people are able to have more fun around people they already know.
3. Music festivals come alive at night.
Most music festivals come alive at night. This is why creating an app with a dark mode interface will help reduce eye strain in this environment.
4. Totems are viable solution.
A totem is an object used as a beacon or group locator at music events usually fixed onto a tall pole that sticks out above the crowd. Strong visual cues can aid a person in finding their friends. Participants regarded tall and bright objects as the best visual indicators when trying to identify their group from the crowd.
I surveyed 43 participants who have gone to music festivals.
1. As a user I want an on-boarding process in order to easily understand how to use Totem.
2. As a user I want to customize my Totem in order to be make it stand out and easy to distinguish.
3. As a user I want to edit my privacy preferences in order to choose who can and cannot locate me.
4. As a user I want to add friends in order to know their location.
5. As a user I want to use my camera in order to view totems that are around my area.
I began my competitive analysis by observing other apps in the music festival space in order to have a better understanding of what features and technologies have been used to enhance or improve these events. I observed apps pertaining to Coachella and Insomniac since they are two of the biggest festivals in the nation. I also decided to analyze Snapchat (an AR-based app) and Find My iPhone (a location-based app) in order to understand how other competitors have implemented and introduced these technologies.
I started mapping out the actions and tasks a user would need to take in order to successfully complete each user story. These sketches helped me develop a clear understanding of the user’s journey throughout the app. I starting sketching the journey from the apps first launch and all the way up to the user finally exiting the app. After exploring a variety of paths and actions my turned sketches developed into carefully-planned user flows.
I began sketching wireframes to better visualize the layout, content, and functionality of each screen in the mobile app. After a few iterations of the crazy 8's exercise I was able to find ways in which users could complete each necessary task in as few screens as possible. These sketches became the blueprint for my low-fidelity wireframes.
The color orange became the primary color because of its matching associations with music festivals such as energy, optimism, and friendship. The remaining color palette mainly consisted of many shades of grey in order to create dark-mode UI theme. The decision for a dark mode UI was made because music festivals reach their peak involvement around night. Therefore, a dark UI would cause less eye-strain on users when using the app in that environment. Augmented Reality is considered a futuristic and innovative technology and the typeface for this app had to matched those same qualities. It's for this reason I chose the typeface monsterrat because the sharp and geometric appearance gave off a similar futuristic quality.
Wireframe progression from sketch to mockup
At this stage in the design process I had converted my wireframes into high-fidelity mockups which became the building blocks of my testable prototype. One of the biggest challenges I encountered with prototyping was figuring out how to simulate the camera view features. Due to technical constraints I had to rely on photographs instead of a live camera view. I created a 3D object that was meant to represent a virtual totem. I overlaid this 3D object on photographs of concert crowds in order to illustrate how virtual totems could enhance the physical world.
44 participants took part in usability testing which consisted of 3 in-person and moderated sessions as well as 41 remote and unmoderated sessions. My usability test had 5 tasks focused on the 5 user stories. Aside from testing the usability of my prototype, I also wanted to know if users understood the purpose of this app. In on order to figure this out I had users complete the on-boarding process and then asked them if they knew what they thought the app was about. After the test was completed I asked users if there was anything they found confusing. Thankfully, the on-boarding process did provide enough context for users to understand the purpose of the app. Instead, the main issues uncovered during my test sessions were problems with the interface and accessibility of the app.
3 Participants (In-Person & Moderated Test Sessions)
41 Participants (Remote & Unmoderated Test Sessions)
Remote Usability Test Results
Feedback & Revisions
Problem #1: “How would I know if a nearby totem is out of view?”
During one of my moderated test sessions a participant asked me if there was a way to know if a totem is nearby and just out of frame. I had not considered this situation and soon realized this sort of notification was needed to prevent users from aimlessly searching their surrounding area. A notification can provide better guidance and reduce the amount of time spent searching for friends.
Totem is out of view in the situation above with no notification given to the user.