Social Sync

App Design UX/UI UX Research Interaction Design

A platform that empowers music lovers to discover local events, coordinate with friends effortlessly, and enjoy memorable weekends together at their favorite performances.

The Problem

Music event attendees love going to see their favorite artists with friends but often face challenges in planning their outings. Many struggle to discover local events, coordinate schedules, and share event details seamlessly with their group. How might we help music lovers who find it difficult to discover and share information about local music events easily plan and enjoy their weekends together?

The Solution

Social Sync is a platform that empowers music lovers to discover local events, coordinate with friends effortlessly, and enjoy memorable weekends together at their favorite performances.

Our Roles And Tools

UX Research: Victoria, Tazkira, Ana, and Brad
UI Design: Victoria
Tools: Figma, Adobe Creative Suite

01 UX Research 02 Ideation03 Prototyping 04 User Testing class05 Final UI Design

01 UX Research

To create a product that truly resonates with its target audience, it was essential to start with a deep understanding of the people who would use it. This began with user research, which served as the foundation for uncovering the motivations, goals, and challenges faced by potential users.

Finding Our Problem Space

To give direction to our project scope, we decided to start with a competitor analysis of existing music apps. By seeing if there was a gap in the market, we could narrow down what problem needed solving. We noticed that while some excel at personalized recommendations, they often lack tools for group planning and coordination. Others prioritize social features but fail to highlight niche or local events. This revealed an opportunity to create a platform that combines tailored event suggestions with seamless group planning to address unmet user needs.

Guiding Our Research

Through interviews, and behavioral observations, we sought to uncover insights into how people discover, attend, and share music events. Creating user personas was a pivotal step in synthesizing this data into actionable profiles. Developing user personas allowed us to identify key insights into the motivations, behaviors, and challenges of our target audience. We were able to paint a comprehensive picture of the diverse ways people engage with music events.

Interviews & Research Plan

Research Problem
Following the development of user personas, we identified a core research problem to guide our interviews: music lovers want to discover and attend events with friends but often struggle with the planning process. They face challenges like coordinating schedules, finding relevant events, and managing logistics seamlessly.

With this in mind, we approached the interviews with three key objectives: to understand how users currently find and plan music outings, identify pain points in their coordination process, and explore what features would best support an easier, more enjoyable planning experience.

Objective 1
As user researchers, we want to know what difficulties people who attend music events face when trying to plan their outings.

Objective 2
As user researchers, we want to understand how music event goers connect with friends to plan and attend events.

Key Takeaways

We interviewed 7 people, from which we discovered key points related to planning and attending social music events:

We discovered there were major pain points around finding local events.
Many struggle coordinating and planning with friends.
Dividing up payment with friends is never efficient
There is too much back and forth with planning across many platforms
Hard to get all friends on baord and relay information

“There’s a lot of back and forth between thousands of links we send each other on group chats, it gets confusing”

- Vanessa

“I wish there was actually a music platform that would recommend musicians that are similar to the ones that I already like which would allow me to discover new music”

- Julie

So what’s the problem?

In other words, our users were experienced enough that it wasn't their physical strength holding them back from their best performance, it was their mentality! This is what I focused on to make our user persona, Taylor; to clarify why she climbs and her need for staying mentally positive and getting in the zone for her climbing sessions; and to keep us on track for the rest of the project.

02 Ideation

After all this research, it was time to plan out the core structure of our mobile application.

Feature Matrix

After conducting extensive research, we outlined the key features we wanted to include in the app to address user needs effectively:

Group Event Features - Simplify the planning process by enabling users to coordinate outings seamlessly with friends.
Chat Features - Provide a built-in communication tool to make event discussions more convenient without switching platforms.
Personalized and Local Recommendations - Tailor event suggestions through an onboarding questionnaire to ensure they align with user preferences and location.
Interactive Maps - Allow users to explore event locations visually, view nearby venues, and plan routes for easy navigation.
“See Where Your Friends Are Going” Feature - Foster social connection by letting users discover events their friends are attending.

These features collectively create a platform designed to make discovering and planning music events effortless, enjoyable, and socially engaging.

Creating User Flows

Creating user flows based on the feature matrix was a critical step in transforming our outlined features into actionable user experiences. By mapping out each feature, such as group event planning, chat functionality, personalized recommendations, interactive maps, and the "see where your friends are going" feature, we visualized how users would interact with the app from start to finish. These flows helped us define entry points, decision-making paths, and outcomes for various scenarios, ensuring that each feature integrated seamlessly into the overall user journey.

Storyboard

03 Prototyping

Turning user flows in to sketches

To bring the user flows to life, I began by creating sketches of two iterations of the app pages, focusing on layout, structure, and feature placement. These sketches allowed me to explore different design approaches and refine the flow based on feedback and usability considerations. Once we were satisfied with the overall design and navigation, I transitioned to low- and mid-fidelity prototypes to test the functionality and interaction patterns in greater detail. These prototypes provided a clearer vision of the app's user experience and allowed for iterative improvements before moving to higher fidelity designs.

Iterations for chat page

Iterations for search pages

Iterations for profile pages

Iterations for ticket pages

Iterations for your groups pages

Iterations for login/sign up pages

Iterations for purchased ticket pages

Iterations for event pages

Low-Fi Prototypes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sit amet massa at pharetra. Vestibulum eu lorem sit amet elit fringilla convallis luctus in elit. Cras molestie augue nec enim tincidunt convallis. Suspendisse nec sollicitudin ex. Fusce venenatis arcu sem. Aenean quis lorem a velit interdum consectetur ut sed risus. Curabitur lacinia sollicitudin libero vitae tempus. Praesent vulputate sapien venenatis lobortis semper.

Mid-Fi Prototypes

04 User Testing

User Testing

We did some utsability tests to learn if users can intuitively interact with our app and what improvement, if any, we can make to make it easier for them to navigate.

TASK 1: Buy a ticket to an event
TASK 2: Create a group event
TASK 3: Check if all of your group members have purchased their ticket
TASK 4: Chat with one of your group event members
TASK 5: See your ticket and group information

Results and considered iterations

Improve the group event information (make clearer who are going, status of ticket, and ability to chat with members)
Add send ticket to a friend option (in case you purchase tickets for the group)
On click person icon pop up
Events near you should be a map (like airbnb)
Add more features to the chat (see everybody ticket status and rsvp to the event)

05 Final UI Design

A nightlife-inspired UI blending moody greys, vivid pink accents, and glassmorphism creates an immersive, energetic design that feels as vibrant as the events it showcases.

For the final UI design, the goal was to establish a vibrant and immersive "nightlife" tone that would resonate with music enthusiasts and event-goers. To achieve this, I built the visual identity around a sleek palette of greys, evoking the moodiness and sophistication of nighttime settings, paired with pops of vivid pink to bring energy and excitement to key interactive elements. This balance of muted and bold tones created a dynamic aesthetic that felt both modern and engaging.

To enhance the visual appeal, I incorporated design techniques like glassmorphism, layering translucent elements with subtle frosted-glass effects to add depth and sophistication. This gave the interface a polished, futuristic look while maintaining readability and usability. Rounded shapes and gradients were used to soften the design, making it feel inviting and user-friendly, while glowing accents on buttons and hover states reinforced the nightlife vibe.

Feature 1

Personalized Recommendations Tailored to Your Music Preferences
Our sign-up and onboarding process is designed to capture your unique taste in music, ensuring every recommendation is truly personal. Users can connect their favorite music platform during sign-up, allowing the app to sync with their listening history.

Feature 2

Simplified Group Event Planning and Build-In Chat

Easily plan and coordinate events with your friends. See which friends are attending and create groups to streamline communication and organization, making it effortless to enjoy events together.

Feature 3

Interactive Map for Event Locations

Navigate events with ease using our integrated map feature. Quickly find event locations, nearby amenities, and explore the area to make your experience seamless and stress-free.

Feature 4

Seamless Ticket Purchasing

Buy event tickets directly within the app, all in one convenient platform. Skip the hassle of switching between apps or websites and secure your tickets effortlessly in just a few taps.fy

Branding & Style tile

The style tile defines the visual identity of the app, blending modern aesthetics with a vibrant, nightlife-inspired theme. The color palette features a bold pink as the primary accent, paired with a range of greys to create depth and a sleek, sophisticated look. Typography is clean and modern, ensuring legibility and a polished design across all components. Button states are designed with clear interaction feedback—default, pressed, and disabled states—using contrasting colors and rounded edges for a user-friendly experience. The navigation icons align with the overall aesthetic, utilizing minimalist line designs to maintain simplicity and clarity. Input fields and dropdowns incorporate subtle glassmorphism effects and clear error states for improved usability. Together, these design elements create a cohesive, energetic interface that embodies the vibrant culture of live music and nightlife while maintaining functionality and accessibility.

Back
Home