Concert Connect — A UX Case Study
Introduction
Introducing ConcertConnect, a project designed for concert enthusiasts actively seeking connections with individuals who share their musical preferences. This project was a part of a 6-week intensive design sprint under Design Interactive, a student-run human centered design organization at UC Davis.
Responsibilities and Timeline
Research
Problem
Concertgoers struggle with navigating through disconnected platforms and connecting with others who share their musical tastes, leading to missed opportunities and experiences.
Research Goals
- Connection: How do you find others who share a similar music taste as you?
- Social Circle: Does anyone in your immediate circle (friends/family) share your music taste?
- Event Information: How do you typically discover upcoming concerts or live music events?
- Frequency: Have you attended a concert before? If so, how many have you attended?
- Potential Online Connections: Would you be willing to connect with other individuals who share your musical interests on an online platform?
Competitive Analysis
We began our research process by conducting a Competitive Analysis to examine the existing products in the market that address all aspects of the concert experience including ticketing apps, event apps, and social apps. Through our research we observed that our competitors had well-developed and curated event pages for users, along with social features like swiping to meet new individuals. However, many of them prioritized nurturing personal relationships over fostering an inclusive community-building atmosphere. Additionally, privacy concerns were prevalent across these apps.
SWOT Analysis
To further assess we conducted a SWOT Analysis. We founds strengths within our demographic as young adults are frequent concerts and more trend conscious. However, existing platform’s weaknesses included insufficient music preferences and social compatibility details in user profiles, as well as limited interactive features leading to low engagement. Opportunities arise from the familiarity with online communities and the potential for our platform to cater to concert enthusiasts who seek new connections. Lastly, threats included competition from already established social media platforms and the need to incentivize user engagement.
Survey
Diving further into our research our we created a survey with our main goal in mind which was to further explore how individuals connect and coordinate with others when attending concerts.
- Through our survey we received 41 responses from university students
- We then followed up and conducted 7 user interviews
- Then through the data discovered that 87.9% of our respondents had gone to more than one concert
Survey Results
Upon receiving our survey results our three main takeaways were that despite a majority of our respondents sharing similar music preferences with their close friends and family, 79% still reported to have nobody to attend concerts with. Lastly, through our survey we discovered that 97% were open to exploring new connections with others who share their musical interests.
User Interviews
Stepping into our user interviews we were focused on diving deeper into personal connections and potential online communities. Through interviewing we discovered that there were concerns about catfishing, inconveniencing people when making plans, feeling the burden of putting in more effort when forming in-personal relationships, and gaining the comfortability to meet new online friends in-person.
After conducting our research we identified a new problem and came up with three HMW statements to guide us as we continued to design our project.
New Problem:
Current social media platforms do not offer features specifically designed to facilitate concert-related connections and lack a sense of community, safety, and personalization.
HMW Statements:
- How might we ensure the privacy and security of our users?
- How might we offer community features?
- How might we offer personalization through recommendations and allowing users to customize their profiles and preferences?
Ideation
We started by creating sketches on our own. Once we got together and compared sketches, we ideated what were the strengths and weaknesses of each sketch. From there, we white-boarded a couple sketches integrating our strengths from each sketch. We also created 2 personas of users who’s values most closely align with the goals of our application. During this whiteboard session, we also ideated what the user flow would look like.
Using these personas, we envisioned what the most ideal state for these users would be and how they would get there. We used our findings to create the HMW statements that were addressed above
Using the HMW statements and all our previous work, we narrowed down the most important features that users would need in an application of this caliber:
- A home page showing the most relevant events based on location (with the users consent)
- A feature that shows the closest people who are also attending the same event, this would connect users together and encourage them to find a way to attend the same concerts together.
- A profile page that users can go to to see another users personality, top artists, mutual friends, etc.
- A communities page that allows users to join different channels to connect with the same fans all around the world.
Taking these insights, we moved on to the Mid-Fi wireframe & prototyping stage.
Mid-fi Prototyping
During our mid-fidelity prototyping phase for ConcertConnect, we transitioned from initial sketches to digital frames with a clear, methodical approach. Our process included the following steps:
- Ideation and Sketching:
- We began with brainstorming sessions, where each team member contributed ideas and sketches based on our initial concepts. These sketches served as the foundation for our design.
2. Consolidation of Ideas:
- We held group meetings to review and discuss the sketches, consolidating the best ideas into a cohesive plan. This involved prioritizing features that users had suggested, such as personalized events and communities, meaningful connections with community members, and ensuring user privacy and security.
3. Digital Translation:
- Using design tools like Figma, we transformed our selected sketches into mid-fidelity digital frames. This step involved creating wireframes that incorporated general spacing, color schemes, and component layouts. At this stage, consistency was secondary to ensuring that all key features were represented.
4. Refinement for Usability Testing:
- The mid-fidelity frames were further refined based on initial feedback and internal reviews. These frames were then used in our usability tests to gather detailed user feedback and insights.
Bringing Ideas for Problem Solutions into Product Features
Our approach to converting problem solutions into concrete product features was strategic and collaborative:
- Identifying User Needs and Problems:
- We collected user feedback through initial research and sketching phases, identifying key problems users faced. These included difficulties in discovering personalized events, connecting with community members, and concerns over privacy and security.
2. Prioritizing Solutions:
- During our mid-fidelity prototyping sprint, we prioritized the features that addressed the most critical user needs. This ensured that our solutions were user-centric and focused on enhancing the user experience.
3. Collaborative Design Sessions:
- We conducted several group discussions to review our designs for fluidity and collaboration.
Overview
During the usability testing phase for our mid-fidelity prototype of ConcertConnect, we focused on several key tasks to understand user interactions and gather comprehensive feedback. Our script included the following tasks for the users:
- Navigation Bar Interaction:
- Users were asked to navigate through different sections using the non-traditional icons in our navigation bar.
- We observed their ability to identify and use these icons to access various parts of the app.
2. Messaging System:
- Users were prompted to toggle between Direct Messages (DMs) and community chat groups.
- We assessed their ease of switching and understanding the interface for messaging.
3. Overall App Interaction:
- Users were guided through the main functionalities of the app, including event discovery, ticket booking, and user profile management.
- We paid close attention to their feedback on the overall cohesiveness of the design elements such as colors, spacing, text size, and button placements.
4. Visual Design Feedback:
- Users were asked to provide their impressions on the visual design, specifically focusing on the use of gradients and other stylistic choices.
Findings
From the seven usability tests conducted, several recurring themes and patterns emerged:
- Confusion with Navigation Icons:
- Users found the non-traditional icons in the navigation bar confusing, making it difficult to discern what each icon represented. This feedback highlighted the need for more intuitive and recognizable icons.
2. Issues with Messaging System:
- The process of toggling between DMs and community chats was frequently mentioned as confusing. Users suggested a clearer layout to distinguish between private and group messages.
3. Lack of Cohesiveness:
- There was significant feedback on the lack of cohesiveness in the app’s design. Users pointed out inconsistencies in colors, spacing, text size, and button styles, which affected the overall user experience.
4. Overuse of Gradients:
- Many users found the prevalent use of gradients overwhelming. They recommended using gradients sparingly for important features or as subtle accents to avoid visual clutter.
Demographic Makeup of Participants
The participants in our usability tests were diverse, representing a range of ages and technical proficiencies. The demographic breakdown was as follows:
- Age Range: 18–45 years
- Gender: A mix of male, female, and non-binary participants
- Technical Proficiency: Included both tech-savvy individuals and those with average technological skills, providing a broad spectrum of user feedback.
Contribution to Understanding User Needs
The usability testing sessions were instrumental in helping us refine our design to better meet the needs and preferences of our target users. By observing how users interacted with the prototype, we identified both successful elements and areas requiring improvement. Patterns in user feedback, particularly regarding navigation and visual design, guided us in making our designs more user-friendly and cohesive.
These early findings were pivotal in reshaping our prototypes. We focused on improving the intuitiveness of the navigation bar, clarifying the messaging interface, and ensuring a cohesive visual design. The feedback and results from these sessions have set us on the right path towards refining our high-fidelity prototypes, enabling us to fine-tune the small details for an enhanced user experience.
Hi-fi Prototyping
Logo
- Our logo represents our goal of connecting people in the music community together. It shows two people holding hands as they listen to music.
Colors
- We transitioned away from our gradient-heavy design to our final color palette.
- We decided on a dark theme over a light theme, as it would be easier for users to read during their night-time concerts.
- Additionally, the purple and teal colors we chose resemble the lights that appear at concerts and exude a social and comforting atmosphere.
Font
- We chose DM Sans for its modern and friendly look.
Onboarding
Users expressed a need for a safe and personalized platform ****to connect with others. Through our onboarding process, users must verify their identity and are given the option to provide their musical preferences for a more tailored experience.
Users can:
- Create an account
- Verify their identity (Photo and ID verification)
- Take a personality quiz
- Express musical preferences
- Connect social media
Home
- For the home page, we wanted to create a personalized and centralized hub for users to find information.
- From our user testing, we found that the bright colors were confusing and difficult to navigate. The final homepage has a clean and easy-to-use design.
- On this page, users can view upcoming events based on their location, and see recommended communities and events.
Swiping
- Another way that users can personalize their experience with our app is through our swiping page. Users can decide whether or not to connect with others by swiping through different user cards.
- Each user card contains information about another user, including the information gained from onboarding (favorite artist/music genre, music compatibility, etc.)
- There are two ways for users to connect with new friends:
- Clicking on the connect icon in the purple ribbon
- Responding to specific prompts on the user card
- Additionally, for further personalization, users can filter through these cards based on age, location, musical preference, etc.
Chats
- The chats page is a place for users to see all of their connections in one place.
- Users expressed that the toggle button (between the direct messages and communities page) in the mid-fi stage was confusing and difficult to locate. We opted for a tab-like navigation bar instead for clarity.
- The new chat page features include:
- View all music communities
- Discover new communities
- Respond to direct messages
- Share events, communities, and badges with friends
- Approve or deny friend requests (as received through from the swiping page)
Profile
- Users can edit their profile for their community members to see. On this page, users can add posts to share with their communities and see the badges they have earned. Event attendance is also monitored on this page: users can add their externally purchased event tickets to their profile.
What are Event Badges?
- Badges were our way of incentivizing users to stay on our app. To distinguish ourselves from other social and music apps, we gave users the chance to earn badges, earned only by attending certain events.
Presentation Day
After our 6 week journey, we presented our project to Insun Anh, a Product Designer at Facebook. Insun provided us with some helpful feedback, which we are hoping to incorporate into our future designs. Here were a few takeaways:
- Insun liked the user authentification portion of our onboarding section, as it addressed a major user concern regarding online safety. She wished that this issue was also addressed in other parts of the app, like including a block/report features on the chats page.
- Insun also brought up the comprehensive nature of our app. While it was nice for users to have access to several features at a time, it could get hard to keep track of, and users might lose sight of the purpose of the platform. Instead, she suggested to narrow down the most important features and let those shine the brightest.
Challenges
- Understanding and integrating user need with the project ask
- We initially thought users would like a platform that highlighted music events and community bonding. When users expressed a greater need for personalized connections, we had to pivot in our design.
2. Narrowing down the necessary features
- We had a lot of ideas on how we wanted to address the user need. We took some time deliberating and combining and cutting out various features.
3. Building consistency across designs
- With four different design voices, we worked together to ensure that our pages looked cohesive. As a team, we established a clear design system and provided continuous feedback about each other’s designs.
Next Steps
- Refine existing features
- As our judge, Insun, expressed, we would like to work on making sure each of our features provide the most benefit to our users, whether that be taking out unused features or highlighting more important ones.
2. Further developments
- Additionally we would like to provide users with tools that will improve their experience with our app. This might include push notifications for mobile, a step-by-step interactive tutorial, etc.