End to End Application
Background
Problem: Music enthusiasts often struggle to stay informed about live events for their favorite artists. Key challenges include scattered information, lack of timely notifications, and no centralized platform for fans to connect, share experiences, and build community.
Solution: This app combines event tracking with a fan-driven social platform. Users can easily follow their favorite artists, receive real-time updates on concerts, purchase tickets seamlessly, and connect with other fans attending the same events. It offers a unified, engaging experience—from event discovery to post-event discussions.
UX Research
Understand the needs, behaviors, and frustrations of music enthusiasts when discovering, tracking, and attending live events. Additionally, explore how fostering connections among fans can enhance their overall experience, from event anticipation to post-event discussions.
Research Objectives
Explore user preferences for discovering new artists and connecting with like-minded fans.
Identify key pain points in staying updated about live events for favorite artists.
Validate the need for a centralized platform combining event tracking and social engagement.
Methodology - User Interview
Participants:
Interviewed 5 participants, aged 25 to 40, to gather diverse perspectives from individuals in this demographic who share a passion for music and attending live events.
Challenges include ticket pricing and availability, parking, and long distances to venues.
Some avoid concerts altogether due to the hassle or lack of interest.
Interaction with fans is seen as a potential enhancer.
Have enjoyed connecting with fans through smaller, more personal experiences.
Most rely on social media to keep up with events
Methodology - Competitive Analysis
To better understand the market, I analyzed key competitors like Eventbrite, Songkick, and Bandsintown. Each platform excels in event discovery and ticketing but lacks a strong emphasis on fostering community and social connection among fans. This analysis highlighted an opportunity to differentiate by combining event tracking with a fan-driven social experience.
Persona #1
Persona #2
Problem Statement
POV: Users who enjoy attending events need an easy way to discover affordable, nearby events that match their interests because they value convenience and don’t want to spend too much time searching or planning.
HMW: How might we help users quickly discover affordable and relevant events near them without the hassle of extensive research?POV: Fans who enjoy connecting with others at events need a seamless way to interact with other fans and participate in community activities because shared experiences enhance their overall enjoyment and create lasting memories.
HMW: How might we help fans connect and interact with each other around shared events and experiences?POV: Users who follow their favorite artists need clear and personalized updates about events because it helps them stay connected and never miss out on things they care about.
HMW: How might we deliver tailored updates and recommendations to keep users connected with their favorite artists effortlessly?
Project Goals
Sitemap
Home - Favorite Artist Feed
Default landing page showing updates from favorite artists to keep users engaged.
Personalized Event Recommendations
Suggests events based on user preferences, making it easier to find relevant ones.
New Artist Discovery
Helps users explore new artists and expand their music interests.
Fan Badges
Lets users earn and display badges to show their fandom and engagement.
Volunteer - Help Out / Impact Makers
Connects users with volunteering opportunities to build community involvement.
My Preferences
Allows users to customize settings like music preferences, notifications, and themes.
My Tickets
Central hub for managing tickets, including transfers and refunds.
Chat (Direct & Group Messaging)
Enables communication between users to foster community interaction.
User Flow #1
Joining a conversation with other fans in "Chats"
User Flow #2
New Artist Discovery
Mid-Fidelity Wireframes
Community Page
Home Page
Community Page Cont
Group Chat Page
Mid-Fidelity Wireframes (Cont)
Chat Room
Mid-Fidelity Wireframes (Cont)
New Chat Creation
Mid-Fidelity Wireframes (Cont)
Menu - Discovery
New Artist Discovery
Artist Details Page
Moodboard
*
Moodboard *
Branding Overview
Brand Concept:
The brand identity for Riff is inspired by the captivating energy of live concerts, where the dark ambiance of the venue contrasts with the bright, dynamic spotlight on the stage. This essence of being immersed in music and light is captured in the color palette, typography, and overall design.
Brand Values:
Creativity
Exploration
Connection
Immersion
Color Palette:
The primary color (#EBFF58) and secondary color (#6FE2D4) evoke the feeling of bright stars against a night sky, symbolizing the electric atmosphere of concerts. The neutral tones (#06063A, #1A1A4D, #030321, #F1F0E6) provide balance, representing the dark, grounding backdrop of concert venues and making the vibrant colors stand out, just like a stage spotlight.
Brand Logo
Brand Style Tile
Hi-Fidelity Wireframes
Home Page
Chat Page
Chat Room
Hi-Fidelity Wireframes (Cont)
New Chat Creation
Hi-Fidelity Wireframes (Cont)
New Artist Discovery
Artist Details Page
Volunteer Page
Volunteer Detail Page
Profile Page
Usability Test Results
Success Metrics:
Task Completion Rate: 100%
Time on Each Task: Around one minute.
Ease of Use Rating (1 = difficult, 5 = easy): 4
Participants experienced varying completion times, but most found the tasks relatively easy, and the average rating was 4/5.
One participant highlighted confusion around terminology, specifically the use of "Community" to refer to chats.
The visual design received consistent praise for its appealing color palette and harmonious blending of elements.
Participants appreciated the overall look and feel, describing it as user-friendly and attractive.
One participant found the placement of the “New Chat” button inefficient, suggesting it should be more accessible.
The size of pop-up windows was deemed too small, with a suggestion to make them wider for better usability.
Iterations
Will change the wording from “Other Posts” to “Other Chats” in the Chat page.
Will make the top selection bar fixed, and visible while users are scrolling through the pages, so the buttons like “Add New Chat” will be more easily accessible for users.
Iterations Comparison
Before
After
Before
After
Final Design
Home
Chat Room
Discovery
Chat
Chat Room
Artist Details Page
Chat Room
New Chat Creation
Volunteer
Profile
Chat Room
New Chat Creation
Volunteer Details Page
Challenges and Key Learnings
Challenges
Addressing User Frustrations: Discovering pain points in fragmented information and translating them into intuitive solutions.
Iterating on Feedback: Balancing interconnected design elements, where adjusting one aspect often requires rethinking multiple components to maintain the app's cohesive vision.
Key Learnings
Iterative Testing Works: Regular usability testing helped refine the design and address usability issues effectively.
The Importance of User Research: Gained a deeper understanding of how early user interviews shaped design decisions and avoided unnecessary iterations later.