Riff is an online platform (desktop web app) that provides personalized business coaching for musicians based in Canada. It also helps musicians connect with industry legends, leaders, and innovators and creates networking opportunities.
This project was a 5-week design project in which I collaborated with three other designers and a group of stakeholders to create three features for Riff's responsive tablet and mobile browsers. Our team worked on the research phase together, but to increase our productivity, we split the group to work on mobile and tablet browsers separately in order to visualize solutions better. Ultimately, three UX/UI designers were in charge of the mobile browsers, and I was responsible for the tablet browsers for this project as a freelance UX/UI designer.
UX Research | UX Design | Visual Design
PROJECT CONTEXT (May - June 2022)
Tablet Browser | Mobile Browser | Client Project
UX Designers (4) | CEO | Product Lead
Figma | FigJam | Slack
How might we provide a better experience for users through improved design?
Riff currently has a desktop web app for its service and plans to expand its service to tablet and mobile browsers. However, the existing design system has limited design options for tablet and mobile browsers. The company wanted to keep using the current product interface design for tablet and mobile browsers, but there are some issues with visual style matching and poor usability.
At our initial meeting, the CEO of the company and the product lead provided their business information and current situation. After having the initial meeting, they gave us the company's expectations of this project:
Improving UI Design
1. Fan Growing Dashboard
Responsive design for tablet and mobile browsers
Develop a unified brand identity
Give the same experience on any device
2. Creating Proposals
Responsive design for tablet browsers.
Easy to fill out the forms with any orientation.
Existing Product Research
Before starting the project, I wanted to identify problems with current core issues to give an improved experience to users. Our team discovered problems with the UI elements, user-centered design, and cohesive design for creating tablet and mobile browsers.
Riff's current product
Gray color for the action button.
Different interface designs.
All design team members collaborated during the research phase to discover the complex issues of the product, but due to time constraints, we split up the tasks into features. Therefore, I researched the current product's (desktop web app) user flows to identify the user's primary needs and pain points for the proposal feature. For the proposal, Riff did not consider the edge case when users connected external accounts to Riff; thus, users might be confused when the information and data were incorrect.
Current User Flow 2 - Connect to Spotify
New User Flow 2 - Connect to Spotify
After synthesizing the findings, I researched the industry leaders for responsive design.
The company wanted to keep placing sidebar navigation on the screen for tablet and mobile browsers. However, users are less comfortable using sidebar navigation on mobile-friendly browsers.
The horizontal navigation bar helps to save room for the screen. If users rotate their screen vertically to horizontally on their phones, they may be confused about how to navigate to the right place with the sidebar navigation.
Most of Riff's products include filling out forms and data dashboards, so layout design is critical to increasing usability and readability.
Slack is one of the companies that has a straightforward responsive layout design. It helps users navigate a piece of content without confusion.
Based on research and information, I narrowed down solutions through low-fidelity wireframes. I was responsible for designing tablet browsers. I worked with the mobile team in this wireframe phase to create cohesive designs for tablet and mobile browsers.
Style Guide for Tablet Browsers
Riff has multiple style guides, but our team decided to create new UI elements and components, per our findings. We also changed the background color from gray to white (#FFFFFF). When we made the style guide for tablet and mobile browsers, we tried not to change the design of the current desktop web app as much as possible.
User Testing & Iteration
I conducted user testing with three participants for tablet browsers. Two participants were not musicians (Non-Riff users), and another was a musician (Riff user).
Creating proposal form
1. Third-party connection
Revised to add 'Skip' for each potential connection.
Users did not know where and how the data came from.
Added short explanations for easy understanding.
3. Add Team
Users struggled to add additional team members.
Clarified the task expectations.
1. Tablet Browser
2. Tablet - Mobile View
3. Horizontal - Vertical View
If I had more time, I would...
Have better conversations with the team and clients
: This project is my first collaboration project. I learned that communication is key to accelerating a project efficiently. When we first started, we did not communicate with the Riff team, which slowed down our work and progress in the first half of the project.
Conduct another user testing session
: Due to time constraints, we had mobile and tablet user testing at the same session. Consequently, the user had already acquired the task flows, so I could not receive sufficient feedback for the tablet browsers.