Promoting an Up-and-Coming Music Artist and Improving Fan Engagement
Echo Mockup 4 Devices.jpg
OVERVIEW: The responsive website promotes RCA Record’s up-and-coming and Grammy nominated artist Echo* and her newest single, Angels. It helps prove that Echo is here to stay by allowing fans to get to know her as well as to provide more information and incentives for them to pre-save her music.
THE CHALLENGE: How might we increase Echo’s fanbase and promote fans to pre-save her new single, Angels?
TEAM: UX Designer: Kimberly Tanny, Researchers: Elize, Laura and Sarah
ROLE: Problem Solving, Ideation, Competitive Analysis, Persona, Information Architecture, Wireframing, Prototyping, Usability Testing, Responsive Design
DURATION: 4 Weeks
TOOLS: Adobe XD, Adobe Photoshop, Miro, Zoom, Notion
(* Echo is a fictional artist, however, I teamed up with RCA Records and Adobe for this project)
THE APPROACH
Analysis and Synthesis of Research
Analyze/synthesize the user research conducted by the research team
Conduct competitive analysis
Create User Persona
Strategy and Ideation
Information Architecture
Sketching
Design
Wireframing
Visual Design - incorporate brand assets created by art director, develop design system
High Fidelity Wireframing
Testing, Feedback and Iterations
Conduct Usability Testing
Analyze and synthesize the feedback
Iterate the prototype
RESEARCH
Our design team conducted both quantitative and qualitative research to get more insights from the stakeholders and the client as well as to better understand the needs and frustrations of users.
Qualitative Research
Primary Business Goal is a conversion for users to pre-save the single, Angels
The team conducted a qualitative stakeholder interview with Leo Araujo from RCA Records to better understand the business goals and the MVP.
"Echo has been in the background for a little while, but she is now ready to break out. She has created her first album already, which was critically acclaimed. This will be her sophomore album, those are normally pretty tough. We want to show that this is an artist that will stick around and that this is the next big pop artist."
Leo Araujo with RCA Records
Quantitative Research
Most fans visit music websites for tour info and generally never pre-save music
22 participants
Conducted via Google Forms
Key Findings:
The majority of users either have never or rarely ever pre-save music (86.3%)
Musician website visits are a quick in and out for most users (72.7%)
Most fans (54.5%) sign up for an email newsletter to get access to tour dates and to receive updates
The majority of users (72.7%) visit musician websites to look up tour dates and information
COMPETITIVE ANALYSIS
Effective CTAs, good storytelling and interactive elements enhance user experience
I personally conducted a competitive analysis to take a look at the strengths and weaknesses of various competitor websites as well as to be able to see what worked well with non-competitor websites.
Direct Competitor Websites examined:
Tate McRae
Olivia Rodrigo
Kasbo
Non-direct Competitor Websites:
Apple
Upstream (non-profit website)
Competitive Analysis
Key Takeaways
CTAs are very important elements to include to push conversions on a website and they should be highly visible
Powerful and effective phrases can be used throughout the website for good storytelling
Interactive elements and animations create a more unique and fun user experience
If something is not available to the user because it is not yet released or sold out, there needs to be a CTA providing users with the opportunity to get more information, otherwise it can lead to a frustrating user experience
The website should represent the artist and show their personality, but at the same time, it should be intuitive, clean and easy to use
USER PERSONA
INFORMATION ARCHITECTURE
USER STORIES
Based on the user research conducted, the primary goals for users visiting musician websites were to learn more about Tour information and dates as well as to get to know the artist. These are the user stories I developed to help with the design of the website.
As a user, I want to stay-in-the-know and get access to information on tour dates and locations
As a user, I want to be able to get to know who the artist is.
SITE MAP
Echo Website Site map
WIREFRAMES
WIREFRAME SKETCHES
Team ideation session to generate and share ideas
Crazy 8s Sketching
The Crazy 8s sketching session with everyone enabled me to generate ideas quickly. The team then shared ideas for each page element, and I participated in dot voting and incorporated the ideas into the wireframe sketch. I went with a scrollable website with multiple sections. The navigation bar at the top would be a sticky navbar.
BRANDING
Branding, Style Guide, Components
Branding and Style Guide
Components
USABILITY TESTING
I conducted usability testing on the desktop high-fidelity prototype.
4 participants
One-on-one Usability Testing Sessions conducted remotely via Zoom
Objectives
Understand why pre-releases are overlooked & what might get people excited about pre-saving
Learn how fans discover and learn about new artists
Understand if there are any challenges when discovering a new artist
Understand fans' mental models about websites and how they feel about a more discovery-oriented experience
Understand if Echo lounge is intriguing or confusing
Key Findings
None of the participants have ever pre-saved any music. Some knew what pre-saving was, but others did not
The primary reason the users visited musician websites were to find more information on tours and merch
An interesting bio on new artists helped fans feel more connected and want to stay longer
Most of the users didn’t like joining mailing/texting lists for fear of spam
Users loved interactive elements
AFFINITY MAPPING
Pre-Saving music and staying “in-the-know” are the top priority for fans and the client with the best value and impact
I conducted usability testing with 4 users and was able to share my results for one of the users on a collaborative affinity mapping session with over 550 participants during a live session with Adobe and Elizé of Elizé Presents. The 3 other team members and I categorized the feedback into subcategories and then we voted on the categories with the best value and impact for both users and the business.
Affinity Mapping of Usability Testing Results
HIGH-FIDELITY WIREFRAMES AND PROTOTYPE
Mobile High-Fidelity Wireframes
Angels Pre-Save Mobile
Echo Lounge - Mobile
Desktop High-Fidelity Wireframes
High-Fidelity Wireframes - Desktop
Echo Website - Angels Pre-Save
USABILITY TESTING ROUND 2
Due to time constraints, I conducted a second round of usability testing with just one additional user
User tested both mobile and desktop versions
The key objective for the second round of testing was to test if the primary CTA of Pre-saving the new single Angels was more visible and clearer to the user
Key Findings
Able to better understand what a Pre-save was
More likely to Pre-save the single with the incentive of a giveaway
Both platforms were easy to navigate
CONCLUSION
LEARNINGS
Primary Call-to-Action button was adjusted several times during iterations as the initial designs didn’t stand out enough or were too distracting
Creating a Style Guide and Design System is essential for streamlining the design process and to ensure consistency with the design
User Feedback is really critical to designing a human-centered product
Collaborative sessions with the team are important for idea generation as well as to have additional eyes to provide feedback on solutions
Due to the project guidelines, I had designed the desktop version of the website first, however, ideally, I would have a mobile-first approach
Designing a responsive website is important as many users access websites from their phones or other devices instead of a computer
Thanks for reading!
I’d love the opportunity to work with you.