A UI/UX Case Study
It’s that time of the year again. As the Coachella weekend approaches, people are constantly talking about the artists who are headlining, celebrities are posting Instagram stories on the outfits that they are going to wear, and your friends are busy planning the trip to the festival. Attending a large scale music festival such as Coachella can be a fun experience, but navigating around the huge venue space and meeting up with friends is often a hassle and a frustrating process. When there are several artists performing in Coachella, things can get a little hectic when you don’t plan things ahead.
The Project
Our Team:
Chloe and I identified Coachella as our organization of interest. We wanted to look into this festival, specifically focusing on the mobile app features. Chloe and I both contributed to the ideation and research for the redesigned mobile app. We both conducted user interviews and synthesized research findings, and made wireframes for the two pain points that we identified. We each focused on one pain point, and created high-fidelity prototypes for the mobile app in Adobe XD.
The Problem:
In a music festival, there are often different performing areas in the venue, which makes it hard to meet up with friends in such a big venue. More than 100,000 people attend Coachella each year, and the signal service is usually weak inside the venue, making it even harder to get the full experience if you don’t plan ahead. The interactive maps in the Coachella mobile app present the users with a lot of information, but it is difficult to navigate and distinguish different locations from each other, making it hard for users to find exactly what they are looking for in a short amount of time.
The Research
C&C Analysis:
We looked at similar large-scale music festivals and concert promoter apps to find what worked for some of these festival mobile apps, and what each of these apps could improve on. We looked at Insomniac and Camp Flog Gnaw, and focused on the navigation, content, and features of each mobile app. Here are our main takeaways:
Insomniac map has the feature to search for a specific icon, making the information presented to the users less overwhelming
Having vertical lineup schedules makes it easier to read
Both Insomniac and Camp Flog Gnaw have the feature to build and share the user’s own custom lineup schedule
Icons are very detailed, making it hard to locate on the maps
Current Application Design:
Although users can interact with the map and zoom in and click on icons to learn more about each icon, the way this feature is designed makes it hard to distinguish each icon from one another. Furthermore, since there are so many icons in one place at once, they cover up the maps, so the users are forced to zoom in and try to find the exact amenity that they’re looking for. (Warning: if you have a fear of clustered objects, this image above may not be safe for viewing). When the user clicks on one icon, a simple information page shows up. However, the current design doesn’t provide much helpful information as the headings are not aligned and the descriptions are not evenly spaced out. The current app design also provides a feature that allows the users to “favorite” the artists that they want to listen to (as pictured below). These artists will be added to a “Favorites” list, and the user can view the list on the sidebar.
Interviews Insights:
We conducted user interviews to gain more insight on what people thought about the current Coachella mobile app design. The users interview were very helpful, and allowed us to see how people navigated through the application, making it easy for us to spot the pain points and identify the different features in which they were struggling with. This also helped us determine user needs and what users are really looking for in the app. Here are the takeaways from the user interviews:
Map icons are too cluttered and makes it hard to navigate even if it’s interactive
There are a lot of maps; very informative but also overwhelming at the same time
Navigation bar headings don’t really make sense
The schedule page list is very dense
Users want to be able to make a customized schedule
What matters most to the users: customized lineup/schedule and a clear, informative map
The Solution
After synthesizing all the research that we’ve done, Chloe and I came up with a user scenario and problem statement that we want to address in this project.
“Concert-goers are presented with more than 100 performing artists when they attend Coachella. Ashley is overwhelmed with the information available on the festival mobile app.
How might we help her navigate through the app and decide on a feasible plan/schedule beforehand?”
Hence, the solution for our project is to:
color code icons on the map so that it’s easier to distinguish between each icons
minimize complexity with icons on the map
have a feature to customize the user’s schedule based on artists that they can locate and add to a Favorites page
I focused on redesigning the map feature, and Chloe took on the personalized schedule feature.
The Design
User Flow:
The current user flow for the mobile app is pretty simple. However, what needed improvement was mainly the navigation and context issues. Because there’s so much presented to the user at once, it’s unclear for the user what the next step is. For the map feature, we added a two new functions: the application can track and locate the current location of the user, and the user can choose to “favorite” icons and add it to a personalized list. For the personalized schedule feature, we added a new function to view the user’s customized schedule. They can then go from that to view a planned route of their favorite artists.
Wireframes:
Chloe and I brainstormed ideas on how to best visualize these complex information into simple and straightforward designs. For my first wireframe, I wanted to have a preview of what each icon is on the maps, so that it’s easier for the viewers to find what they’re looking for. I also created a vertical icon sidebar that is color coded so that the user can browse through the icons on the side, which is less clustered than browsing through the map.
After making more revisions we had a usability testing session with some peers. From there, we gained a lot of helpful feedback that we incorporated into our final designs. Here are the main takeaways from the usability tests for the map feature:
locations icons are still hard to read even if they are color coded because it’s still in a cluster
users couldn’t understand some of the icons because it was too abstract and did not have a headline below the icons
icons make the design simple, but the vertical icon bar takes longer for the user to find exactly what they need
Final Prototype:
For the final prototype, I took in the feedback I received from the usability tests and decided to simplify the design of the icon. Instead of using the traditional locate icon, I decided to change the shape into a dot. The locate button tells the users exactly where they are, and I purposely added a white drop shadow to the dots so that they would stand out more on the map. This abstraction makes it easier for the users to locate the icons. Although not shown in the prototype, all the icons are color coded and have different colors depending on which category they fall into. I also created card decks that displayed a preview of what the icons are. I felt that having a photo or some sort of visual would make the entire experience more engaging and gives the user a better sense of what they can expect from the location selected. I also redesigned the information page for each icon and rearranged the sections so that the user can easily browse through the photo gallery, clearly see the ratings and descriptions, and rate the place if they want to.
Chloe’s final design also incorporated color coded icons, and the customized schedule also shows the route that the user can take by plotting the steps onto the map.
Next Steps:
There is always room for improvement, and I would definitely want to redesign other explore and navigation tabs on the Coachella app. I would also want to make an interactive prototype for the map to make it easier for people to visualize the design and idea. This would require either AfterEffects or mapping program. In the future, we would also like to work with developers to create a functional prototype that can accurately plot out the user’s customized schedule. It was challenging to visualize complex information and turn them into beautiful yet minimal designs that encourages the user to user the mobile app. If Coachella introduces these new features, more people would want to go to the festivals and use the mobile app to discover more activities to do at Coachella.
Comentarios