SYNE 

Product Design for a Groovy New Audio Companion

TEAM

3 UX Designers

DURATION

3 Weeks

TOOLS

Figma, Figjam, Miro

MY ROLE

  • UX Researcher: Competitive & Comparative Analysis, A/B Testing, Prototype Testing

  • UX/UI Designer: Mobile App Settings, Configuration Flow, Art Visuals Library, Syne Screen Interfaces

METHODS USED

Competitive & Comparative Analysis, Persona Creation, Customer Journey Mapping, Site Mapping Feature Prioritization, Wireframing & Prototyping, Design System Creation & Organization, Usability Testing, A/B Testing

OVERVIEW

Meet Syne: A sleek new device for music lovers’ home or office.

Founder Gordon Droitcour has been a stage designer for artists like Billie Eilish, Kacey Musgraves, and Lauv. His vision is to bring the concert experience home with Syne, a sleek screen that displays content to accompany audio that a user is playing on their favorite streaming service.

To bring this new product to a stage ready for developer handoff, I worked on the foundational designs for the Syne display screen as well as the mobile app that controls it.

PROBLEM STATEMENT

Music listeners need a way to display album art without digging through their vinyl collection- album art on a phone is just too small to enjoy. Users who want a more sophisticated, three-dimensional, and informative streaming experience can use a Syne screen to display unique visual content. The Syne screen aims to enhance audio with custom animations and provide detailed information about songs, albums, and artists.

PRODUCT GOALS

MOBILE APP

  1. Create an intuitive home screen with controls for operating the Syne screen

  2. Settings options allowing user to adjust Syne screen and access a library of art visuals

  3. Configuration flow for users setting up their Syne device for the first time.

SYNE SCREEN

  1. Design interfaces for a tablet-like home device showcasing the following display modes: album art & artist, lyrics, album notes, and animated art visuals

  2. Perform A/B testing for multiple screen sizes/ratios to evaluate usability

The Syne screen displays album art and other visuals When a user starts playing music on a streaming service, they can select the Display Mode for their screen from the Syne mobile app. The Syne screen will update in sync with the audio currently being streamed.

RESEARCH

With a clearly defined product concept in place after our initial meetings with with our client, I was able to develop a persona to refer to as our target user as we continued to develop the Syne screen and mobile app.

PERSONA

USER FLOW

DESIGN

MOBILE APP UI

I was responsible for designing mobile app settings and the library of animations for the Syne screen’s “Art Visuals” mode. 

Users can select the animation that they would like displayed on their Syne screen to accompany the music they are currently streaming.

My goal was to create an appealing experience that would invite users to explore the library, allowing them to preview the animation they have selected on their Syne screen in real time. 

MID-FIDELITY ITERATIONS

HIGH-FIDELITY RESULTS

CLICKABLE PROTOTYPE: ART VISUALS

FULL MOBILE APP PROTOTYPE

FACING PRODUCT LIMITATIONS: SYNE SCREEN DESIGN

One of the fundamental ideas behind Syne is to replicate the classic experience of propping up a record sleeve and admiring the album art while rocking out.

However, achieving this vision would prove to be complicated in the manufacturing stage. A 5:4 ratio screen captures the record cover aesthetic, but is an unusual tablet size and expensive to manufacture. 

The more commonly available 16:9 screen ratio is much more economical and easy to produce. 

Keeping these restraints in mind, my teammates and I created different iterations of screen displays using both ratios during rapid design studio sessions.

We hypothesized that a 5:4 screen design would ultimately create the best experience for our users because of its striking visual impact, distinguishing it from other devices a user might already own in their home.

16:9 SCREEN DESIGN ITERATIONS

The 16:9 screen ratio allowed room for more text, like lyrics and album notes. However, it does make Syne look like any regular tablet or monitor and does not replicate the recognizable vinyl record cover look that our users might find more appealing.

5:4 SCREEN DESIGN ITERATIONS

The unique 5:4 screen ratio would make Syne visually distinct from other devices, and allows the album art to be the star.

DESIGN SYSTEM

When we first met our client, there were some basic elements outlined in a rudimentary style guide that would eventually influence the look and feel of the Syne screen and mobile app. These elements included basic logos, text, and some colors.

I worked with my team to expand the color palette, create logo variations, and most importantly organize the components that we had created during our design process into a full-fledged design system.

As Syne continues to evolve, this design system can be utilized by other designers to ensure visual consistency as more features are introduced to the product. It is a resource that can be adapted and refined over time.

STYLE GUIDE

COMPONENT LIBRARY

With a palette comprised of browns, greens, and Syne’s signature orange, it isn’t hard to see that the choices behind this style guide are meant to evoke the 1970’s.

Our client’s vision is tied to vintage aesthetics and nostalgic music experiences. The Syne screen is like an album cover that you might prop up on your record player. Funky fonts and colors were an essential part of solidifying this product’s cool factor.

TESTING

INSIGHTS

A total of 10 Usability Tests were conducted with going through 3 task flows: configuring their Syne for the first time, personalizing their Syne by changing Art Visuals, and adding a second Syne product to their account.

Below are some examples of the design changes implemented based on patterns and data observed during usability testing.

These test sessions also included A/B Testing of our various Syne screen ratio options. The feedback from our user testers

REFLECTION

This challenging design sprint taught me how to design a physical product and an app that work in tandem. It was beyond gratifying to know that my efforts will result in an actual fully realized product on the market- especially one that has such a unique niche to fill for fans of both music and tech. 

Almost all of the potential users that were involved in usability tests and anybody else who I discussed this product with asked, “When is this going to be for sale? Because I want one.”