2019 Gold ADDY Award: UX/UI Design

Translucence is the ultimate concept festival
for contemporary R&B and Hip Hop lovers

Objective
The goal of the project was to create an app for a festival genre of our choosing. This could be an existing festival or a new festival concept.
I created a music festival called Translucence and collaborated on a
research team to bring its brand and digital experience to life.
Overview
Time: Fall 2018
Duration:  7 weeks
Skills: UX/UI, Research, Persona Development, Prototyping, User Testing, Motion, Design Systems, High Fidelity Visual Design
Tools:  Sketch, InVision Studio, Illustrator
Prior to receiving this prompt, I had never created an app from beginning to end. I wanted
to explore the entire process of UX design starting from research to the final deliverables, which led me to create Translucence. The name came from the idea that Hip Hop/R&B music this genres growing in its diversity and influences, it remains connected through its unique and open way of storytelling.
Intention
After choosing this topic, we formed a research group based off of our festival genres. Together we created attendee and organizer questions, survey questions, and poll questions to help our research process in creating this app. Since we were building this app from the ground up, we didn’t have access to data or research that already existed. It was important to identify problems that users experience through interviews, surveying, and releasing a poll question. This unique process allowed us to be open to a diverse group of users with different stories to tell. Below are a few questions we generated to collect insight of who our users are and their needs, concerns, and frustrations. These questions also helped us understand what was working in other music festival apps, and what was not working.
Research
Team:
Sierra Barton
Sydney Haddon
Tam Hoang
Mariah Knepp
Kelly Tetrault
By using three different methods to conduct our research, we were able to gain insight on common problems that our users face and identify themes within our results. While most of our responses were centered around things we could control within an app —at a glance— such as being lost and not knowing when an artist is performing, other problems that our survey group faced were lack of cell phone service, crowded areas, and dirty facilities. We kept in mind the range of behaviors, habits, and personalities of our users. We also considered the language and tone of their responses. Below are notable responses from our survey, interviews, and polls.
Responses
We collected these responses for one week and then created an affinity diagram to help organize our users' overall thoughts, frustrations, and concerns while attending music festivals. We wrote down all of our users’ responses, sorted them by themes, and analyzed overarching issues that were revealed. We found that the most common problems in our user group were…
Findings + Analysis
After identifying the key problems, we brainstormed potential design features we wanted to implement in our app to best adhere to our users’ needs. We chose two features to focus on to solve our user group’s most prominent problems.

Map Feature:

• Shows locations of nearby bathrooms, food & drink, stage locations, and charging stations
• Allows you to find your friends in real time and get directions
• Shows information on food options, prices, and wait times

Line Up  Feature:

• Clearly provides the list of artists and their performance date, time, and location
• Notifies you when artists are about to go on stage
• Shows artist biographies and their top songs

Using the information from our research, we created three personas to represent our user groups most common problems and concerns. Meaghan, Patrick, and Jeff reflect the diversity of our audience, while acting as a guide throughout the design process.
User Needs
With our research results and personas in mind, we began the sketching process. We wanted to really focus on the map and line up feature, as we found from our survey that those were the two main areas of our user group’s problems. I personally explored two ways to use the map feature, one by typing in to search, and the other by using the filter button. The line up feature flow was developed by my team members. During this process, it was important to consider the structure of an easy-to-use yet information-filled map feature that flowed well for the user. We used these sketches to create a low-fidelity prototype for usability testing.

For our usability testing, we created the prototype in the POP Marvel app. We observed and recorded each tester going through the line up and map flows.  We asked each tester to complete the following tasks:

1) Find your friend Kelly and get directions to her
2) Find an artist’s bio

Key Observations

• For the “Map” flow, all the testers used the search bar as their method of finding Kelly, even though there was also a filter option that they could use

• For the “Line Up” flow,  all the testers did not know which tab in the nav bar to use to find the artist bio. Many of them were deciding between the “Playlist,” “More,” and “Line Up” tabs
Prototyping +
Usability Testing
After completing the user research process as a group, we split off individually to create our own unique visual interfaces for the app.

To begin my design process, I created a mood board inspired by recent Hip Hop/R&B album art. I was drawn to large, bold text and vibrant pops of color. I knew that I wanted my interface to have a dark look, yet feel energetic. Then I picked a location, date, name, and curated a list of performers for the festival. Although the festival is fictitious, I wanted to create an experience for the users that felt as authentic as possible.  
Visual Design
Name: Translucence
Date:
June 21-23
Location:  
Baltimore, Maryland
The variety of gradients are used as a visual indicator for the stages, with each stage corresponding to a different gradient. This palette is repeated and used the same way on every screen (except for the “Map” flow) to help users associate the each artist with their performance location. For the “Map” flow, the palette is used to identify various points of interest and friends. Because the association here is different, the filter bar was included as a key to these interests. The diverse typography creates a visual hierarchy to draw users to information that they would find most important, according to our research. The touch of yellow throughout the app, though represented in smaller ways, points out areas that were deemed as second most important. Because there are a wide range of styles represented, I decided to keep the icons simple.

Taking the research results, user test findings, personas and overall visual styles, I designed a visually cohesive structure that would best adhere to our users’ most prominent needs, which primarily revolved around the “Schedule” and “Map” features. Our research also showed that these two features were used the most by people who went to a musical festival that had an app, and were also areas where they found to be most problematic. While I primarily focused on these features, I also wanted touch on other areas of frustration as well by exploring how the “Music” and “Profile” flows would function.

To help keep the focus on the user, I pulled direct quotes from our research that were representative of the most common problems and requests. I also kept in mind our personas, Meaghan, Jeff, and Patrick, and their specific needs as well. 
User Interface
Design

Schedule

1. “Not having easy access to the lineup.”

This secondary navigation bar allows users to see all the days that the festival is occurring without needing to scroll or tap into a drop down menu. The blue underline and bright white indicates an active state, where users can see the lineup, artists’ performance location, and add them to their personalized schedule all on the same screen.  This helps the user focus on the lineup happening that day, while allowing them to easily explore other lineups occurring on other days by simply swiping.


2. “Not knowing about certain announcements like weather, set time changes, etc.”

The notification bell at the top right corner allows users to see all alerts. The purple circle indicates an unread notification, so the user know whether the alert has been read or not.  This icon stays consistent throughout the app (except for the “Map” flow) giving the user easy access to important or last minute updates.


3. “Not knowing the location, or time performing of artists is frustrating.”

This interactive tile and stack view is laid out in order of time, from earliest to latest. The photo of the artists paired with the outline text of their name allows the user to immediately recognize each artist as they are scrolling through the lineup. Users can also see the location and time artists without needing to navigate to another screen, and add artists to their personalized schedule by tapping the plus icon. The gradients are used as an overlay to correspond to the gradients of each stage.  This tab is integrated as a “Home” screen, meaning that every time the app is opened, this screen will be the first thing that users land on.


4. “I would like to see descriptions of all the artists as well as previews to their most popular songs. There are a lot of artists at festivals, and it would be nice to have somewhere to learn more about each of them.”

To get to this modal, users can tap on an artist listed in the lineup from the “Schedule” tab.  The photo, gradient, and type treatment remain consistent from each of the artists’ tiles to show that the modal is an expansion. While it shows the same content from the tile, it also displays additional information such as a short biography and a list of their top songs.  From here, users can star their favorite songs to add to their personal playlist, and also add the artist to their personal schedule. This screen allows users to quickly discover and familiarize themselves with unknown artists.

Map

1. “The maps not being interactive was annoying. Like it would be different if I knew where I was but since it doesn't tell you ‘you are here’ it’s hard to tell where to go.”

This interactive map enables users to see gradient-coordinated points of interest nearby. Users have the option to type to search something they want to specifically find, or use the “filter” icon beside the search bar to add or subtract indicators on their map. The applied filters are shown below the search bar, and can be easily removed. The “location marker” icon is outlined in yellow and shows the user where they are currently standing and moves as the user moves. This map allows users to personalize what they want to see and interact with things they are interested in. This customization eliminates unnecessary points and allows the user focus on what their current needs are. All the icons are tappable and can be viewed in detail.


2. “A way to find my friends. I’ve gotten lost so many times at a festival and it sucks.”

This interactive map feature allows you to share your location with your friends and view where your friends are in relationship to other points of interest. The distinct icon helps “Friends” stand out amongst others because it is the only icon that tracks movement, as opposed to being static.


3. “I want to know wait times for water stations, food prices, food options—since I’m a vegetarian”

The detail view of this “Food” point of interest allows users to see the dietary options, distance from current location, food type, price range, and wait time.  From here, users can either get “Directions” to somewhere or “Order Now.”  By giving users current information, they are able to plan around their schedule and be efficient with their time. Users no longer have to choose between seeing their favorite artist perform and standing in line for food.  


4. “It’s hard to get from place to place when festivals are large and there are so many people.”

We found that most of our users were frustrated by how crowded festivals were and difficult it was to get from one place to the next. The implementation of the “Directions” function in this detail view helps users focus on getting to their desired destination without distraction and eliminates the inability to find people or points. Users are able to get to this detail view by simply tapping on an icon from the interactive map.

Music

1. “I still don’t know all the songs that I want to know. I want to get the most out of my money so I wish I had an easily accessible festival playlist to get me hyped."

The Musictab provides a place for users to explore songs and artists and star their favorites. Here, the gradient overlay is used again to help users associate the artist with their performance location. This tab features “Albums” and “Top Songs” to help users stay current with songs that artists are projected to perform at the festival.  This specific selection eases the process of filing through millions of unrelated songs, artists, and albums on other platforms. Because this feature consists of only songs from artists performing at the festival, users can feel prepared for set lists while discovering new music. For a more personalized music selection, users can star their favorite songs to create their own playlists.

Profile

1. “I liked having a the ability to personalize my schedule. I’m really organized and it was a good way to help me plan out who I wanted to see and when”

The “Profile” tab consists of a user’s personalized schedule, favorited songs, and friends they’ve shared locations with. During our research process, we found that an overwhelming amount of people who have used music festival apps before found the ability to personalize their schedule to be incredibly helpful to their experience. On this screen, users are able to see artists they’ve added to their personal schedule. To keep the styles consistent, I applied a similar tile treatment from the “Schedule” tab to help users associate the interactions together.  I replaced the “plus” icon on the right of the tiles to a “minus” to allow users to have the option to remove an artist from their schedule.

During the high-fidelity design process, it was important to consider how the user would interact with each flow and the role animation would play in the app. Rather than prototyping static screens, I decided to challenge myself to think about how specific interactions and animations would work together to impact the overall user experience in a positive way.
Interactions + Animations
Swipe between dates to view the lineup each day and location and time of each artist that is performing. Tap the "plus" icon to add to your personal schedule. Tap on tile to view an artist's biography and listen to their top songs. Star your favorites to add to your personal playlist
and listen.
Schedule
Map:
Use the map to locate areas of the festival, connect with your friends, and search for things near you.

Music:
Explore playlists and new artists. Star your favorite songs to add to your personal playlist and listen to them in app.

Profile:
View your personal schedule, playlist, and friends you've connected with. Remove artists from your personal schedule by tapping the "minus" icon.

Map, Music + Profile
Before this project, I had been in my graphic design major for two years and was primarily learning print and branding. I was excited and felt ready to dive into my first in-class UX/UI design project. I was interested in learning more about the entire process of creating an app, and how I could apply my visual design skills digitally. This project also allowed me to take a different approach to research than my normal process, which strengthened my knowledge of design thinking and understanding of human factors.

Some things I learned along the way:


I learned that it is essential to take note of all the pain points that appear through research, even if it may seem unrelated to design at first. It is important to consider all kinds of problems such as, “it was really dusty and I couldn’t breathe well,” helped me focus on the human factor and  understand the range of behaviors, habits, and personalities I was designing for. It gave me clarity on how to approach my design, and why I chose to design things the way I did.

Although animation wasn’t required for this project, I found that considering how a user interacts with a product is crucial to designing an experience. While this was my first in-class experience design project, I wanted to push myself to expand my prototyping skills. Envisioning when and where specific components would animate helped me formulate solutions to our user group’s problems. I was motivated to bring these animations to life through InVision Studio. This mindset helped me bring ideas from conception to completion.
What I Learned
1. A more refined usability testing process

Though there were no major changes needed to be made to our flows in the end, I wonder if my final design would have changed if we tested multiple different flows. Would testers have a preference as to which flow they like best and why? Since the testers did not have anything to compare the individual flows to, the insight and observations we gained from our usability testing came from the one flow we created for each feature. We also chose to go with paper prototyping, which made a few components difficult for testers to understand since the sketches were hand written and hand drawn.  I also wonder if my final design would have changed if I transferred my sketches digitally, and if it would impact how the testers interacted with the prototype.

2. Feedback

I would love to test my final design on the same group of people that contributed to my team’s research. I am curious to see how this app could improve a user’s festival experience and how other music festival apps gathered research for their design decisions.
Next Steps