Introduction

The design challenge of this sprint was to imagine a music streaming platform that had a basic free plan with advertisements, and to convert the users to an upgraded premium service. I imagined the app to be called Boombox, a bold, modern take on a ‘90’s vibe. Similar to Spotify, the free service lets users stream music with ads while the premium service can curate playlists for the user, recommend music, and allows the listener to download songs and make playlists of their own. I was able to design an interface for Boombox based off of secondary research, primary research, UX exercises, and usability testing.

Secondary Research

To start off the research process, I compared three of the primary competitors of Boombox: YouTube, Pandora and Spotify. I looked at how they accomplish their goals, what they do well, and what I liked and disliked about the interface. By looking at these aspects I could choose an ideal combination of traits for Boombox. 

YouTube was very successful with pop up ads, offered a free trial, had clear calls to action and attractive white space. Although, if the user did not choose to click on the pop up ad, it was hard to find again in order to access premium features. Spotify, on the other hand, had premium constantly visible. It also had multiple plans available for different needs, illustrations, and discounts for certain populations like veterans. The call to action buttons, however, could have been bigger. Pandora, similar to Spotify, also had multiple plans and discounts. The bullet points of reasons why to upgrade to premium was only available after a dropdown arrow was clicked.  However, that seems like an extra step many users may not take. From the comparison, it seemed like Spotify was the clear winner of user experience and interface. 

Primary Research: Survey

Once the secondary research gave me a direction to head in, I wrote a survey asking users about their habits and engagement with streaming services. Survey takers were asked to share how long and how often they listened to music, which service they used, and how much they paid for their service. Most importantly, survey takers were asked what would make them upgrade to a premium service. They were given options such as no advertisements, unlimited skips, curated playlists, etc., and were also given the chance to write their own reasons. 

Over 100 people responded and gave very useful information for Boombox. An overwhelming amount of people said they used Spotify, with Pandora as a second place winner, and YouTube coming in third. The immense popularity of Spotify in the survey led me to plan on being most inspired by their interface and experience when designing Boombox. Most users paid for music and paid between $5-10 monthly and many users paid more than $10 monthly.  This information allowed me to price the individual premium plan at $9, and the family plan at $14 monthly.

The number one reason by far that users switched to premium was to remove advertisements. The next few popular reasons were the ability to download music and to have playlists personalized for them. It was critical that Boombox have these features too, in order to compete.

Mood Board

Using all of the gathered data, I brainstormed and thought of what Boombox should look like. I wanted Boombox, like the name itself, to be reminiscent of the 1990’s style, while still remaining modern. I chose a  bright and contrasting color palette of magenta, orange, and charcoal gray. I wanted the style to be bold, colorful, and youthful. 

User Flow Map

With the mood board complete, I was ready to start designing screens but first needed to determine what the screens would do and which ones I needed. I designed a user flow map. A common pattern that users complete is called a user flow, while the most popular flows are called red routes. This user flow map demonstrates the informational architecture of those patterns. 

Mock Ups

Keeping the site map and mood board on hand, I then began drawing the basic digital mock up of each screen. The advantage of digital mock ups as opposed to paper sketches is that I was able to prototype them and test for functionality and flow. I gathered several users to test the app for pain points and inefficiencies before spending lots of time on design. 

Testing: Round 1

The first round of user testing mainly focused on navigation, as the aesthetics weren’t there yet. The testing went smoothly overall, but the users gave me several ideas on features to add or make sure that they stayed. Their feedback validated the survey responses in what features mattered most in premium services.  The other notable piece of feedback was to add a genre questionnaire in order to better recommend music to the user. 

Design

After testing, I was able to design the aesthetic of Boombox. I worked off of the mood board and the digital mock ups to create a colorful, bold, youthful user interface. I created two red routes: signing up for a premium plan, and playing a chosen song. I kept the interface clean from distractions, so as to emulate the bountiful white space of Spotify and Pandora. The goal of the design was to make the user feel like they were listening to their favorite artists at a live show.  

Testing Round 2 

With the high fidelity screens prototyped, I was ready for more user testing. For each round I had four users, some in person and some through a video chat. The pervasiveness of the COVID-19 virus impeded the testing greatly, and limited the amount of in person testing. The video chats often only permitted for limited views and didn’t provide as much information. 

Round 2 of testing exposed three main pain points: the color scheme was reminiscent of Halloween, the plan details page was plain, and several music genres were missing from the questionnaire. I was able to resolve these issues by changing the black color to a charcoal gray, adding more elements and font details to the plan details page, and adding the desired genres to the questionnaire. I also added an additional font to the screens to add more visual interest. 

Challenges and Lessons Learned

My main challenge this sprint was timing. It was by far the fastest I’ve ever completed this amount of work. My first capstone project I spent three months on the app design. For this second capstone I spent three weeks on the process. It was greatly expedited and required me to work efficiently. 

Each project I work on, I get a little faster and a little more adept at using the software. This particular project I was able to better use symbols, especially, in order to work more effectively. I expect that next time I will find more new ways to improve the quality and speed of my work.