Tumbnail.png

Riff

OVERVIEW

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.

MY ROLE

UX Research | UX Design | Visual Design​

PROJECT CONTEXT (May - June 2022)

Tablet Browser | Mobile Browser | Client Project

TEAM

UX Designers (4) | CEO | Product Lead  

TOOLS

Figma | FigJam | Slack

PROBLEM

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.

 

CLIENT EXPECTATION

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.png
Responsive Design
user-friendly.png
Increasing Usability
illustration.png
Improving UI Design

THE SOLUTION

 
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.

DESIGN PROCESS

Prototype
Test
Discover
Define
Ideate

Identify Problems

Affinity Map

Industry Research

User Flows
Style Guide

Wireframes

Hi-Fi Prototypes

Interactive Prototypes

User Testing 

RESEARCH

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
1/3

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

IMG_0492.PNG

Mobile version

apple-logo.png
IMG_7416.PNG

Tablet version

IMG_0493.PNG

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.

slack.png

Mobile version

IMG_7405.PNG

Tablet version

IMG_0488.PNG
Wireframe
 

DESIGN

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. 

SG.png
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

ITERATION

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.  

FINAL DESIGN

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

REFLECTION

 

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.