Vibebin
Listen endlessly to any song of your choice
Company
Personal Project
Tools
Figma
Role
UX/UI Designer
Timeline
2 Weeks - 4/2023
Background & Motivation
This project was conducted based on a design challenge from Springboard in order to simulate what it's like to work in a real world context. Vibebin is not a real application and all research was documented outside of this challenge.
Vibebin is a startup company that has launched a media product two years ago. It is a freemium model that has a web experience and a mobile app for both iOS and Android. The company’s business strategy was to first build a user base by offering a free product and then evolve the feature set so they could monetize on a premium (paid) product. At this point, the product has been well received and has a healthy user base of free users. They now need to design an experience that will allow users to subscribe and pay a monthly fee. Our goal is to identify the pain points users have when interacting with media player apps and how we can create a better experience while monetizing.
The Problem
Currently, Vibebin is a media product that allows users to listen to music wherever they are. However, this is the current state of the app:
-
The existing signup flow does not have a call to action upon registration that gives the user the opportunity to subscribe.
-
The existing flow does not have prominent calls to action throughout the free experience that gives the user the opportunity — or a compelling reason — to subscribe.
-
By creating a paid product with better features than the free experience and giving users the opportunity to upgrade to a better product, users will pay the subscription fee. This will lead to a profitable revenue stream.
My Role
As the sole designer for this project, I was responsible for all aspects of the UX and UI design. This included conducting market research, performing user research, and evaluating the product at every stage of development. Additionally, I oversaw the entire product development process, from sketching initial concepts to creating high-fidelity mockups, prototyping, and implementing the app for user testing.
Solution
Utilize the company's current user base of free users and design an experience that will allow users to subscribe and pay a monthly fee and enjoy a premium version of the app.
Business Goals
-
Create the opportunity for new users to subscribe to the premium product upon registration in the signup flow.
-
Create the opportunity for returning free users to become paid subscribers in the sign-in flow as well as within the product (once logged in).
User Research and Competitive Analysis
I began familiarizing myself with the project scenario by understanding the problem and defining the objectives the one-man team will tackle. Springboard provided the company context that contained their target audience, brand information, and business goals they would like to accomplish to assist me in understanding their product and users.
I started off creating a project plan to help establish a clear roadmap for how I'll approach my design project. This plan allowed me to stay organized and strict with working in a compressed timeline and allowed me to become proficient at time-boxing my work.
I analyzed industry leaders, including Youtube, Spotify, Pandora, and Soundcloud, to learn from their approaches and improve the user experience. I conducted competitive analysis to understand their sign up/sign in processes and how they promote their premium product to users. This helped me to lay the foundation for my own approach and improve our media product's design experience.
Here is what I found:
-
Sign-up/sign-in flow is easy, requiring only basic information, and all apps prioritize inclusivity and user safety.
-
The home screen displays preferred music, with minimal UI designs.
-
Youtube and Soundcloud have vast music libraries, while Spotify and Pandora mostly offer official versions of songs.
-
Free versions have ads when skipping songs and no offline music access.
-
Upgrading to premium versions provides ad-free and offline access, with easy prompts to upgrade.
-
UI designs are simple and aesthetically pleasing, providing an enjoyable user experience.
Information Architecture
After conducting user research and completing competitive analysis, I moved to the first design phase: information architecture and low fidelity.
User Flows
I created user flows based on Vibebin's business goals which lead me to design four main user flows.
Flow 1: Sign in/ Sign up
-
Scenario 1: First time a user wants to register
-
Scenario 2: A user wants to sign in to access the app
-
Scenario 3: An existing user accidentally deletes the app and wants to log in with the reset app
Flow 2: Finding a song to listen to (Home Page)
-
Scenario 1: First time a user is using the app
-
Scenario 2: A user wants to listen to a song
-
Scenario 3: An existing user wants to discover new artist, albums, playlist, etc.
Flow 3: Identifying an unknown melody
-
Scenario 1: A user wants to identify a name of a song
-
Scenario 2: An existing user forgets a specific tune
-
Scenario 3: User is unfamiliar with a tune
Flow 4: Finding a song to listen to (Library Page)
-
Scenario 1: Existing user wants to listen to a personal song, playlist, album, etc. they have saved
-
Scenario 2: A user wants to quickly access their music
Low-Fidelity
Sketches
After collecting data from my user flows, I created multiple hand-drawn sketches. These sketches helped me to design an app that would guide users clearly and seamlessly. I tested and adjusted the sketches before moving on to higher fidelity versions. Finally, I conducted guerilla usability testing with users to gather feedback quickly.
Sketches
Style Guide
Next, I created a style guide to use as a visual foundation for my app. When designing the app, I wanted to go with a sleek, minimal, and clean design. I wanted my design to support an ease of use and good user experience by using clear colors to distinguish different elements such as title of a screen, iconography, and informative text. In addition, I implemented recognizable icons and buttons that users can easily identify when interacting with the screen. My overall design provides a very straightforward interaction that is familiar to other products or apps
High-Fidelity
Product Demo
User Testing
I conducted two rounds of usability testing, interviewing five people that fit into the app’s target demographics based on my target audience. Three interviews were conducted in person and two interviews were conducted through call.
During the testing, I provided context about the media app and learned about my users' experiences with using different media products. Overall, users had no difficulty interacting with the screen, but they did provide interesting feedback for product enhancement. For example, one user mentioned that they enjoyed collaborating with friends when making a playlist. This allows them to share and interact with others with similar interests which creates an exciting listening experience. Everyone I interviewed interacted smoothly with the app and found it intuitive. The user interviews were informative, helping me realize features I hadn't thought of before and inspiring me to go back and improve my designs for the best user experience.
Feedback
In general users found the app to be usable and smooth, but mentioned the background color and suggested a version with a different color palette. They also noted minor issues with UI element spacing and placement. One user suggested adding features to improve the listening experience by considering the user perspective. In response, I added new features in the premium version of the app that enhances the listening experience for users.
Reflection
The real-world scenario project was a challenging and enlightening experience for me. The fast-paced yet thorough process helped me to uncover the core issues and develop innovative solutions. As the project progressed, I was prompted to revisit my designs and gain a deeper understanding of the company's context. I learned that comprehending the company and its application is vital to effectively addressing its challenges. Overall, this design experience has left me inspired and motivated to continue exploring new ideas and solutions.