Soundstripe mobile app

Mar - July 2022

Soundstripe is a platform dedicated to providing high-quality music for creators of videos, games, and other media projects. Traditionally, our users licensed and downloaded music while at their workstations during the media creation process. However, we began receiving an increasing number of requests for a mobile app. To explore these requests, we set up several user interviews.

The Problem

Talking to our users, it became clear that even though our site was mobile-friendly, our customers needed more native control over the playback experience that’s not offered via the browser.

Our users wanted a way to discover and save music on the go. Whether at the gym, in the car, or busy with other activities, they still wanted to find music and build playlists for their projects.

Design Process

With our primary use case centered on enhancing search and discovery on mobile, I began by creating wireframes and developing a low-fidelity prototype for internal testing to validate our feature set.

Wireframes illustrating the initial layout and user flow.

Quick and dirty lo-fi prototype to test the user flow.

During this project, Soundstripe was also undergoing a complete brand refresh. This required additional effort to integrate the new brand elements into our UI patterns and update our design system.

We incorporated ABC Dynamo's Ginto Nord typeface—a choice we made a full 2 years before Spotify Mix 😉.

Hi-fidelity prototype used for internal validation.

Using Ginto Nord (which Spotify Mix is based on) before it was cool.

Hi-fidelity prototype used for internal validation.

Trying to systemize blur and gradient effects that look equally good in light and dark mode made me realize why Spotify doesn't even bother with light mode.

High-fidelity mockups for the welcome screen

Welcome screen explorations with the new brand.

High-fidelity mockups for the upsell screen

A few layout and branding explorations for the upsell screen.

As the engineering team started building, I applied hi-fi designs and branding to the prototype for further testing.

High-fidelity Figma prototype of Soundstripe app interface showing connected screens

Hi-fi prototype used as a reference for the engineering team and for stakeholder updates.

Spec sheet of player interactions

These days I rarely find myself needing to spec out interactions like this when I can just prototype them in Figma. For this project though, an engineer requested a quick spec sheet he could use as a reference and I obliged.

Hi-fi prototype of the homepage in dark mode.

A snappy 150ms transition for the player.

A unique aspect of music for video creators is their preference to see the waveform of a track before importing it into their project. Since we already had access to waveform data, I integrated it into the track-seeking interaction, replacing the traditional progress bar with a visual waveform.

Launch

After a few short months of development, we successfully launched the app. It was well-received, currently holding a 4.8-star rating on the App Store. We’ve also observed an increase in subscriptions from users discovering us through the mobile app.

That wraps it up. Feel free to reach out with any questions or comments. Thanks for reading!