Vibr Mobile App
This is a project that I worked on during the 10-week UXI Immersive Bootcamp at BrainStation, Toronto. Vibr is a mobile app that connects musicians with similar skill levels and styles to meet up and jam music. It allows the registered users to set their profiles and filter preferences to search for other musicians and be searched by others. Users can use Vibr messaging and call platform to connect with one another.
Project Scope
Tools
The Challenge
As a musician, I see the needs and desires of musicians to connect and engage with other musicians. Those who are not in a creative community feel alone in their playing. Musicians who want to jam with others face problems finding the right people because of the differences in skill levels, styles and even personality. Finding the right match to jam music can be a hit and miss experience which leads to frustration.
The Vision
Connecting local musicians to meet up and jam music. Build communities. Help sharpen each other’s skills and have fun. Playing music is not a lonely experience anymore!
The Solution
Click image below to explore the high-fidelity prototype
The Process
Designing from the ground up, the UX process included the following:
- Discovery: Defined the problem, set vision, assumptions, and value proposition
- Research: Conducted market research and user research
- Synthesis: Created personas, experience maps, epics, user stories, and user flows
- Ideation: Created sketches and digital wireframes
- Testing: Conducted user testing and many rounds of iterations
- Prototyping: Created hi-fidelity clickable prototypes
- UI design: Designed icons, color palettes, typography, UI style guide and UI library
- Branding design: Naming, created logo, marketing website and materials
1. Discovery
In the discovery phase, I set the assumptions about musicians, their needs, and the value proposition.
2. Research
Market Research
There aren’t many existing musician searching/matching apps with in the market. I found two apps with similar nature and function – Jamseek and Bandfriend. Both are not intuitive in their navigation and were not well designed.
Inspiration
I used Airbnb as my inspiration as it has a very clean precise functional filter for searching. The whole experience of using Airbnb is delightful, and easy. The UI is very clean and modern.
Users Interview
Users interview is the main tool I used for the user research. Two males and three females age ranging from 25 to 45 with different skill levels were interviewed. The goal was to test the accuracy of my assumptions, to find out their goals in playing music, their motivations, pain points and behaviors.
I extracted the key points from the interview findings and made a list of the users' pain points, motivation and behaviors. A set of “how might we…” questions was developed to turn these challenges into opportunities for ideas and designs. A hypothesis and goal for the app were formed.
3. Synthesis
Base on the findings from interviews, I developed the persona. An experience journey was mapped to identity the design opportunities. I identified the epics and wrote the user stories. Using the user stories, I developed the users task flow diagram and site map.
Primary Persona
Experience Map
Epics and User Stories
After mapping the user experience map, I identified the opportunities for ideas and designs to create a solution to remove the pain points in the users journey to connect with other musicians. The end point is to provide the users a pleasant and effective way to connect with other musicians.
There are three main epics:
- Set Profile—Guiding the users to set up their profiles after they create an account.
- Search—Users set filter criteria for musicians they want to connect with.
- Connect—Users review filter result listing and connect with those they are interested via Vibr's messaging platform.
The next step, I wrote the user stories under each epic according to the research findings. This gave me an understanding to design the user task flow.
4 & 5. Ideation, user testing and iterations
After the synthesis stage, I moved on to sketching using markers and paper. Starting with very simple wireframes, I added more detail on the second round after I picked a direction. I used Marvel App to do a rapid prototype for a quick testing.
Digital low-fidelity wireframes were created with Sketch App. The first round of wireframes was imported into InVision App environment to create a clickable prototype for users testing. I made three rounds of testing with several iterations in between.
Wireframes — Round 1 (Screen A - D)
Wireframes — Round 2 (Screen E - H)
Changes were made on the 2nd iteration of wireframes based on the user testings. A step-by-step guided onboarding process is used instead. The vertical rule connecting the icons was removed to prevent confusion. The pop up page to choose instruments was eliminated so that users will stay on the same screen.
Wireframes — Round 3 (Screen I - L)
'Write description' section was moved to the next screen. A search bar was added to screen J and L. Affordance hint was implemented to show users there are more categories (screen J). Sliders were used on screen K instead.
6. Hi-Fidelity Prototype
After many rounds of iterations, I finalized the digital wireframes. I then worked on choosing colors and turned the gray-scale wireframes into a full-color hi-fidelity prototype. I went through 4 rounds of color set choices and finally decided on using the purple as the primary color and sky blue as the secondary with an apple green and orange as the accent colors.
Click image below to explore the high-fidelity prototype
Three profile setup screens (onboarding section)
Three screens from the filter setting section
Search result listing screen and individual profile screen
Result listing in map view, inbox and messages screens. Clicking on the purple dots on the map view screen will reveal the person and the card at that location. Card slides up from bottom.
7 & 8. UI Design and Branding
Finally I moved on to branding and visual design for the Vibr app which includes naming the app, developing color schemes, typography, icons, UI style guide and UI library. A purple color was chosen to be the primary of the app as purple stands for and evokes creativity. Sky blue was picked as the secondary color as it goes very well with the purple and has a friendly feel. The sky blue color is used as an action color (buttons) throughout the app.
Branding Logo
Vibr Mobile App Color Palette
Vibr Mobile App Typography
Vibr Mobile App UI Library
Branding Item - T-Shirt
Marketing Website
Copyright © 2019 Lai-Kit Chan