Designing an e-commerce experience for Electronic Music Promoter UX/UI Case Study

Project requirements:

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 important 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

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.

SWOT Analysis

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.

Competitor Analysis

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, what the competitors have implemented or not on their websites.

Feature Comparison

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.

With this information, we created a brand positioning map.

Warm Lab is currently between exclusive and local.

Their ideal position would be exclusive and international.

1. EMPATHISE

The interviews

We decided to conduct 5 interviews with people interested in Electronic Music and attending Music Events regularly. We needed to understand their behaviors, experiences, and expectations when they buy music event tickets online.

Here are the questions asked during the interviews…

The User Persona

Based on these results, we built a Primary User persona that shows the main motivations and frustrations, wants, and needs concerning our previous researches.

Primary User Persona

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.

User Journey Map

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 main 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

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 content hierarchy of the website.

Site Map

The site map was followed by a user flow for our happy path.

Happy Path

The task we outlined for our happy path was for a user to buy four 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.

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.

Low fidelity wireframe

We also got excited by creating the low-fidelity wireframes, including the artist's biography page and gallery page for past events.

Low fidelity wireframe

We tested this with users and then refined it based on the feedback that we got.

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.

Average time to complete the task: 1 minute 11 seconds

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: during the tests, users were confused with these filters.
  • Added an active link to the event image: during the test, the user tried to click on the event picture 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 bigger and more attractive.

The prototype demo

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 line-up to artist profiles
  • Create the possibility to buy tickets to more than one event

Other

  • Showing the medium-fidelity to stakeholder 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 this time 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 business online 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.

UX / UI student @Ironhack, 2021. I am having a big interest in design ethics and accessibility, Figma, and visual design.