The Product
Musicon is a website that allows music fans to watch live concerts and submit questions to their favorite artists, as well as receive exclusive merchandise for each event. It’s Spotify meets Twitch.
Project Duration
September 2021 - October 2021
The Problem
Artists are struggling to connect with fans due to the pandemic. Even live concert streams are missing the intimate connection with artists and fans.
The Goal
Enhance live concert streams between artists and their fans for a deeper connection.
My Role
UX designer designing the Musicon website from conception to delivery.
My Responsibilities
Creating surveys, finding target users, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, building a design system, and iterating on designs.
Understanding the user
I received various data from different types of music fans. When it came to getting the most out of online music events, they wanted to feel a personal connection with their favorite artists. It wasn’t enough that the event was live. It needed to provide special ways to interact with the artists such as asking questions about songs.
Pain points:
-
Experience can’t be replicated: Online music events don’t feel personal compared to being in an actual physical event.
-
Lack of interaction: Online music events don’t provide a way to interact with artists or be part of the audience.
-
Not valuable: Users don’t see the value of paying for a live stream that will be online later.
-
Lack of exclusivity: More exclusivity is needed to entice users to attend online music events.
Persona: Problem statement
Cesar is a music fan who needs intimate music events from his favorite artists because he wants a deeper and more personal connection to the artists and their work.
Goals
-
Offer ways to interact with the artist, such as asking a question
-
Offer ways for the audience to participate or make themselves known in the live event
-
Give exclusive merchandise if paying for the live event
Frustrations
-
“Online music events don’t feel personal”
-
“Online music events can’t replicate being in a physical show with other fans”
-
“I don’t see the value of paying for a live stream that will be online later”
User journey map
Cesar’s journey map revealed that the online music events would need to have a limit of ticket holders for exclusivity, special merchandise included for the event, and an option to submit questions to the artists.
Starting the design
Sitemap
One of my priorities was the process of users getting the information about the events they would attend. This included having an easy way to access questions submitted for the artists during and after checkout.
Paper wireframes
The drafts of each screen have specific elements with asterisks on the side signaling that they were using in the refined version shown on the right. The elements allow diminishing user pain points when looking for music events to attend.
Since Musicon users will access the site from different devices, it was essential to create designs based on various screen sizes to view the responsiveness.
Digital wireframes
Based on the ideas of the paper wireframes, I expanded on the options that users could explore while on the home screen allowing for a simple and visual style.
The homepage is concise in terms of content and sections, allowing for the mobile version to have a moderate scrolling experience and not feel endless.
Low-fidelity prototype
The low-fidelity prototype features the flow of viewing the details of an event by starting on the homepage and then connecting through the process of buying tickets for that event.
The usability study allowed me to improve the location of buttons and event details.
Usability Study
Parameters
Study type: Moderated
Participants: 5
Location: Remote
Length: 10 minutes
Findings
-
Simplicity: Users want an easy way to buy tickets, thus buttons should be highlighted more and easy to see when a page loads.
-
Familiarity: Users want a familiar way of adding their video questions, thus the options should be described on the homepage and throughout the website.
-
Emphasis on merchandise: The autographed merchandise needs to be added and highlighted when purchasing a ticket.
Refining the design
The steps explaining how the platform works were missing from the homepage. In the revised version, the steps can now be seen “Above The Fold” to educate users.
The event page was missing a prominent option to buy tickets shown “Above The Fold.” This was added by placing a button by the left side of the hero image along with data on ticket availability.
Additional desktop screens
Mobile screen size variations
High-fidelity prototype
The high-fidelity prototype improves the flow first presented in the low-fidelity prototype as users can easily know which steps to take next to buy concert tickets.
Accessibility considerations
-
I used headings with different-sized text and fonts for a clear visual hierarchy.
-
Even though not presented in the designs, the site would offer a dark mode to improve visibility issues.
-
Even though not presented in the designs, the side would offer multiple languages for text in the site content. It would also include captions for concerts, including those in various languages.
Going forward
-
Impact: The impact of the designs will help site users have a smoother experience while navigating, specifically when buying tickets for concerts. Most of all, it will assist in the original idea of music fans having a deeper connection to their favorite artists through online concerts.
-
What I learned: Through user research, I was able to get a better understanding of what could make music fans have a deeper connection to their favorite artists through digital experiences.
-
Next steps:
-
Conduct additional usability studies to determine more areas of need - especially during the actual music events.
-
Compare the site features to other competitors and analyze areas of improvement.
-
Improve the checkout page with better gestures and motions.
-