Designing a platform where music, local involvement,
and connection fuse together
Spark FM is New England’s #1 Urban & Caribbean online radio station. The founder aims to empower underserved voices by providing a platform for local artists and to give back to the community through partnerships and service, as well as access to information and resources.
The goal was to transform the Spark FM app into a fun and informative product that went beyond just the music.
SKILLS
PROJECT
App redesign
TIMELINE
3-week sprint
TEAM
2 UX designers
CEO/Founder
Marketing & business
Developer consultant
ROLE
User researcher
Interaction designer
Visual designer
PROGRAMS
Figma, Trello, Otter,
Miro, Photoshop
THE BEFORE
Original app
THE AFTER
Final prototype
Process
KICK OFF
Learn more about Spark FM, define business objectives and constraints as well as create a plan of cooperation and communication.
Stakeholders interview
Statement of work
Discuss business goals
Project plan & schedule
Communication plan
RESEARCH
Empathize with users & understand their experience. Gather qualitative and quantitative data needed to make decisions.
Screener surveys
User interviews
Competitive & comparative analysis
Task analysis
SWOT analysis
Plus & delta
DEFINE
Analyze the collected data and identify user needs, compare with business goals, and define problem and solution statement.
Insight spreadsheet
Affinity map
Personas
User flows
Compare user/business needs
Problem & solution statement
Sitemap
DESIGN
Diverge on a myriad of ideas and find a solution that best addresses user problems and business goals.
Moodboard
Design studio
Sketches
Low to high fidelity wireframes
Low to high fidelity prototype
Visual design
TEST
Evaluate prototype with users and collect feedback to efficiently improve and iterate on the design.
Usability testing
Iteration
Problems with the original app
LIMITED CAPABILITIES
The ability to listen to Spark FM live was the only working functionality.
LENGTHY ONBOARDING
At 12 steps, the current onboarding was unnecessarily long.
OUTDATED LOOK
Our client was aiming for a fresher, more updated visual design.
I jumped into research by creating a screener survey to recruit the best candidates to interview
Since the app capabilities were yet to be determined, we wanted to talk to as many people who could possibly use the app such as:
Current Spark FM listeners
1
Caribbean and/or Urban music listeners
2
3
An artist who creates Caribbean and/or Urban music
Businesses who would advertise on Spark FM
4
Potential guests who might appear on Spark FM
5
User interview logistics
13 PARTICIPANTS
9 listeners, 4 artists & DJs
40-45 MINUTES
Average length
100% REMOTE
Zoom & phone call
With a robust research process, we aimed to reduce bias and strengthen our design foundation
Each team member recorded their interviews and noted key information. In an attempt to reduce bias and ensure we produced quality insights, one other designer also listened to a teammate’s interview and independently took down their own notes. We repeated this process in order for two sets of ears to have listened to every interview.
We then listed all of our insights in a spreadsheet, where we categorized each piece of information as a behavior, motivation, goal, value, and pain point before finding any patterns or trends in an affinity map.
Our insights grew rapidly and we narrowed our initial 900 insights down to 316 in order to eliminate repetition or unnecessary information, and synthesize the information in a much more manageable way.
Bold text indicates insights that were repeated by another user.
With 316 key pieces of information to sort, we categorized first and then found patterns
We initially organized our key pieces of information into four main categories: community & news, music (qualitative information), habits & behaviors, and general UI. We then grouped insights together and found patterns within each section, and later cross-synthesized across the various other sections.
After cross-synthesizing between all the sections, our team ended up with three new sections:
Who am I/What do I like?, What do I do?, What do I need?
After finding themes and patterns, we cross-synthesized between the 4 initial categories and 3 clear new groups emerged
I created our primary persona: A listener that places importance on connection and community support
We know that our users’ goals are to discover new music & local talents, support local DJs, artists and businesses, be more connected to others in the area, and stay up to date with community happenings.
We also created a secondary persona for the artist and DJs, but after further research, we found they would likely use a desktop to upload music. We found that the artists would not use the app in a fundamentally different way than listeners, so we did not design for this secondary persona.
The problem
Lenny needs a convenient way to listen and engage with Spark FM so that he can connect with and support others in his local community while accessing the music he loves.
Our solution
By designing a mobile application for Spark FM music content, as well as community engagement, we believe that Lenny will have a convenient way to access the music he loves while also staying informed about local news and feeling more connected to others in his area.
We found that user and business needs overlapped significantly
We compared users' motivations with the business needs in order to pinpoint where they intersected. These insights were top of mind for our team during the design phase.
Our research findings helped narrow the scope of our design
Using competitive and comparative analysis, business wants/needs and user wants/needs, our team concluded that Spark FM's first app version needed the following features:
Competitive analysis provided us with a better sense of typical onboarding standards
We found that other music apps had a 5-8 step onboarding process.
The original 12-step onboarding process was reduced to 7 steps in order to:
1. Stay within the range of our competitors;
2. Include username creation for our chat; and
3. Collect age and gender information for advertisement needs and for future, more personalized iterations.
iHeartRadio and TuneIn users were picking from multiple live radio options so some searching was required first, which is why there were 3 steps to reach live radio.
Our team opted for 1-step live radio access because:
1. Live radio was the most important feature for our users; and
2. Unlike our competitors, Spark FM offers only one live radio show at a time.
A design studio helped us brainstorm ideas
Three rounds of usability highlighted issues with navigation due to terminology and iconography
PROBLEMS
FIRST ITERATION
SOLUTIONS
2ND & 3RD ITERATIONS
PROBLEMS
SOLUTIONS
Lessons learned
Usability testing with your targeted user is key.
We conducted three rounds of usability testing. The first round was conducted with urban and Caribbean music lovers, but due to limited resources and access to listeners, they were not specifically Spark FM fans.
The first round of usability testing went smoothly with minor issues, but our second round of usability tests with Spark FM listeners was much different. In the future, I would try to test exclusively with users of the product and if the resources are low, try to find some other kind of incentive to obtain more participants.
Always check for accessibility!
As we began the visual design phase we discovered that the main colors in the brand guidelines were not accessible. We wanted to ensure all users were able to use the app easily and that our designs were inclusive.
To solve this issue, our team experimented with various shades and tints to increase contrast, while also changing some text to black rather than orange. Our team aimed to increase accessibility without compromising the visual design. We also worked to stay true to the brand and keep in mind the mood board I created as well.