top of page
Frame 199.png


Tablet web browser


UI/UX designer, Researcher


Client project


Co-founder, PM, 3 designers


May 2022 - June 2022


Figma, Figjam, Slack

Project overview

In this project, I worked with a team of three other designers and a group of stakeholders to create three new features for Riff's responsive tablet and mobile browsers. The project lasted for five weeks. My role was to lead the design direction for the tablet browser (3 features) while collaborating with the mobile team on ideation. The project's main focus was to improve the user experience and redesign the user interface.

Why we made this project

Riff is an online platform that offers personalized business coaching for musicians based in Canada. It also helps musicians connect with industry experts and create networking opportunities. The platform is currently available as a desktop web app, but the company plans to expand its service to tablet and mobile browsers. Therefore, the company seeks a cohesive design for its new tablet and mobile browser service.


Optimizing the Tablet Experience through Improved Design

Product research

Thorough research on the existing product was conducted to pinpoint areas for improvement in the user experience and assess the impact of current issues on the company.

Frame 381.png

Problem 1

There are some issues with their web app. The company has multiple style guides for each feature and a complicated onboarding process.

Problem 2

The existing product has inconsistent design issues that have led to confusion among users. These lead to a decrease in user engagement.

Product research
User research

The company already had user testing videos, and I watched them analyze user friction on the existing product. As expected, users noted the inconsistent design as the most frustrating aspect of the product.

Frame 382.png

Finding 1

One of the main findings from my user research was that the existing product had a lot of inconsistencies in its design, which led to confusion among users and ultimately decreased engagement.

Finding 2

Another key finding from my user research was that the existing product had poor usability, with many users reporting that certain tasks, such as filling out forms, were too complicated and caused frustration.

User research
Industry research

I researched industry leaders in responsive design to gain insight into best practices and current trends in the field to inform my design decisions.

Frame 383.png

Flexible Orientation for Tablet Layouts

It's important to ensure that the layout designs for a tablet browser are flexible and can adjust to any orientation. This allows for a better user experience, as users can easily switch between portrait and landscape modes without any issues with the layout. Researching industry leaders such as Slack, Google Form, Google Analytics, and Apple helped me to identify these best practices for tablet browser design.

Two Column Layout for Tablet Browsers

When designing for a tablet browser, it's best to use two columns in the layout primarily. This allows for optimal readability and user engagement on a smaller screen.

Industry research
Frame 384.png

Design Time: Translating Research into Design

Reviewed company's persona, user stories, and roadmap, then started design based on user research findings and industry best practices, creating a layout optimized for tablet browsers and adaptable to different orientations.

Flow diagram

I mapped out the interactions between different elements on the page to ensure a smooth user experience. The mobile team and I created three flow diagrams for each feature. The diagram below is one of the features I worked on. It helped me identify potential issues or areas for improvement before moving on to the design phase.

flow diagram.png
Flow diagram

I created over 50 wireframes to communicate the responsive design for the tablet browser, including the layout, navigation, and key features. As shown in the below image, I focused on the landscape version due to time constraints. A few landscape versions were created after the portrait versions.

Frame 390.png
High-fidelity: Alignment and grid

To ensure a cohesive and polished look throughout the design, I implemented an 8-pt grid system and used it as a guide while creating the high-fidelity designs. The company had previously faced issues with design consistency, so implementing a grid system helped to address this problem and improve the overall user experience.

Frame 385.png
High - fidelity
High-fidelity: UI change

We found that the company had multiple style guides, leading to inconsistent design. The company wanted to minimize changes to the existing UI, but they were open to making adjustments to improve consistency.

Frame 386.png
Number Circle One.png

Navigation: Redesigned the navigation bar from a left-side to a top-bottom bar using a hamburger menu to save space on tablet devices.

Number Circle Two.png

Form-filling: Simplified the form-filling process by dividing it into manageable steps on smart devices.

Number Circle Three.png

Background color: Changed the background color to white for improved readability and clarity.

Number Circle Four.png

Action button: Corrected the contrast ratio issue of the action button by redesigning it to pass WCAG guidelines for large text and UI components.

High-fidelity: Over 50 screens were created

I collaborated with the mobile team to design three features: a funding proposal form, a timeline, and a fan growth dashboard for tablet browsers. I ensured that my design solution was compatible with the mobile version.

Frame 387.png
Usability testing

After creating a clickable prototype, the mobile team and I validated our solutions through user testing with a Riff user and two non-Riff users. Although we did not encounter major issues with the project timeline and fan growth dashboard features, we identified opportunities for improvement in the proposal form creation feature.

Frame 388.png

Result: This is one of the problems identified with the funding proposal form. One user was unfamiliar with the Plaid account, so she requested to skip the Plaid connection step and proceed to connect to the Spotify account instead. I updated the design to allow users to skip each connection step individually to resolve this issue.

Usability study

This project was my first experience collaborating with other designers. The biggest challenge was the tight deadline of only 5 weeks, which limited my ability to learn the product in-depth and conduct user testing with more participants. Additionally, I faced some delays early on due to poor communication with the team, but as I improved my communication, I was able to make progress and complete the project on time.

However, I learned the importance of effective communication in team settings and the value of clear and consistent communication in ensuring project success. I also realized the significance of user testing in gathering valuable feedback to improve design solutions and the need for adequate time and resources to conduct proper testing. While I would have preferred to have more time for another user testing session and to gain a deeper understanding of the product, this project was a valuable learning experience for me.

bottom of page