Case Study #3 Spotify Kids
Adding a Feature to a native app
Design Thinking process including : Secondary Research / Qualitative Interviews / Affinity Diagram / Primary persona / Problem statement / HMW / User Flow / Low fidelity Ideation + Testing / Style tiles & Atomic design / Figma High fidelity Prototype / Prototype video.
Project Brief and Context
Add a Feature
For this third, Case Study at the Ironhack bootcamp I had one week to add a feature to an app. Having never worked on a music app before I decided to learn more about the subject by choosing to work on Spotify.
Focus on UI
The main focus was the UI and the experience of conducting UX research, Guerilla style. This Kind of research method can be useful in situations of non sensitive subjects with a limited budget and time-frame. This often means having to reduce the scope and/or rigor of the UX research.
User eXperience Design
UX research - Guerilla style
Guerilla style for me meant in part that I conducted research on many fronts simultaneously :
- Exploring the app and reading up on it on the web.
- Analyzing requests for features on the Spotify community forum.
- Considered personal pain point by looking to find if other people have the same or similar issues (Being able to exclude a playlist, that I prepared for my kid, from the algorithm that proposes mixes to me). But always keeping in mind that “I’m not the user”! : )-
- Interviews with parents on the larger subject of music, children and apps.
- Analyzing the competition and it’s features.
- Brainstorming
Guerilla style also meant that parts of this research did not make the cut to be worked into detailed reports or representations such as an competitive feature analysis or a refined brainstorming sketch, but the research was still part of the underlying context in the decision making and the direction taken.
Competitive Analysis
I first identified Deezer as the main competitor as they have very similar features (size of library, quality, recommended playlists & discovering music, lyrics…) and users often hesitate between the two.
Spotify distinguished itself by having more podcasts than almost any other service you can browse podcasts by topic, popularity, network.
Then I discovered that a lot of people are transitioning to Youtube Music as the quality of it is getting better and it has a larger media content and spectrum of use, all in one subscription.
So to stay competitive I challenged myself to Brainstorm on trying to expand the spectrum of use of Spotify with my added feature, all while staying true to it’s core subject : Music (meaning no video on how to repair your bike) ; )-
Brainstorming
Not knowing what direction to take for an added feature I start scribbling on a paper the existing features of Spotify; it’s strengths; direct branches of music like instruments and dancing;… It would have been nice to have had the time to refine this Note Taking Scribble that probably only I can decipher.
This said, it rapidly became clear to me (being a mother of a 3 year old) that I had a need to explore and research the relationship between parents, their children and musical apps. Which lead me to discover that Spotify created a standalone app, late 2019, called Spotify Kids. This confirmed my field of interest. What started up as working on the Spotify app ended up as work on adding a feature to Spotify kids : ).
Qualitative Interviews
I started by interviewing 3 parents on the subject of music and mobile application when it comes to their children. Then I expanded to +1 interview with a musician-educator for questions regarding learning through music (after parents had expressed their concern on education) and finally added towards the end of the time-frame 2 interviews combined with testing on children (age 9 and 11).
Finding appropriate subjects to interview and test, with little notice and within a limited time-frame, is one of the pain points in many UX designers journeys. Finding children I found was on a whole other level, but I made it!
Affinity diagram
By organizing my findings in an Affinity diagram I was able to distinguish some main areas of concerns.
The pandemic and the disruption it had in our lives came up although it was not an initial subject in the conversation. Concerns on keeping our children occupied, entertained, educated and of sain mind, where heightened.
Secondary Persona
The secondary persona for me shifted from first being the adult parent when considering Spotify, to being a child after having discovered Spotify kids and having had the opportunity to interview and test with children.
Please give a warm welcome to Marylou, our creative attention seeker :
Everything tied up nicely in the end and all parties (the child, the parent and the business) could be taken into consideration equally in the Problem Statement and the How Might We by the end of the design process.
Problem Statement & HMV
I worked hard on tweaking the wording of the Problem statement up until the very end so that it would reflect, in the most simple way the essence of all the data “chaotically” collected and soaked up during the week.
User flow - happy path
Scenario : Marylou opens the Spotify kids app to listen to one of her favorite songs that has been in her head for the last hour. When she goes into her favorite folder there is a pop-up message that indicates a new feature : An interactive playground menu with a recording on-top of a track option. She wants to try it so she chooses a song and hits the record button. A warning message tells her to use her headphones or an external speaker for better recording. She puts her headphones on and starts recording improvised spoken word on parts of the song. She listens back to the recorded track and at the end of it there is a message asking her if she want’s to keep the recording or delete it. She keeps the recording and there is a “Marylou’s Recordings” folder that is automatically added to the home page.
User Interface Design
After having created a user flow for an educational playground pleasing the parents, I sketched some screens, Ideating on the placement of the playground and on the icons that would represent the different actions combining music, entertainment and education.
Playground Actions v1 : Lyrics / Piano Notes / Guitar Chords / Drum Beats.
Testing on children
I tested the Low Fidelity Wireframes on 2 children and took advantage of their presence to do some qualitative interviews with them as well. This gave birth to a new and improved Playground.
Playground Actions v2 : Dance / Lyrics / Piano / Recording.
What happened was that the microphone icon with the note coming out of it (that was an icon option for the lyrics button) correctly identified by the 2 children initially, was interpreted later in the testing (by both children separately) like a microphone one could sing into and record.
Oh boy! did they get excited!!!
This also fueled the qualitative interviewing in a new direction. The data collected was precious and even though this was late in the process I iterated by adding the information into, the persona, the problem statement, and the user flow happy path. As I said, this was not a linear process and it did entail a lot intensive work to meet the deadline but I feel it was worth the effort : )
Style tiles & Atomic design — Native iOS
I started by recreating the style tiles and library of components & variants of the existing app in Figma. This helped me to create the new content and components following it’s scheme. I finally organized it into an atomic design system that enabled me to compose the final screens with ease.
I particularly enjoyed creating the “Marylou’s Recordings” Avatar from existing elements in the app and working on the warning messages and the onboarding pop-up (that helps you discover the new feature) by applying Nielsen’s heuristics for good practice.
Figma High fidelity Prototype
All this work lead me to the final High Fidelity Prototype created with Figma:
Prototype video
Next Steps
After the Recording option I would have liked to further develop and test the piano, dance and lyrics options of the playground. A Lyrics option that would need a variant for the “Audio for younger kids” section where reading is not a strong point.
I found that working solo within a small time-frame, forced me to be less linear in my design process and to iterate more. The work evolved differently and became for me a clear example of how important it is to listen and be guided by the data and not getting stuck on an initial idea.
Thank you for taking the time !
And a special thanks to Spotify for providing us with such great music experiences! : )
