A Digital Product Designer with experience in
UX Design, UI Design, and Web Design
MusicLounge
Type
Independent project
Lenght
8 weeks
Role
UX Research
UX Design
UI Design
Platform
Mobile app
Responsive Website
Touchscreen kiosk
Problem Space
Music fans line up early in the morning or even the night before when they attend concerts because they need to see their favourite artists as close as possible. Queuing for so long can be really stressful to the point that this takes out the enjoyment of the overall experience.
Hypothesis:
There's a reason why concertgoers queue for so long when they want to see their favorite band: our brain values experiences over material possessions.
By turning the waiting part of the concert into an exciting activity, we can make the entire day a memorable experience.
Secondary Research
34 million people
Attended music concerts in 2019 in the UK
2 - 3 hours
How long people stay in line before a concert on average
Night or early morning
When the queues usually start
Fainting
Losing sleep, failing to eat and long periods of standing are swoon-inducing factors
Organise the line
Musicians have started to ask staff members to make lines organised and safe
User Interviews
I interviewed 5 people who often attend concerts and usually queue from early in the day.
I asked them questions about :
-
how they keep informed about live events
-
how concerts make them feel
-
what they do before, during and after a concert
-
how they feel about lining up for so long
​
Interview insights
Atmosphere
People feel great meeting other fans and enjoy the vibe they get singing together and having fun. At the same time, they can sense the anxiety of others.
Organisation
There were different complaints about how queues are managed. Most of the time they are not allowed to leave for food or to use the bathroom.
Experiences
The only relief is when the crowd is self-organised or when there are activities that interrupt the wait, like a meet and greets or similar activities organised by the venues.
After my interviews I was ready to refine my project question:
How might we make queuing for concerts an enjoyable and trouble-free experience for music fans attending those events?
I then drew a persona that best describes my final users, their goals, frustrations and behaviours. By creating an experience map, I documented the interaction with my future product and found some opportunities for my design intervention.
Persona and Experience Map
Key opportunities
01
Connecting with other fans
Connecting with other people who are going to the concert before and after the event.
03
Activities that interrupt the wait
Creating exciting activities that can interrupt the wait and make queuing more enjoyable.
02
Giving advice
Giving tips on what to bring, or the fastest way to get there for example.
04
Looking inside the venue
Showing the venue policies before the event, showing the doors and how the venue looks like inside. Showing the queue in real-time.
Task Flow
User Stories
I came up with about 30 user stories and grouped them into thematically related epics. These stories helped me understand what actions the user needs to accomplish to benefit from my product.
Epics
-
Being organised and prepared for the event
-
Queuing without staying in line
-
Taking part in activities
-
Making friends
Task flow
I decided to focus on the "Taking part in activities" epic and transform the user stories into a task flow.
Sketches and wireframes
I began by creating an UI inspiration mood board that helped me start sketching interface elements, exploring a range of potential concepts and ideas that could become my final prototype.
I looked at:
-
interactive maps
-
filtering between different categories
-
cards
-
carousels
​
And I started sketching on paper.
I then transformed my sketches into grayscale mid-fidelity wireframes in Figma.
Usability Study
Two rounds of user testing
After designing and prototyping my wireframes, I conducted two user testing sessions.
To obtain practical, real-time feedback that could be used to improve my design, I prepared a user testing plan with some tasks the user needed to carry out and tested 5 different people each time.
Tasks
-
Exploring the home page and sections of the app
-
Selecting a concert and getting a number in the queue
-
Finding activities
-
Filtering the activities
-
Joining an activity
I collected all my observations and synthesised the results into a result table and matrix in order to identify the severity of the problems and make adjustments to the prototype.
An example of a screen before and after user testing:
Brand Development
With the final flow of screens established, I started developing a brand identity for my product.
​
First things first, I decided to give my brand a name:
MusicLounge
Moodboard
I identified my brand as:
​
Dynamic, social, upbeat, bold, and playful.
​
In order to create a moodboard, I researched images that visually represented these adjectives.
Colours
The Moodboard inspired my brand colours.
​
Knowing I had to play with different categories in my app, I decided to incorporate many colours into my palette.
I decided to find bright, bold colours that could give a neon, electric vibe to my entire project. Those could also be paired up with dark blue (my primary colour) to create a high-impact, vibrant perception.
Typography
I decided to used two fonts in my app.
​
Titan One: a really bold font with a happy and cheerful personality that worked really well in my branding, especially used on heading titles and short text.
Lato: a really legible sans-serif font that is simple and minimalistic.
Logo
The logo represents both a disk and the queueing area (the music lounge) where music fans can stay while they are waiting.
I decided to create a unique shape that I could use throughout the app and add it to the logo.
Application Icon
Starting from my logo and colours, I designed my application icon.
Final solution
My grayscale wireframes were finally ready for the application of color, imagery, and high-fidelity design elements.
Design System
I started by creating a UI Library of everything I could use to build my high-fidelity design. I did this following the principles of Atomic Design.
Here are some examples of atoms, molecules and organisms:
Hi-fidelity prototype
With my UI Library ready, I was finally able to create the final hi-fi prototype of my app in Figma.
Marketing website
I then designed a responsive marketing website to promote my app and communicate its values to my target audience.
Desktop screens:
Mobile screens:
Touchscreen Kiosks
My final challenge was to translate my product into another platform. As a result, I decided to design some screens for a Touchscreen Kiosk that will be situated inside venues to display the activities during the day or to allow concertgoers who have not downloaded the app to get their number.
Key takeaways & next steps
The most significant lesson I have learned from this 8-week project is that design is an ever-evolving journey. This experience has expansed the realm for improvement and refinement, affirming that design is not static but a continuous process. Embracing a future-thinking mindset, I have cultivated the ability to envision beyond the present iteration, considering the long-term impact on user experience. Now, with the user firmly at the center of my design philosophy, each iteration and change becomes a strategic step toward an enhanced and forward-looking design landscape.
This project has not just taught me about the nuances of design but has instilled in me the importance of designing with an eye on the future, where user satisfaction remains the guiding beacon for transformative iterations.
​
My next steps will be to:
​
-
Make more changes to the screens and the current interactions to create a V2 of my design.
-
Explore other task flows of my product, like organising activities and connecting with other users, or looking inside the venue before the concert.
-
Testing, testing, testing.
-
Looking at the constraints of the project and finding solutions: for example finding partners and venues interested in becoming partners.