Designing an e-commerce experience for Electronic Music Promoter UX/UI Case Study
Project requirements:
Design a website to promote Micro-house events and sell tickets for these events.
As a group of four student collaborators, we present our e-commerce project for the client WARMLAB, an event promoter for electronic music "Microhouse" based in London.
The Covid-19 crisis has brought the events sector to its knees… Post-Lock down, Warmlab is now ready to relaunch.
To do so, a website will be an essential tool for his business.
We conducted a Stakeholder interview with Dani, the owner of WarmLab.
This interview gave us insight into his business idea and his goals. It also helped us to define the project deliverables by creating an online solution with the requirements and business objectives below:
- Promoting Micro-house Music
- Supporting his portfolio of artists
- Selling music event tickets directly through his website
- Creating an intimate, exclusive community of people
Dani wants to grow his business by selling tickets and creating a private, upscale community.
For this project, we needed to develop an online solution for Warmlab to be more competitive in the Electronic Music Event market.
Research & Data Analysis
First, we conducted a SWOT Analysis to determine what Warmlab does well and its lack in a global electronic music promoter market.
Strength: its unique offering. Opportunity: people can't wait to party again
Weakness: no website for promotion & ticket sales Threat: high competition with lots of promotors of electronic/house music events
With this information, we did a competitor analysis to profile WarmLab and define their brand in the context of their direct competitors: Goosebumps, Subtil, and Sunrise.
We looked at how the WarmLab brand is positioned to other brands in the same category and how our target market and value proposition fits into that context.
A feature comparison analysis followed this to collect all the necessary details of competitors' websites.
Comparing the features in similar websites help us to determine user expectations and possible competitive advantage opportunities and learn what works or what doesn't and what the competitors have implemented on their websites.
None of the competitors have social media integration,
One competitor is selling tickets online and has a membership area. Most competitors use a secondary website to sell tickets.
Those represent a possible opportunity for WarmLab.
With this information, we created a brand positioning map.
The market positioning map showed us where the Warm Lab brand is in the context of other brands in the category and where a gap exists in the market, representing an opportunity.
Warm Lab is currently between exclusive and local.
Their ideal position would be exclusive and international.
1. EMPATHISE
The interviews
We decided to conduct five interviews with people interested in Electronic Music and attend Music Events regularly. We needed to understand their behaviors, experiences, and expectations when buying music event tickets online.
Here are the questions asked during the interviews…
- What kind of electronic music do you like?
- How often do you go to electronic parties? And who do you go with?
- How do you usually buy tickets? Separately? in a group?
- Do you know any other website similar to Resident Advisor to buy electronic Music tickets?
- When you purchase tickets online, is there something, in particular, that could make it easier?
… and some relevant quotes from our interviewees:
“I would like to be able to buy and access tickets from the official website.”
“I expect to see artist, performance info, price, and times.”
“I don’t like it when I am forced to log in straight away.”
“I want to know how many people are attending the event.”
“I want to see the name of the event big and bold so that I know for sure what I am buying tickets for.”
The User Persona
Based on these results, we built a Primary User persona that shows our previous research's main motivations and frustrations, wants, and needs.
Wants & Needs
- to know when events playing his favorite music are happening and where
- to be the first to know about early bird ticket specials
- to be able to access information about his favorite artists and find new music
- to be a part of a music community of friends
By understanding our user persona, we built a User Journey Map.
The User Journey Map
The user journey map helped us identify and focus on specific pain points and potential opportunities for our product.
2. DEFINE
All this research gave us enough information to define our problem statement, such as:
And from this, we developed a set of HMWs to help us define our product goals and development:
The Minimum Viable Product (MVP)
We determined our Minimum Viable Product (MVP) for the ideation process, with the central question: What is the simplest way to satisfy the business and user's needs?
Our Minimum Viable Product (MVP) is a music event website that enables the user to:
- Browse upcoming events
- Buy tickets avoiding third party websites
- View resident artist's profiles
- Photo gallery of past events
The Moscow Map
We created a Moscow map from our MVP that includes the "must have's," leaving the "could have's" for the next version of the product.
The Site Map
The site map shows the information architecture. We mapped out the relationship between the pages and the website's content hierarchy.
The site map was followed by a user flow for our happy path.
The task we outlined for our happy path was for a user to buy four Second release tickets to an event called Resurface on 31 July, using Apple Pay.
Included in this task was logging in as a registered user and accepting the terms and conditions pre-payment.
The User flow
The user flow shows every step in this process, from arriving at the home page to completing the purchase and logging out.
Our user clicks on a social media link for a party on 31 July called Resurface, and it takes him to the WarmLab website "Home Page."
He finds the event on the home page list of "Upcoming Events" and clicks "More information" to see the event lineup.
He chooses to buy a ticket for himself and three friends using Apple Pay.
Once he has purchased the tickets, he downloads them to share them with his friends. He is already a registered WarmLab user.
The epics and user stories
To refine the details, we developed epics and user stories. One of our epics was "buying a ticket for an event," and we brainstormed user stories for this to make sure we had thought of all the details.
3. IDEATE
Low fidelity wireframe
The next step was to create concept sketches and lo-fi wireframes that brought our site map and user flow to life.
We also got excited by creating the low-fidelity wireframes, including the artist's biography and gallery pages for past events.
We tested this with users and then refined it based on our feedback.
4. PROTOTYPE
Medium fidelity wireframes
We then created Medium fidelity wireframes from our low fidelity wireframes in Figma to refine further and create a working prototype for testing.
5. TEST
Summary of iterations:
On the "Home Page with events" hardboard:
- Added User Name in the header: so users know they are already logged in
- Added a Slide bar at the bottom: during the tests, users couldn't navigate through the past event section
- Deleted "My Account" as a section
- Simplified the date and location filters: users were confused with these filters during the tests.
- Added an active link to the event image: the user tried to click on the event picture during the test to get more information.
On the "Event" hardboard:
- Moved the lineup at the top highlighted it: during the test, the user wanted to see this more extensive and attractive.
Below is a demo of our medium-fidelity prototype with implemented updates from our iterations.
Next Steps
- Refining the search function
- Create links from event lineup to artist profiles
- Create the possibility to buy tickets to more than one event
Other
- Showing the medium-fidelity to stakeholders for their input and ideas
- Designing the membership aspect of the website to grow a community
- Developing the high-fidelity designs for testing
Personal learning
It was exciting to interview real stakeholders and understand their business goals.
The usability testings and iteration were also an excellent exercise to keep in mind that we were not designing this website for us but the users & the stakeholder. I also realized that not all users have the same thoughts and expectations regarding purchasing event tickets online. It was challenging to collect all of this data and implement them in one online business solution.
The importance of teamwork
To finish, I also got convinced that working on a UX project with my three fabulous teammates facilitated creativity and idea generation.
"Each individual has unique gifts, and talents, and skills" John J. Murphy
I hope you enjoyed this article as much we enjoyed working on this project.
