Designing a playlist generator that helps people find new music and follow their friends' listening habits.
The leading music platforms, Apple Music and Spotify, are great for streaming, but finding and curating music is not a great experience. This is because they are cluttered with multiple different features like TV, Podcasts, and Radio, which makes finding and curating music not a priority.
Otterr was a student project sparked out of a problem in my personal life. Being passionate about music, I wanted to turn this into an opportunity to practice my visual design, animation, and design thinking skills.
The processes of creating playlists and finding new music are broken, inefficient, and outdated. We also rely on text messages to share our music with friends. The truth is, it should not take hours to curate and share music.
How might we ↓
This project took 3 months to complete – and was completed solo using Figma, After Effects, and Principle.
I conducted a competitive analysis to scope out the space and discover possible opportunities. I was looking to find products solving a similar problem and analyze how they created a solution → solely to find insights to create a better experience with Otterr.
Findings ↓
After setting the foundation for the product, I chose to conduct user interviews with people in the 16 - 28 age demographic in order to uncover insights and learn more about the music consumption habits of the target users.
Findings ↓
Takeaways ↓
Once I had determined the focus scope of the product and uncovered some design challenges and goals to keep in mind, I chose to sketch out my ideas to better visualize the solution.
I worked through various design problems through a user experience perspective. Ideating around the tab bar, certain user flows, and onboarding activation.
After sketching I wanted to focus on the core experience and differentiator – the creation process. I chose to create a flow diagram in order to look at the process holistically to find opportunities for improvements.
When looking at the flow holistically, it was evident that there was a lot of unnecessary elements. Asking questions like “what can be removed?” instead of added, led to a simple and easy process in 3 screens not 6
Focusing on the experience through an immersive motion-filled flow that delights, but also notifies the user of available and preferred actions.
An immersive experience, this is not just another tab. The creation process is meant to be a focused experience from start to finish.
Removing unnecessary actions. Users can easily pick their desired settings on one screen. Thoughtful structure and motion makes this delightful.
Utilizing depth and spacial consistency to ensure the user knows where objects belong. This allows for animation to aid in functionality and not distract.
With only one chance to make a good first impression, I wanted to create an immersive experience that the user will remember from the start.
Onboarding is a key opportunity to set the tone for the product experience. I wanted to create a thoughtful and intentional introduction to the experience the product provides.
Highlighting the three core experiences within the product paired with visuals that emphasize what lies behind sign-up. Thoughtful motion, spacial consistency, and easing keep the user focused on the experience.
By logging in with your music platform, we remove the need for preference questions. Otterr can pull your habits to show what you like right away.
Going directly against the standard set forth by Apple Music and Spotify, I wanted to design a home screen free of clutter – focusing on one goal; helping users find new music they will like.
Simple presentation of popular playlists right when you open the app keeps the user focused on finding new music quickly.
Thoughtful motion when opening playlists to create a delightful experience for the user – a reminder that the focus of the product is the music.
Browsing is modeled after Spotify's simplicity – allowing the user to easily sort through the noise to find what they like.
Placing all of the elements behind a button reduces the clutter on the interface – highlighting the users interests at the top.
Improving the standard search experience, automatically prompting certain recent searches and interacted elements.
Individual category UI where users can find specifics in a simple and easy way.
Not as flashy, but wildly important. This is where users can keep up with friends, groups, and their own music. These few screens are meant to be the hub of a main solution Otterr provides.
A simple profile that focuses the user on whats important – the music.
Library with thoughtful interactions and focused content. No fluff, just a place to for users to find their music.Groups and friends allow for a new music experience.
No more sending music over text, user can find what their friends are listening to in one place.
The research brought forth the insight that sharing music is an experience that people hold highly valuable and no apps do this well. I wanted to create an experience that promoted sharing and fostered the connection between friends and their music.
Users can preview songs, Otterr is not meant to replace their streaming platform, the main actions are sharing and exporting.
Creating a thoughtful sharing experience. Sharing music is a core part of a lot of our friendships, Otterr provides a fun and shareable experience for new music.
Exporting is also a core feature key to Otterr’s success and engagement. If users are exporting their playlists to their streaming platforms, Otterr will grow, making this experience crucial.
This project was a student project that quickly turned into a passion project. I was able to dive deep into my interests of motion, animation, and different UI techniques.
If this was a real product being shipped, I would focus on two metrics: onboarding activation, how quickly we get users to create a playlist, and number of playlists exported / shared – if playlists are being exported then users are satisfied with the product, sharing and exporting it, creating a possible network effect and organic growth.
Here are a couple things I would do differently ↓