Shop sneakers
in a useful way

UX/UI

SYNC

share with ease

Break down barriers to music sharing with a revolutionary app that seamlessly connects music lovers across different streaming platforms.

VIEW PDF
featured app screens

The Backstory

Sharing Should
Feel Effortless

Music is a potent force that unites people. Globally, a significant majority (about 86%) share music with their loved ones. Regardless of whether you're using a laptop or a mobile device, sharing music should be straightforward.

holding key illustration

The Problem

Unheard and Forgotten

Some people subscribe to a music streaming service, create a playlist, and then switch to a different service, leaving the playlist behind. Others find it difficult to share songs or remember how much they pay for their subscription each month.

Listening to music illustrationListening to music illustration (mobile)

The Solution

How to Fix the Issue

By combining multiple accounts into a single app, users can share music from all of their accounts. However, there are three goals that need to be met to make this possible:

Three goals to achieve the final product.Goals for the solution (mobile)

Persona & Target Audience

Finding the Right Audience

Before starting the app design, I identified the target market and developed a user persona. This helped me to better understand the user's characteristics and needs.

One of three user persona's to help identify the target audience. A persona to help identify the right target audience (mobile)

One-on-One Interviews

What Do They Like and Dislike

Through in-depth interviews with 10 music lovers, I gained valuable insights into the features that matter most to users seeking a seamless music-sharing experience.

Key insights on sticky notes from each intervieweeTalk bubble illustration to highlight talking points (mobile)Interviewing one of the usersThe final results after completing all interviews
Final result from all the interviewees

Information Architecture

A Roadmap to Success

By creating a sitemap, I was able to bridge the gap between documentation and design, which improves the user experience by allowing me to modify content and workflow based on user needs.

A sitemap diagram for the final design. A sitemap to outline how the app will function (mobile)A sitemap to outline how the app will function (mobile)

Sketching & Wireframes

From Paper to The Digital World

As part of the design process, I crafted more than 30 wireframes, starting with simple sketches and progressing to low-detail mockups. These wireframes underwent multiple revisions based on user feedback before reaching the final set.

Some sketches to help with the visual design
Initial app screen (before A/B testing)Some sketches to help with the visual design (mobile)

Userflows

Unlocking the Flow

Once I created the wireframes, I was eager to test the app's functionality. I then aligned each user flow with the sitemap to get ready for user testing.

A few wireframes to showcase how the user will interact with the appA few wireframes to showcase how the user will interact with the app (mobile)A few wireframes to showcase how the user will interact with the app (mobile)

Feedback and Iterations

The Journey of User Feedback

Testing and iterations were conducted in rounds. Each group consisted of at least three users during these moderated experiments. As the testing progressed, new ideas began to surface.

Final changes (after A/B testing)
changes_sync
Some changes made after user testing (mobile)

Final Design

The Ultimate Music Experience

The UI elements, designed using both Figma and Illustrator, went through several iterations before reaching the final design. Each set of screens displayed below represents a feature of the app.

Song Share

Share Music Instantly, Across All Platforms

SYNC instantly alerts your followers when a song is ready to share. With just a tap, you can keep your followers updated and have all your favorite songs in one place.

share

Playlist

Add Songs to Playlist In Seconds

Tap the album cover to add or remove a song, or swipe up to view the entire playlist.

add to playlistAdd to Playlist - Final UI (mobile)
Featured image no.2

Chat or Broadcast

Socialize and Broadcast With Ease

The music player has messaging and live streaming built in. To go live, just tap the "LIVE" button and scroll up to see your followers. Once you're live, you can chat with them and share your favorite songs in real-time.

go-live and shareChat and Broadcast - Final UI

Manage Accounts

Everything in One Place

Easily handle all your accounts in one place. To view one, just tap the card for details or tap the [+] icon to link an existing account.

manage accounts
Feature Image #3

Themes

Customize Your Experience

You can customize the app by choosing one of two skins: DJ mode, which includes lyrics and a scrub bar, or radio mode, which has a standard layout.

The user can pick a different skin for the interface. The user can choose a skin for the interface

More Screens

Over 30+
Screens

Each interface, symbol, and component were designed to ensure easy and reliable sharing. You can view the entire user interface on Figma.

FULL INTERFACE
Among the many screens in the app are playlist loading, account sign-in, and loading screens.Among the many screens in the app are playlist loading, account sign-in, and loading screens (mobile)

The App

Check Out
The Prototype

I've assembled a prototype to demonstrate how the app will function. Please try it out and provide feedback if you wish.

VIEW IN FIGMA
click to view in Figma

Thank you

andrae.io