Otterr

Designing a playlist generator that helps people find new music and follow their friends' listening habits.

Click to play video

Overview

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 Problem

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 ↓

  1. Design a process that users can trust to be accurate with their music curation
  2. Design a product that provides users an easier way to find and share new music

The Details

This project took 3 months to complete – and was completed solo using Figma, After Effects, and Principle.

screenshots of apple music and spotify

Competitive Analysis

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 ↓

  1. There are no apps directly solving the problem
  2. Spotify and Apple Music offer curated playlists, but are non-customizable
  3. Both platforms are cluttered with too many features
  4. Both platforms have bland sharing experiences

User Research

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 ↓

  1. People prefer their own playlists due to customizability and refer to time spent creating as an unavoidable sunk cost.
  2. They are skeptical of "outsourcing their music curation".
  3. Users primarily find new music through friends.

Takeaways ↓

  1. The product has to be complementary to Apple Music and Spotify, not a competitor.
  2. Evident skepticism will require designing for trust.
  3. Users are not fully satisfied with the services they use and think music is a social experience that brings friends together.
image of interfaces sketches on ipad

Sketching and Ideation

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.

image of user flow wireframes

User Flows

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

The Creation Flow

Focusing on the experience through an immersive motion-filled flow that delights, but also notifies the user of available and preferred actions.

Click to play video

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.

Onboarding

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.

Click to play video

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.

Home Tab

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.

Click to play video

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.

Browse Tab

Browsing is modeled after Spotify's simplicity – allowing the user to easily sort through the noise to find what they like.

Click to play video

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.

Profile, Library, & Friends

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.

Click to play video

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.

Playlists & Sharing

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.

Click to play video

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.

Outcome & Reflection

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 ↓

  1. Conduct user testing to validate the solution
  2. Create a succinct brand and design language
  3. Spend some time designing this experience to be on the web
← Back to all work