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:

Responsive Design
Increasing Usability
Improving UI Design


Recording 2022-09-30 at 18.01.06.gif

1. Fan Growing Dashboard

  • Responsive design for tablet and mobile browsers

  • Develop a unified brand identity

  • Give the same experience on any device

Recording 2022-09-30 at 22.07.06.gif

2. Creating Proposals

  • Responsive design for tablet browsers.

  • Easy to fill out the forms with any orientation.



Identify Problems

Affinity Map

Industry Research

User Flows
Style Guide


Hi-Fi Prototypes

Interactive Prototypes

User Testing 


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

project timeline problem 3_edited
project timeline problem 3_edited

press to zoom
EBK problem 2
EBK problem 2

press to zoom
project timeline problem 2
project timeline problem 2

press to zoom
project timeline problem 3_edited
project timeline problem 3_edited

press to zoom

Major Problems

  • Sidebar navigation.

  • Gray color for the action button.

  • Form design.

  • Different interface designs.

User Flows

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.

user flow.png

Current User Flow 2 - Connect to Spotify

New User Flow 2 - Connect to Spotify

Design Inspiration

After synthesizing the findings, I researched the industry leaders for responsive design.  

Tablet version


Mobile version


Tablet version


Navigation Bar

​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.

Layout Design

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.


Mobile version


Tablet version



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.

tablet and mobile.png
ebk wireframe.png
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). 

user testing - user 2.png
user testing - user 3.png
user testing - user 1.png


Creating proposal form

ebk - before testing 1.png
ebk- after testing 1.png
1. Third-party connection
  • Revised to add 'Skip' for each potential connection.

ebk - before testing 2.png
2. Explanation
  • Users did not know where and how the data came from. 

  • Added short explanations for easy understanding.

ebk - after testing 2.png
ebk - before testing 3.png
ebk - after testing 3.png
3. Add Team
  • Users struggled to add additional team members.

  • Clarified the task expectations.  


1. Tablet Browser
riff thumbnail.png
2. Tablet - Mobile View
3. Horizontal - Vertical View
responsive 2.png
responsive 1.png



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.