Francis Phan

Product Designer























Work
About
Resume
Email
Linkedin

Insomniac

Redesigning Insomniac’s Mobile Application

App Redesign + Design Systems
Timeline: 2 Weeks (Q3 2024)
Platforms: iOS native
Role: UI/UX Designer, UX Researcher
Tools: Figma, Adobe Creative Cloud





Problem: Insomniac’s mobile app does not adequately support users' live music journeys.

Opportunity: How might we help users identify events for them?

Solution: A UI refresh that emphasizes context and wayfinding to help users find relevant artists, events, and experiences that match their interests.



Insomniac dominates the EDM genre with its ability to craft awe-inspiring, larger-than-life spectacles, but their digital experiences fall short.


Founded in 1993, Insomniac is a staple in the American Electronic Dance Music (EDM) scene, with 16 festivals, 124 Insomniac Experiences, and over 400 nightclubs.

 In 2019, they launched an app to enhance the festival-goer experience, but it has seen minimal updates and has lost relevance.

With experience building several website redesigns, I wanted to challenge myself to improve Insomniac’s mobile experience by modernizing their mobile application.


Some of Insomniac’s Brands



I listened to Insomniac's most dedicated fans to gather the necessary product requirements.


75%

of users felt the app didn’t meet their needs before or during a festival, causing them to look to other platforms.

80%

churn rate. Users downloaded the app only before a festival and deleted it afterward. 

95%

of users said their groups never agree on an exact schedule - they always want to split up for certain artists.


Heuristic Evaluation


I conducted a heuristic evaluation to identify design problems in the user interface. I judged the design against Jakob Nielsen’s 10 usability heuristics to evaluate areas for improvement.




Other Tools In The Market


The mobile app is not intuitive, so users turn to other applications and software to fill the gaps left by Insomniac. I conducted a competitive analysis to understand where we are falling short.



Vision


EDM is not a monolith. Create a digital experience that supports each journey to the larger-than-life spectacles of Insomniac.


Audit of Navigational Structure


My next priority was to define the navigational architecture. This outlined the key experiences I needed to design. One goal was to reduce the number of redirects to microsites and create a more comprehensive ecosystem.


Previous Navigational Architecture:




Proposed Navigational Architecture:




Wireframes


After understanding my goals and vision for the design solution—Context, Discovery, and Interactive—I began wireframing. I focused on UI trends, best practices, and accessibility.




Iconography Refresh

I created a custom set of icons to aid with wayfinding and to help the digital platform reflect the brand's eclectic energy.




My Priority Was To Provide Context 


Driving users to ticket sales was the highest business priority. I needed to give users more context on events they scroll past but may not explore. Tags like "popular," "selling fast," and genres would intrigue users to check out new events and artists. Image Carousels gives users more context on how the festival looked in the past.





I Prioritized Tabs, Callouts, and Stickers


Elements that I found important for wayfinding were tabs, callouts, and stickers. These elements helped users find events and artists that matched their interests. These components were vital for better app navigation and context.



In-App Schedule Sharing Was Highly Requested


While my main priority was to enhance UI, some new features were highly requested. The main feature users wanted was in-app schedule sharing, which allowed them to compare their plans with others and create flexible schedules.






Through A/B testing, I made subtle changes to components that improve comprehension and speed up interactions.


I focused on specific components to determine which UI elements are more useful to users.

In some cases, like schedule sharing, backtracking was necessary to find the UI element that makes the most sense to users.


V 1
Comparing Schedules
Only Completely Overlapping Artist Shown

V 1.1
Comparing Schedules
All Overlapping Artist Shown

V 2.0
Comparing Schedules
Horizontal Expansion

V 3.0
Comparing Schedules
All Artist Shown

V 4.0
Comparing Schedules
All Users Are Represented By A Sidebar

V 4.1
Comparing Schedules
All Users Are Represented By A Sidebar; Completely Overlapping Artists Highlighted


Components were designed with an atomic architecture to ensure scalability and reflect their intended use and construction.

This allowed me to swiftly create dark and light modes for the application. Scalability ensured consistency across all breakpoints.



Tough Decisions


With the time constraints of the sprint, I had to make sacrifices to design functional foundations using the atomic design system instead of experimenting with design to meet tight deadlines.


Final Solution

Following corrections, tweaks, and fine-tuning, the final high-fidelity prototypes of Insomniac’s mobile app are finalized.




Results + Impact


This was a hypothetical project. I gathered direct results from the same interview group as during my initial research to gauge the success of this project.

90% of participants stated they would use the application more if it implemented these proposed features.

65% of participants said they have looked for a live music event near them since our initial conversation.

95% of participants prefer the refreshed UI to the previous one.


Reflection


My next step would be to build further upon the “after” phase. I have extensively planned the journey leading up to an event and the interactions during it. I would love to develop features that help us maintain the community afterward.

This project was challenging but fun. The tight time constraint pushed me to optimize my process while considering how to theoretically hand it off to developers. I had to prioritize the most important aspects and make compromises, just like in a real project. It was rewarding to build a detailed experience in such a short time.




Want To Learn More? Reach Out For More Information.







All Projects | Exponential Pathways | Insomniac | Disney Streaming