The New Vibe
Redesigning the information architecture and user interface of the stress-relief music app, Vibe
The mobile app Vibe creates personalized music playlists, based on the users mood and artificial intelligence, to help them improve their mental well-being.
Our task was to identify problem areas within the app, and redesign it to help users achieve their mental well-being, quicker and more seamlessly.
Overview
People today are always on-the-go, and more often than not, are juggling multiple roles at a time. The pressure to manage such busy lifestyles causes stress and anxiety. The app Vibe creates personalized music playlists scientifically designed to help reduce this stress. Our role in this 3 week design sprint was to identify opportunities to make this experience elegant and seamless.
Duration
3 Week Sprint
Project Type
Group project,
General Assembly, Toronto
My Role
User Research, Information Architecture,
Wireframes, Visual Design
Tools Used
Figma
Whimsical
Adobe Creative Suite
Hand Sketching
UNDERSTANDING THE PROBLEM
Mental health is
a growing priority
for people
Our survey with 17 respondents showed that:
Research Methods
Surveys, User Interviews
User Testing
Affinity Mapping
Competitive Analysis
User Personas
User Journey Mapping
The Vibe app currently felt tedious to users
Testing The Current App, and Crafting a User Journey
We asked 3 users to engage with the app for a period of a few days, and also conducted qualitative in-depth interviews with 5 participants.
While our users felt the music that Vibe created great music that relieved their stress, they were frustrated by the entire process of actually reaching the playlist. Through our user persona, we were able to highlight the specific issues that users ran into.
Research Methods
Surveys, User Interviews
User Testing
Affinity Mapping
Competitive Analysis
User Personas
User Journey Mapping
Key Problem Spaces
Our user testing revealed these 4 main areas of investigation
USER TESTING RESULT 1: Existing information architecture is random, and not useful
Our users found the hierarchy of information and its placement wasteful. They did not appreciate random features like App Share and App Feedback in the main navigation
USER TESTING RESULT 2: Long user flow to reach music stressed users out!
Our users felt the existing flow to create a playlist required an excessive amount of user input, which made their experience long and painful.
USER TESTING RESULT 3: Lack of guidance that impacts app learnability for users
Through testing, we found that users wished for more instructions, just like Anxious Andy’s experience. Overall, there was no guidance given in the app as to how the user should train the AI to better understand their music choices.
USER TESTING RESULT 4: Accountability for personal wellness goals
Users also currently found it hard to keep track of their music listening patterns and moods. They also were missing a space to record their thoughts.
How might we help?
Users like Anxious Andy need a quick and easy platform which guide them through their personalized sound therapy playlist, and help them maintain their mental well-being
Ideating and High Level Solutioning
Keeping in mind our 4 problem spaces, we started solving towards making the entire experience less tedious and more seamless. We reworked the information architecture, sketched possible solutions through a design studio using the Crazy 8 method and created mid-fidelity wireframes once we had some additional user feedback.
Ideation Methods
Design Studio
Mid-Fidelity Wireframes
User Testing
Redesigning the information architecture to reflect our user’s needs
Sketching out and devloping ideas that
bring the music into the spotlight
We tested different methods of information hierarchy and placement of sections to refine it to what made most sense for users
Simplified User Flows:
Quick and easy to reach a playlist
One of the biggest changes we made was to reduce the number of steps it took users to reach their goal. Through iteration, we were able to save the user time, and get him to his end goal of listening to music in a simplified manner.
Using app mascot Luna to guide users through the app
Helping users define their music preferences in a guided manner with the app mascot Luna
High Fidelity Wireframing & Prototyping
We were then able to take our designs further in a higher fidelity, where we also incorporated the visual language, and created more elegant UI solutions. Care was taken to keep the look and feel soothing to users
Deliverables
Visual Design
High-Fid Wireframes
Figma Prototype
Key New Features
Restructured Navigation Bar
The new navigation now allows users to access sections which are more meaningful:
Home Tab: This now makes it easy for users to browse playlists, make their own playlist, as well as easily go to their recently played lists.
Search Tab: An easy Search tab to look for music by mood, or by pre-made suggestions
Music Player: A central music player button that directly takes users to a ready playlist
Luna Lounge: Enabling better AI training, so the app can better understand the users music preferences
Profile Tab: A space to journal, as well as look at wellness stats
One-click Personalized Playlist
Users are now able to listen to music directly with just one click on the homepage.
The newly designed music player takes centerstage in the navigation bar, and lists all the tracks with the ability to see more detailed information.
Users can adjust their playlist preferences at any time during the listening experience, with the addition of a Filters button.
Elevated Search Feature
Users now have an easier way to search for mood-based playlists.
Rather than answering a series of questions, they can get quick recommendations based on through the mood quadrant, or simply choose from the pre-made suggestions.
Luna Lounge (for better AI training)
Users can now train the AI in an easier manner to get better song suggestions through the Training section, with a simple thumbs up or down feature.
The inclusion of a new Guides section benefits users who are curious to learn more about sound therapy, and the benefits of music on their mental well-being
Journaling and Mood Tracking
Since our users felt that music and journaling their thoughts go hand-in-hand, the addition of a new Journal feature gives them the space to write down their thoughts and achieve more from their listening experience.
They are now also able to track their mood changes over time, and see what their music preferences have been like
Next Steps
If I had more time, and were to take the project forward, these are some of the things I would consider looking at.
Exploring the remaining user flows
I would like to create the user flows and designs for the other sections on the homepage like the “Make Your Own Playlist’ and “Recently Played’ flows, and test them with users.
User Interface Testing
Additionally I would like to conduct user testing on certain UI elements like the revised mood tracker, to see if our users face any gaps.
Key Learnings
View Other Projects
UI/UX: WhatsApp Reimagined
UI/UX: Restaurant E-commerce
Website Design: Seiko
Graphic Design: Foodhall
Graphic Design: Moët Hennessy