1. Overview
Welcome and thank you for being here. In this article I will tell you about my second project made during the Ironhack Bootcamp.
The objective of the project is to develop a fictitious feature for a known application, based on an idea of one of our classmates.
The work is done alone without a team over a period of 4 days. The final product must be a set of high fidelity wireframes, covering the feature entirely or partially. We also had to build a medium or high fidelity prototype, to have the possibility to test it.
Throughout the project, I followed the design thinking process to define our users and develop my product. You can find in this article the details of my work process.
2. Project & Problem Statement
Project statement
The goal of the project is to design a feature for the Spotify application. With this feature, the user would have access to all radio station (internet radio, or radio frequency broadcasting on the internet) on a centralized function.
The idea for the feature was given by a classmate in this form:
“I want a feature allows users to choose and listen to any frequency from across the globe.”
Problem statement
After a quick user research step (detailed in part 5 “Process”), I included the experience of other radio users to establish this problem statement:
Millennials radio listeners
need a centralized and flexible feature to listen radio
because they cannot access easily to the radio on internet, and they cannot navigate between them.
3. Users & Audience
My target users are similar with Spotify’s user target, who are mainly define as “millenials”
I choose to define my users as “Millennials radio listeners”. We can define them as young peoples (between 20 and 35 years old) who listen regulary radio but without radio device (by phone or by computer).
4. Scope & Constraints
This project initially has very few constraints.
The first constraint was the form of the solution I had to propose. The final product of the project had to be high-fidelity wireframes, with a mid-fidelity or high-fidelity prototype.
The second is the time limit. Between the distribution of the statements and the final presentation, I had about three and a half days.
The project has been made alone. That constraint, added with the time constraint, forced me to make choices, especially on the app screen that I choose to focus on.
The potential next steps of the project are outlined at the end of this article.
5. Process
A- User research
Since the time allotted for user research was very short, I conducted 5 quick interviews with Spotify users. All of them have between 25–35 years old. 4 of them listen to the radio regularly, and one not.
The goal of the interview was to understand how and why they listen to radio. The questions focused on 5 areas:
- Context of use
- Reasons of use
- Pain points
- What they appreciate with radio
Results
None of my participants listening to the radio use an app centralizing their listening or use an analog radio. All of them goes through the different websites, and switches between them when they want to change radio.
As a result, I was able to define the following pain points:
- Find a radio on internet can be time consuming (no consistency between the different websites).
- They cannot easely switch between the radio (something they want to do quite often, to avoid a boring program or an add).
- They have no tools to discover new radio if wished.
Each of my participants was positive about using a feature to listen to spotify radio, explaining that it would certainly simplify their lives.
Moreover, I noticed a common point between all my participants, which I assume is shared by many people listening to the radio: they usually only listen to a few different radio stations. They can be found almost all the time at the same time on the same stations. This number of stations never exceeded 5 for my participants.
Problem statement
As indicated in part number 2, my research led me to establish the following problem statement:
Millennials radio listeners
need a centralized and flexible feature to listen radio
because they cannot access easily to the radio on internet, and they cannot navigate between them.
Functionality & Design
From this point, I listed the functionalities I wanted to include in my feature. For the design, I decided to stay as close as possible to the design of the Spotify podcast feature for ease of use and consistency.
Will be included in my design the features already included in spotify: favorite, playlist, recommendation, switch between stations, sharing, etc.
However, listening to radio has some specificities compared to listening to podcasts and music. This is illustrated by the presence of a defined program, as well as the limited number of stations a user want listen to. Language and country are also important, especially for people using radio for information.
The following features have been included in my design:
- Possibility to adjuste language and country
- Possibility to see the radio’s program and add reminder
- Possibility to add a quick access button for your favorite radios
B- Where to add the feature access
The access to the feature will be done in a similar way as the access to the podcast.
As for the podcast, radio stations could be recommanded on the first page or access on the favorite.
C- Early sketch & Low-fi wireframes
I started by listing the different screens that will be the base (Minimal Viable Product) of the “listen to the radio with spotify” experience. You can find the list here:
- Main Page (Page when you arrive on the feature)
- Category page (Page where the differentes categories are displayed)
- Radio playlist page (Page where we can navigate in a playlist)
- Player bar and page (The bar present on every screen when you listen to content on spotify, and the page associated)
- Radio station presentation page
- Program page (Page where you can see the detail of a radio program)
- Add a language and add a country pop-up
For the pages being similar with the design of the “podcast” pages, I drew low fidelity wireframes including the text and icons already defined.
For the UI elements or new pages, I first went through a rapid sketching stage to explore possible design ideas.
D- Mid-fi prototype
Based on my low fidelity wireframes, I designed a medium fidelity prototype on Figma. Here are the wireframes used as a basis for my prototype:
You can test my prototype directly here:
E- Rapid usability test
Based on my mid-fi prototype, I was able to test whether regular Spotify users could navigate my app and understand the new UI elements.
The test has been performed on 3 person, that use regulary spotify. They was between 30 and 35 years old.
I asked them to perform 3 task on an interactive. The task was to answer to the follwing questions:
- How to change the language of the radio displayed
- What do there is at the BBC after 18h?
- What do there is at NRJ at 20h20? Can you add a reminder in your calendar?
With these tasks, I could test the navigation design, as well as the interaction with the “programs” elements and choose its language.
The preparation of these tasks was done quickly, so I did not include a task testing the choice of country, as well as the user of the favorite shortcuts on the player. In consequence, I asked directly to the people what they expected from the interaction with these buttons after having done the tasks.
Results
Here is a summary of my results:
- There were no noticeable issues with navigation. This is easily explained by the fact that the participants were using spotify on a daily basis. Having participants who did not use spotify would have been a plus to test the robustness of the navigation design.
- The icon program has been easy understood by the users.
- The button to select the language was clear, but the participants had trouble guessing the function of the button next to it, used to select the country. So I changed the icon to one that seemed more meaningful. New test will be necessary to confirm this choice.
- The participants had trouble finding the function of the “add to calendar” button. So I changed the icon to one that seems more meaningful. New test will be necessary to confirm this choice.
- The participants tried several times to interact with the “bar program”.
I didn’t anticipate any interaction with this element, but because the design being similar to the other time bars on spotify (which are interactive), this affordance could be anticipated.
At this point, I established two new designs for this UI element. The first one is established for the case where the bar is interactive (to listen to a previous program for example). In this case, the program icon has been placed on top to avoid any miss click from the user (touching the icon instead of the bar).
The second design is established in case there is no interaction with the bar. In this case, I removed the dot on the bar to reduce the desire to interact with it.
The relevance of these two designs will have to be confirmed by new test later on.
E- High-fi wireframes
Taking these results into account, I built high fidelity wireframes. Due to lack of time, I could only make the unique design pages of my features, which are the page “Radio playlist page”, the “Player bar and page” and the “Program page”.
For comparison, here are some screenshots of the original spotify app:
6. Next Step
To continue my project, it will be necessary to map all the interactions implied by the addition of the “radio” feature, which also impacts the application’s pages (especially the favorites and recommendations).
The next step would be to finalize the high fidelity prototype, and to test it.
The process can then be iterated again, including more users in the different search steps.
7. Outcomes & Lessons
To conclude this project, I would like to highlight the interest that my user research had despite the low number of participants.
With only 5 interviews and 3 user tests, I got inspiration for the design, as well as feedback that allowed me to improve my design at the margin.
The hypotheses that emerge from these user researches would need to be confirmed by further research, but they illustrate the power of user research that, despite their small number, have significantly affected my design.
