What
Tablet web browser
Role
UI/UX designer, Researcher
Why
Client project
Team
Co-founder, PM, 3 designers
When
May 2022 - June 2022
Tools
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.
Riff
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.
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.
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.
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.
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.
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.
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.
Wireframes
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.
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.
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.
Navigation: Redesigned the navigation bar from a left-side to a top-bottom bar using a hamburger menu to save space on tablet devices.
Form-filling: Simplified the form-filling process by dividing it into manageable steps on smart devices.
Background color: Changed the background color to white for improved readability and clarity.
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.
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.
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.
Reflection
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.