Spark FM Case Study

The Spark FM Mobile Redesign

Spark FM’s unique approach to radio, that is not just about the music, is what has made them New England’s #1 station for Urban and Carribean music. However, there was a disconnect between their current mobile app offerings and all the resources Spark FM had to offer that made their users love about them. We embarked on a journey to solve this problem by creating a full redesign of the app.

My Role

UX/UI Designer
end-to-end: research, design, and testing

The Team

2 UX/UI Designers

Duration

1 month contract

The Methods

The Problem

Spark FM’s current app was in disarray. Filled with empty content pages and a live radio that rarely worked, leaving users to abandon it all together. Spark FM wanted our help to launch and cultivate their brand’s philosophy into a redesign that would create the ultimate user experience.

Users needed a convenient way to listen and engage with Spark FM, while also supporting and staying connected to their community.

More Than A Music App

The Goals

The high level goal for the project was to design a mobile app that would give users access to Spark FM’s music content while staying informed about local news and events – fostering community engagement. With a 3-week timeline in mind we had to narrow down what exactly that meant and what could be achieved.

The Deep Desire For Connection and Engagement…

User Research

My team was lucky to have access to a wealth of knowledge from the Spark FM marketing and business teams and an established user base to conduct user interviews. Our interviews helped us empathize with user needs, motivations and frustrations to guide us in shaping the solution. Digging into all the user feedback, we summarized key user needs from over 905 data insights.

Following our customer interviews, we synthesized our findings, created a user persona, compared the user needs with the business goals, and presented and discussed these findings with the client.

These exercises along with competitive and comparative analysis, formed a great foundation to move into feature ideation and prioritization.

More Than An MVP, But Not Spotify… Yet

Keeping the users and our 3-week timeline in mind, for the 1st version release, we narrowed down the potential offerings to those that would meet our users’ needs and satisfy our client’s goals. In order to make sure version 1 was realistic and financially viable, we consulted with developers to guide us along the way.

How Do You Make Music, News, Events, and Community Feel Seamless Together?

Information Architecture

Our greatest challenge was that we were basically tasked in designing the merging of two separate apps, one being a music app and the other being a community resource app. The music portion of the app needed to house the live radio, music content, and the chat feature. The community resource portion of the app needed to house news, events, and local business content.

The Music You Love. The Content You Want To See

Easily Navigate To The Content You Need

Due to a large amount of content available to users within the app, we faced some difficulties with our terminology and iconography in the main navigation and sub-navigation. Keeping future versions of the app in mind, our initial thoughts were to name sections with future content in mind. We were wrong with this approach, it created difficulties in the form of our users being unable to navigate the app without varying forms of confusion. We adjusted the terminology and iconography to cater to the content available in version 1 of the app. Our changes resulted in a vast improvement in ease for our users navigating the app.

A Focus On The Right Features

Feature Prioritization

Jumping off our IA foundation and previously determined features offered in version 1 of the app, we were able to focus our energies into ideating on what those key features would visually look like and how the user would interact with them.

Streamlined Onboarding

Jumping off of competitive analysis, I simplified onboarding from a 14 step process to 7 steps. This gave users the ability to quickly navigate through creating an account and get to the content they wanted.

Search Feature

With a large amount of information available within the app, allowing users to easily search for any content within the app was crucial. I created a simple search feature to help guide the users.

Easy Content Browsing While Listening To Music

Content browsing while still being able to access the play-screen was key to allow users to enjoy the app while listening to their favorite music. I developed a minimized music player that is easily accessible throughout the app while browsing.

A Chat Feature Redesign To Foster Engagement

Users longed for the days you could call in to talk to radio personalities live on the show. They desired to connect and engage with others in their community over their love for similar music.

Since Spark FM is a digital station, calling into a radio show live was not an option. Knowing their users’ desire to connect they offered a chat feature plugin via their web browser.

The Chat Room

The original chat feature was inconvenient to access and hard to navigate. We created a chat room for users to easily engage while streaming music

Three Players to Solve All Listening Needs

A problem we came across while designing the music player was what controls would be available and how would we adjust the design to showcase the different music content? The app needed a live radio play-screen, a specialized playlist play-screen, and a standard play-screen, all with their own unique controls.

Live Radio Player

Allow users to see relevant show content and easily access the chatroom

Spark FM Playlist Player

Standard playlist play-screen with customary controls that users are familiar with

DJ Curated Playlist Player

DJ playlists are specially curated as experiences meant to be listened to in the order created

For this reason, users have access to limited controls for these playlists

The Importance of Proper Terminology and Icons

Usability Testing

We ran 4 usability tests with current Spark FM listeners and streaming users. Based on the first two usability tests run, we noticed some issues with the information architecture. Users were initially confused with our choice of icons and our initial naming conventions, which were not intuitive for users to navigate through. After many iterations and tweaks, we ran our 4th and last usability test to confirm the changes to the IA we made were successful. We took what we learned from all the tests and created our final product for the client.

Test 1

It was not clear to users that “Browse” housed all the music related content.

Users were confused with the sub-navigation option of Creators. We were not sure if this confusion was due to labeling Artist/DJs as Creators or if the Browse section was leading them astray.

Test 2

Users were still confused even with the music icon update to “Browse”.

The new music icon also did not change user’s confusion with the Creators sub-navigation. Users defaulted to the Hamburger menu to find Artist/DJ content. It was clear the naming convention of Creators was flawed.

Test 3

Plain labeling and proper iconography made it clear to users where music related content was housed.

However, users still turned to the Hamburger Menu when in doubt of where specific content was housed.

Test 4

Once the Hamburger menu was changed to a Settings Icon, users only navigated to it when searching setting features.

We had finally landed on a version we felt confident to pass to production.

Outcome And Learnings

This was a really exciting and fun project for me to work on as it provided real value, involved a ton of research, design challenges, and teamwork. I learned some important takeaways from this project related to product and businesses processes.

Always fight for good UX and accessibility

We had to work with financial and technical constraints, but still fight for what we believed was essential for a good user experience.

With more time focused on research than the visual design, it was crucial for our initial version to follow accessibility guidelines and good UX principles.

Don’t over promise and underdeliver

The Spark FM mobile app before the redesign was a true MVP, but was not being utilized by the user because it was not meeting their needs.

We had to find middle ground between a MVP and a product with all the bells and whistles, that would be unrealistic to produce with the financial constraints.

There were many great use cases we could tackle with a rich feature set. However, every single one was costly or unrealistic. We had to determine where the real value was for Spark FM, and not spread ourselves too thin.

Currently in production

At the moment, Spark FM has not rolled out the updated experience to gather statistical data to validate the success of the new design. However, we received great feedback from the Spark FM stakeholders, who are excited to see the finished product launch to their users.

View Prototype