Insomniac redesign casestudyInsomniac redesign casestudy

Insomniac Redesign

Redesign project to increase value and elevate in-app experiences for Insomniac's music festival attendees.

Role

UX/UI Designer

Timeline

Two months
Summer 2024

Scope

UX/UI Design
UX Research
‍Figma
Sketch
the process
The process: project background, UX research, brainstorm and wireframe, prototyping
✦ 01. project background
PRODUCT BACKGROUND

Who Is Insomniac?

Insomniac is one of the leading electronic dance music promoters, being the organizers of notable record labels, clubs, and festivals across the US. With the growth of their productions exceeding 500+ events a year, inevitably comes the creation of the Insomniac app. Rather than scrolling endlessly through Insomniac’s social media platforms to find important event details, this app greatly helped their customers find relevant information to events they’re attending–including set times, parking, and festival maps.
PROBLEM CONTEXT

Planning For A Music Festival

When attending a music festival, especially those that are 2 or 3 days long, planning a trip can already be overwhelming from booking accommodations, transportation, and scheduling. When it comes to planning a setlist of artists you want to see with friends, a lot of compromise and coordination is involved due to differing music tastes between friends or time conflicts. Insomniac’s app does have basic functionality to filter and share your own setlist, but in this project I wanted to investigate how I can further expand on their product through my own experiences as a regular attendee of their events.
Disclaimer: The ideas in this case study are purely my own, and is a personal project and learning experience on a product I frequently use. I am in no way affiliated with Insomniac.
PROBLEM STATEMENT
How might we personalize and add value to Insomniac's app so music festival attendees can utilize and engage more with in-app content and features?
✦ 02. UX RESEARCH
USER RESEARCH

Researching My Assumptions

Before brainstorming UI designs, I conducted interviews with other users of the Insomniac app to first see if my struggles were validated by others, and second to learn about their own personal experiences with the app.

Making a Setlist

3 of 4  interviewees expressed difficulty creating and sharing a setlist with their friends.
Users are limited to clicking a heart icon next to the artist they would like to see. There's no filtering options (default alphabetical order and time), and no advanced features to plan with friends either–they usually screenshot their setlists and message off the app.
✦ what i heard
“I wish there was advanced sorting. Sorting by my favorite genre would make the process go a lot faster.”
“It’s becoming really old to have to screenshot and text my lists. Depending on the length of the festival, one of my lists can get to 3-5 screenshots long…

App Layout

🤷 2 of 4 interviewees state that the app layout feels more like an information dump and doesn't support their needs.
The layout of the app isn’t very intuitive or user friendly. Users can’t access the relevant information that they need quickly, and instead just see advertisements for other events first. 
✦ what i heard
"The app just feels like an information dump."
"It logs me out randomly, so I can’t tell if I’m logged in just by looking at the screen."
"When I need to see my setlist when I'm actually at the festival, it takes so many clicks to get there and I make a lot of errors since I'm moving so fast."
There's an opportunity here for Insomniac to shift their primary focus from just promoting their events, and balance it with a layout that is tailored to what their customers actually need.

Development

🛜 3 of 4 interviewees noted that the app does not load when they’re actually at a festival.
This is more of a development issue than UX, but I thought it would still be good to note. Users are frustrated at the inability to use the app when it matters the most. Perhaps the development team can look into implementing offline downloads to solve the issue. 
✦ what i heard
“The app never loads when I’m actually there. Cell service is nonexistent when there’s 50,000+ people.
“I can never check my app because it requires at least 3G and the events take place in areas where there’s little to no reception.
project goals

Goals Guiding My Redesign

As I worked on this redesign, I made sure to focus on these three main goals derived from my research findings and from my own experiences and struggles as a regular user of their app.

01.

Planning

Make it easier to plan and share a setlist with friends

02.

Personalized

Make the app experience more tailored and personalized to user needs

03.

Human-Centered

Make it feel familiar to products users already know and love
current app ui

To Help Paint The Picture...

Here are some screens of what the current app looks like as of Summer 2024, and the issues that my research has highlighted.
NAVIGATION
Current screens of the app: navigation
Main Insights - Having two icons that open two different navigation menus can be reduced into one to reduce confusion and number of clicks needed to get to saved setlists. Information and ads could be presented in a cleaner UI.
Creating & sharing a Setlist
Current screens of the app: sharing a setlist
Main Insights - Insomniac's current setlist sharing is very limited in the fact that it's not collaborative. If a user wants to accept their friend's shared list into their own, the user must accept ALL artists, whether they like all artists or not. The conjoined list also does not differentiate who added what artist.
✦ 03. brainstorm & Wireframe
DESIGN DECISION

Brainstorming From A Business Standpoint

When it comes to brainstorming how I would redesign the entire process of a collaborative setlist feature, an initial idea I had was being able to have in-app chat messaging to discuss their setlists. But I had to take a step back and think about it from a technical and business standpoint. Realistically, creating a function like that requires real-time databases and servers to send and receive messages instantaneously, which costs a lot of resources that the business may not decide to invest in. From a user standpoint, I can also see people opt out of using the chat system entirely just because they already have established group chats over text, so why chat on another app?

So I looked to Spotify Jam and Elfster, two very unexpected services that I drew inspiration from! Both services allow users to send their friends a unique link to join their jam session or gift exchange. Elfster goes one step further to support sending invites to friends in-app and archives old gift exchange onto the user’s profile.

Setting up my design using this type of back-end technology is more plausible from a business and consumer standpoint. Insomniac already has an existing infrastructure and framework to implement link sharing, and it’s sure to be utilized more by users, compared to in-app messaging.
UX FLOWS

What Will This Look Like?

With this new plan, I mapped a UX journey flow that depicts a scenario where a user creates a setlist of artists they want to see and shares it with their friends to coordinate their plans.
UX journey flow map of sharing a setlist scenario
Scenario: Aaron and his friends are going to EDC Orlando together. The lineup and set times have been released, so they need to create a list of artists they will be seeing that weekend. He uses the Insomniac app to create his setlist to share with his friends.
The app’s sole purpose for the past 5 years has been to provide information, and that’s reflective of the home page—it’s an overwhelmingly long list of upcoming events. Insomniac has been trying to add more personalized touches, like Collectibles (digital pins that can be collected at an event) and Wristbands (a gallery collection of past event wristbands), but despite their efforts, I found that none of my interviewees have used it or find it enticing.

So with that being said—following the 2nd and 3rd goal of my redesign—I will also be designing completely new pages to make the UI more personalized and user-centered. By formatting some elements that are similar to other social media apps that people already know and love, my hope is to 1) improve the app so it's easier to operate when users are actually at the festival and 2) compel users to enjoy the cool features that Insomniac has already worked hard to implement. 
LO-FI SKETCHES

Paper Brain Dump

Taking inspiration from popular and familiar social media apps, I crafted an engaging profile page that showcases a user's digital collectibles and wristbands, friend lists, and cover photos. I also utilized standard UI elements like a bottom navigation bar to replace the current side-peeking menus.
Sketches of prototype screens
Low fidelity sketches of the profile page, sharing a collaborative setlist, and navigation.
WIREFRAMING

The First Skeleton

Using Sketch, I created cleaner wireframes of just the new personalized pages and collaborative setlist feature. The rest of the app will essentially stay the same.
Polished wireframe of sharing a collaborative setlist
Collaborative Setlist
Share and invite friends to a collaborative setlist. Conflicts will be clearly highlighted so the group can discuss any resolutions. Liked artists will be labeled by who added it to the list.
Polished wireframe of filtering a setlist
Advanced Filtering
Filter setlist by genre, stage, or by lineup and experiences. Sorting by time chronologically makes the most sense so no additional sorting functionality is added.
Polished wireframe of the profile page
Profile & Navigation
Personalized profile page with cover images, wristbands, and collectables. One single navigation bar on the bottom.
Design System

Sticking To The Branding

Following their design system closely, I either reused their current branding elements, or created new components that closely adhere to it.
Branding elements of the app - icons, type, buttons colors
✦ 04. Prototyping
final prototype

"Wide Awake Since 1993"

After weeks of prototyping and iteration, the final prototype is done! You can interact with the prototype on Figma here. Remember the goals I laid out for myself in the beginning of the project? Here they are again, and how I accomplished them!

01. Planning

Make it easier to plan and share a setlist with friends

Create Collab Setlists

Gif of sharing and creating a collaborative setlist prototype
Create and share collaborative setlists with friends. Start by inviting friends, create a group name, and add additional people via link invites afterward.

Collab Setlist Homepage

Gif of collaborative setlist home page. Shows members, current list, and invite options
A home base for the collaborative setlist. View who's in the group, the group's current setlist, who added which DJ, and any time conflicts. Invite more people via in-app invites or share invite via a link.  

02. Personalized

Make the app experience more tailored and personalized to user needs

Profile Page

Gif of profile page prototypeFriends list page prototype
Customize profile pages and select banner/cover images. Users can showcase their favorite memories with their friends here! Show off all the wristbands they've collected, display digital collectibles, and share their profile QR code.

03. Human-Centered

Make it feel familiar to products users already know and love

Advanced Filtering

Gif of filtering a setlist prototype
Filter the setlist by genre, stage, or lineup in order to quickly find artists that the user likes.

Search

Gif of searching through the app for people, events, or DJs
Search functionality supports looking for friends on the app, events, and DJ artist bios. Navigation changed to one bottom bar, instead of the original two side-peeking menus.

Settings & Notifications

Gif of notification center prototypeSettings page prototype
Consolidate and reformatted all settings into respective categories and labeled with an icon. Notification center shows friend requests, group invites, changes to group setlists, and Insomniac company notifications.
SUCCESS CRITERIA

Insomniac vs. Others

Compared to its competitors, Insomniac is the only company that has their own dedicated app, though that may be due to the size of their company and ability to host hundreds of productions. Nonetheless, their loyal community and customer base solidify their dominance in the market.

Being that the app currently just shares event information, it is a bit one dimensional overall. With these UX changes I believe the app can be transformed into a first of its class experience that not only delivers essential company to user information in a more effective manner, but also offers a personalized and interactive EDM platform for user to user connection.
Takeaways & Reflection

What I Learned...

This redesign was my first solo UX project and I’m really happy with the way it turned out! There are pros working with a team, but I also learned valuable skills going solo. It’s difficult to find the motivation and time to work on this personal project outside of my full time job, so this experience really helped me refine my prioritization and time management skills (that I previously thought were already strong). But on the flip side since I was working solo, I had the luxury to spend as much time as I wanted making my prototype pixel perfect and learning more advanced Figma functions that I didn't know before.

This project also really challenged me to design within business constraints. I was so close to choosing the in-app messaging feature to solve the problem statement, however after sleeping on it for a couple days, I just knew it wouldn’t be feasible or used by Insomniac in real life. I constantly needed to remember to stay within business constraints, technology, budget, and the app’s original purpose. Instead of designing new features, I focused on purely enhancing and improving what they currently have laid out. 

This project reinforces the importance of a user-centered design approach when designing digital products. Through research, I realized that a deep understanding of what user’s need and how they behave is essential to designing engaging and intuitive solutions that genuinely provide value to their lives. 

More Projects

Slack redesign case study
Slack Redesign
MedTech Horizons case study
MedTech Horizons
WeStudy case study
WeStudy