Totem

Totem is an augmented reality app that helps users locate lost friends in areas with large crowds such as music festivals.

 

Challenge

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?

My Role

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.

Solution

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 for the totem app

Concept art from early brainstorming sessions

cray_arrange.jpg

User Research

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.

 

Key Questions

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?

Key Insights

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.

User Personas

Persona 1_ Rave-Mom.jpg
Persona 2_ Wanderer.jpg

User Stories

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.

Competitive Analysis

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.

 

Ideation

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.

Sitemap

Low-Fidelity Wireframes

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.

Brand Identity

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.

 

Design System

Wireframe progression from sketch to mockup

High-Fidelity Mockups

Prototype

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.

 

User Testing

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.

Solution: A Notification Icon

I created a notification icon that would inform users if a nearby totem was out of frame. This notification will appear on either the left-side or right-side of the screen depending on which side the totem is closest to.

Problem #2: A Dead End

In order to edit a totem users had to navigate to the settings menu and tap on the "Edit Totem" option. According to heat map from the remote sessions, users expected to edit their totem by also tapping on the preview image of their totem. Although some participants expected tapping on preview image would lead to the desired path only the "Edit Totem" button allowed the user to access the customization menu.

Heat-map data from remote test sessions

Solution: A New Path

As result of the data gathered from the heat-maps, the preview image the user's totem was converted into an extra touchpoint to the totem customization menu in order to make the app more intuitive and better align interactions with the users mental model.

Retrospective

My main concern with this project was having to prototype AR features which are meant to enhance the physical space. Due to time and technical constraints I had to use the resources available and try my best to represent this feature. Fortunately, the prototype was considered easy to understand and use by the target audience. Users considered this app appealing both visually and conceptually.

If given more time, I would like to created an actual VR object to test in real-life circumstances. This sort of testing would provide better insight on how to refine the totem and make it more apparent and easier to spot.
I also would like to explore the intersection between advertising & augmented reality. For example, it could be possible to create virtual billboards that advertise upcoming music events. This virtual objects could be visible through the camera view and provide a way for the app to generate revenue.

Augmented Reality is still a new and interesting technology and I enjoyed finding ways in which this technology could add a greater level of depth and interactivtiy to the music festival space.

 

Thank you for reading!

Let's Talk!