Disruptive web application revamp and visual upgrade for Quino

Quino

Contractor

Product Design, Brand Refresh

In April 2024, after a successful beta launch in 2023, Quino decided to move forward and refresh the look of their web app. By this point, they had gathered both qualitative and quantitative data on users' preferences and the features they liked most.

Goal

Quino aimed to refresh the design of their web application, which helps students summarize and deeply understand study notes, making it more appealing to students worldwide and simplifying their workflow.

My role

My role in this project covered redesigning the web application using the data and experience collected during the beta phase. I've also implemented the new brand refresh elements in the user interface.

Design process

I joined Quino as an extension of the team, in 15-20 hours weekly, collaborating on the design as part of a duo
The web app redesign took 3 months, working closely in daily meetings with the developer team

About Quino

Quino is an AI-powered e-learning platform designed primarily for university students. Its web application offers a suite of features aimed at making the learning experience better through document process tools, while Quino mobile application offers supplementary features, such as learning games generated from uploaded documents.

Discovering usability issues

At the beginning of the redesign process, our team conducted interviews with "Quino champions", the most active users of the product, and ran a UX expert review on the previous interface. Considering usability heuristics and UI/UX conventions, we've identified a couple of fields to improve on the beta interface:

Outdated, messy interface

When opening a document in Quino, users faced a myriad of windows and tabs with duplications and long feature descriptions. To solve this issue, it was also necessary to restructure the project items and define a clear hierarchy.

Hard-to-recognize symbols

Core document-related functions were only displayed with generic icons, which by looking at them, didn't communicate well the action behind.

Inconsistent copywriting

The UX copy was often unclear, with inconsistent naming of features and actions across different screens, which could cause confusion. Despite the Quino brand's positive, bright, and friendly image, the copy included complex technical terms that users might not be familiar with.

Optimizing functionality

As part of the redesign, we reviewed the app’s existing features. Since knowledge sharing has gradually become Quino's main focus, we've added shared workspaces where users can collaborate on document summaries and note-taking. Due to low usage and strong competition, we decided to remove flashcards from the web app, but they will make a return in the upcoming mobile application.

Design system and visual language

To keep things consistent across screens and platforms, we introduced an updated design system and style guide. We switched the typeface from Open Sans to Plus Jakarta Sans, integrated icons from the MingCute library, and incorporated new colors and illustrations from the recent brand refresh to showcase Quino’s unique identity throughout the interface.

Challenges

One of the biggest challenges in this project was technological limitations, as most of the backend had to remain unchanged, so we could only address issues on the front end. The tight deadline was another constraint, forcing us to prioritize a fully functional interface over more polished UI design solutions.

Outcome

We successfully delivered an interface that reduces cognitive load and supports users in their journey, spending more time using Quino. The revamped application is poised to drive steady organic growth in both new user activation and retention of existing users.