Ironhack: Music Festival Microsite UX/UI Case Study
In this five day sprint at Ironhack Bootcamp, we had a task to design a microsite of a festival or event and invent a feature that will present that Festival. We were working in a group of three, so at the beginning, I felt curious about how we will come along with different ideas and the style. During the process, we brainstormed and learned from each other.
We chose a music festival that will use smart technology to alleviate COVID concerns. Our event microsite is a music festival that will engage people in a fantastic post-COVID situation without worrying about mass crowds and long lines.
THE DESIGN THINKING PROCESS
The Double Diamond is a visualization of a creative process or a design sprint and allows any UX designer to understand and respond to the users” needs.
Discover stage- we gain insight into users and their needs
Define stage- we analyze observations to come up with the main problem
Develop stage -we create a solution to solve the problem
Develop stage-we test the solutions
DISCOVER
To better understand the concept of the Festival, we started with Secondary research to see statistics, people’s experiences and to have a bigger picture of the festivals itself.
They are the mental health benefits of music festivals:
“We found that going to concerts significantly reduces the levels of the stress hormone cortisol,” Daisy Fancourt, associate professor in epidemiology at University College London.
Lean Ux Canvas
The discovering phase starts with the Lean UX Canvas to identify business problems, business outcomes, and users’ benefits.
The purpose of the Festival, as long as listen to favorite artists and having fun, is also emotional and social. Users can have benefits in that sense, and because this is the living document, we will come back to uncover the user’s value.
Competitive Comparison Chart
Using the Competitive Comparison Chart, we identify the different events that have already been successfully rated. We grouped them into categories of services they provide that contributed to make them the event they are today. With this tool, we can see what kind of features they offer and users' mental models. The users are expecting to see the passes and the line up of the festival, but we noticed that most of our competitors’ websites failed to provide uniqueness.
Next, we are going to the Market Positioning chart to embrace our insights and find the opportunities to set apart from competitors.
Market Positioning Chart
Doing the market positioning chart allowed us to see which directions other competing festivals are currently focused on. Our chart concentrates on incorporating a budget-based experience versus a luxury-based experience and tech advancement music festivals versus traditional.
That allowed us to realize that our blue ocean would contain a music festival that will bridge the gap between technology and event.
Also, to have both budget and luxury packages for festival attendees.
User Research
Quantitative Data: Survey
We collect Quantitative data by asking questions that people of all platforms and demographics can reach. We posted a survey on social networks and conducted 18 Survey responses.
Qualitative Data: Interviews
To practice User-Centered Design and to discover user characteristics, we interview six users. We came across more about their experiences. Questions were based on how users find information, poor experiences at events, frustrations, accomplishments, and pain points. Many of the interviewees had issues with similar aspects of live events:
“I love going to festivals and the energy around them but I hate how crowded they get.” — Rebecca
“It was very difficult to drink enough beer to even get slightly buz, because it takes too long to wait in line for a beer.” — Michael
“The line to get in through security was ridiculous. Took us about an hour to go through the Id check, bag scan, and ticket scan.” — John
Define
We organized the data from the interviews and the survey onto an Affinity map in Miro. From there, we discovered some of the biggest trends that we found in our research. I like this tool because it helps you to have all insights in one place. Even though some data you think won’t be relevant for your process, you should keep it. Because from there, you can discover some meaningful Aha moments.
Main Themes that I discovered on Affinity Map: long lines, not enough bathrooms, food lines, and parking difficulties. Pain points are crucial to narrow down.
Value Proposition Canvas: Customer Profile
To get closer to the customer profile, we started this process with an Empathy map. Reflecting all the collected data into this canvas helps us to know what users hear, say, feel, and what do they need to do.
We arrange this into three stages: Pre, during, and post-festival.
User Persona
User personas are a symbol of the user’s research and represent their metal models.
Let me introduce you to our User persona. She is motivated to listen to her favorite artist and make new friends. But she is having frustrations with long lines, not a clear map, and keeping track of her friends.
Creating a persona is another way of representing the user.
User Journey Map
As a holistic view of user experience, we can see our users' pain points on the User Journey map. I divided the journey map into the three stages; before, during, and after the event.
The low points are circled and are referred to as “opportunities.”
The main pain points identified in the Journey Map:
- Long entrance lines
- Finding friends at the Festival
- Transportation, Traffic, Parking
- Long lines to buy food/drink.
- Not enough bathrooms/long lines
Opportunities for these pain points:
- Faster entrance lines
- Easier parking
- Cleaner and multiple bathrooms
- Organization on how to find friends
Once we finished defining things, we shifted to problem statements and determined possible solutions to our different problem areas.
Problem Statements-HMW
DEVELOP
When getting to the ideation stage and starting brainstorming, it’s crucial to bring as many people as possible to brainstorm with you. Since it was three of us already, this step in the UX process wasn’t difficult, and we have a batch of ideas to share on each HMW question.
This step of the process is one of my favorites because you are productive in putting all ideas on the specific question.
This also really prepped us for our Moscow Method.
MoSCoW Method
One of the excellent techniques to help with prioritization is Moscow Method. It will prioritize what our future feature will have first and what we should implement later. That will help us to approach our MVP. We identify the most substantial ideas and determine the must-haves.
Must Haves :
- Pay with wristband
- Map of the toilets and food court
- Sanitation stations
- Mandatory face mask
- Ordering food/drinks online
Now that we found a Must have in our process, we can go to the customer’s side of the Value Proposition Canvas with our feature.
Value Proposition Canvas: Customer profile with feature
We were deciding which features (Products and services ) would include within our event allowed us to see what gains they would be creating and what pains they would be relieving. So from there, we can see the product-market fit. From our case, that looks like this:
If our costumers can order food online, the pain that they relieve is less waiting times, reducing COVID anxiety, and Gain creators will be a more comfortable experience.
Before we go to our next step, we want to recap the main problems that we discovered so far in our research phase.
Problem Recap
Minimum Viable Product
Our MVP as a Smart map will help us stand out from our competitors Electronic Music Festivals:
- Heat map of where most people are
- Food courts locations & order online to skip lines
- Sanitation locations
- Reporting options for sanitary incidents
- Reserve the spot for the bathrooms
Value Proposition Statement
Our feature, Neon Smart will help attendees who want to avoid lines, by reducing mass crowds so that they can enjoy their show and make the most of their time. Which makes them feel satisfied with their purchase.
Site Map
Once we hit down our feature, we were able to create our site map. A site map is a list of web pages and will help with content strategy and information architecture. We were able to visualize how our users’ would navigate our microsite.
You have to always keep in mind users. How they will navigate, and if everything is clear and specified. The site map helps us with user flow.
User Flow
User flow will give us a visual of the happy path we expect our users to take.
DELIVER
Low-Fi Prototype
Lo-Fi Usability Testing Results
We conducted seven usability tests with the tasks being to purchase a festival ticket. The average time it took our users was 43 seconds with a 14.7% misclicks.
It was 14% misclicks on the home page. To purchase the tickets, users were clicking on the picture. It showed us exactly what wasn’t needed to provide a better Mid-Fi Prototype.
Mid-Fi Prototype
We used the feedback we got in our usability testing to make a few changes and create our mid-fi wireframes. In this process, we link the ticket bundles button to the ticket options to purchase, and the home page button to buy the ticket is made more visible.
Testing metrics Mid-Fi
After conducting usability testing with 12 users on the Mid-fi using Maze, we reduced the misclicks from 14% to 11%. The average duration is also completing the task to almost a half, from 43 seconds to 24 seconds.
One of the main confusing steps was when they purchased the ticket and went to the last page. It confuses them the login button at the end.
“When I finish the purchase, I don’t know what I should do next. Should I log in?” — Stefan.
We decided to remove the login button from there to our Hi-Fi, so it wouldn’t be confusing if the login is not mandatory for buying tickets.
Visual Competitive Analysis
We completed a competitive visual analysis of the Ultra Music Festival and Tomorrowland. We did this to get an overall feel of the brand colors, layouts, and market competitors' typefaces.
The analysis helps us benchmark or visual research to know what our user’s mental models are currently visually, what they expect visually.
Our Brand attributes for the Neon spirit festival are :
- Futuristic
- Adventurous
- Tech future
- Fun
- Modern
Mood Board
To get inspiration in our design direction, we formed a mood board to determine our microsite and music festival's overall color scheme.
When we challenged users for their opinions when they saw our design, 90% answered: Disco, excited, futuristic, robotic, and very close to our goal.
Style Tile
The style tile is a design deliverable that references website interface elements through font, color, and style collections delivered beside a site map, wireframes, and other user experience artifacts.
Since the Festival is NEON SPIRIT, we use neon lights as an influence to translate the mood, feel, and tone of our website.
When we show users to get a feel of what message it was giving off about our brand, 95% of users mentioned: electric, modern, adventurous, and electric.
After concluding the visual design elements with the mood board and style tile, we are ready to build the hi-fi.
Hi-Fidelity Prototype
Microsite
Along with a Hi-fi prototype of the microsite, we made a Hi-Fi prototype for the app. The steps will be :
- Receive wristband in your mail
- Download the Neon Smart App
- Use the QR code on the wristband to log in.
Hi-fi Prototype App
Success & Failure Metrics
We will acknowledge if the feature on the microsite is a success through these metrics, and we will know if the feature fails if:
Next Steps
In the future, we will measure success in the new feature. We will also continue usability testing for the Hi-Fi prototype, and lastly, we will propose changes based on collected data research.
Key learnings
Thanks for reading; scan our QR Codes to connect with us on Linkedin!
