Quino's next chapter: brand refresh and landing page design

Quino

Contractor

Communication Design, Brand Refresh

Kicking off this new chapter of Quino, it was decided to launch a new landing page along with the web app redesign that's also suitable to advertise the upcoming mobile app release. The brand needed a fresh landing page to communicate Quino's values and the highlighted features.

Goal

Refresh Quino's visual identity to make it more appealing while maintaining its core elements, including the logo and signature purple as the brand's primary color. Update the landing page to achieve a more modern look and boost conversion rates.

My role

My role in this project included branding related tasks, including communication design, interactive animations, and responsive landing page design.

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 brand refresh and the landing page design both took one month

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.

Target group

The previous broad target audience had to be refined to focus on a specific use case, allowing a better product development. While Quino was originally marketed to professionals, researchers, high school, and university students—all of whom can still use the product—the current marketing strategy is now focused primarily on university students. Quino is particularly valuable when dealing with long, dense texts, especially in fields like medicine, law, art and history, and economics. The main user base is located in the US, Canada, Turkey, and Hungary.

Previous Quino brand asset

Redesigned Quino brand asset

Visual brand elements

Quino’s visual identity has always featured hand-drawn, floating illustrations of books and other learning-related objects as decoration. Our goal was to maintain this light, uplifting feel and extend it across all brand elements.

Sleek typography

We switched from Open Sans to Plus Jakarta Sans, a more rounded and friendly typeface that offers all the variations needed to create clean, modern interfaces.

Vibrant color choice

We aligned the primary and secondary colors to reflect the brand's personality. Quino Purple was made bold, lively, and vibrant, while keeping the interface colors subtle and simple.

Token & style system

The new color palette has been organized into a three-tier token library, establishing a solid base for app development. Quino's style system, featuring the new fonts, meets the requirements of a neat design system.

Illustrations, the soul of the brand

To match the illustrations with the new icons, we decided to remove sharp corners and disconnected lines, which made it difficult to color shapes and adapt them to different backgrounds.

Same old Quino logo

The logo stayed unchanged during the brand refresh to maintain consistency. However, we introduced a few new color combinations for the logo to add flexibility in different contexts, like social media posts.

Playful iconography

The original icons were inconsistent throughout the package, and there weren’t enough to cover all our needs. We ultimately chose the MingCute icon pack, which is both playful and versatile.

Component library

Following atomic design best practices, the web components were revised and optimized for spacing and sizing, with new brand elements applied throughout.

Motion design principles

The animations are designed to reflect the same playful spirit as the illustrations and brand colors. Movements should feel quick, smooth, and lively, with a hint of bounce and cleverness to engage users.

Source of truth: brand book

These brand refresh elements are compiled and documented in a brand book, accessible to the entire Quino team and continuously updated with new additions.

To be delivered

Working for a startup is like racing against time: we must make tough decisions on where to invest our efforts and what to prioritize to maximize return on investment. Everything designed must deliver value for users, so a few pieces of the rebranding puzzle are still in progress.

Characters and scenes

In the future, we plan to introduce a character and scene set for the brand to help communicate more complex stories and convey messages more effectively.

Micro UI interactions

The interfaces have reached a higher level, however, they still lack the cherry on top: micro interactions, transitions, and other elements of motion design.

Landing page structure

The landing page is structured in a tile-based layout that highlights Quino's product USPs, supporting the company’s marketing objectives. Directly beneath the tagline, an interactive mockup showcases the mobile app, with its primary features prominently displayed. Following the mobile section, the web app—successfully on the market for a year—is introduced. To build credibility, pricing information, user testimonials, and frequently asked questions are also provided.

New tech applied

I've learned to use Rive to create efficient and engaging animations for interactive elements, which can seamlessly integrate with code and save considerable development time. The animations on the landing page are responsive to user interactions: they react to cursor movement, change states based on scroll position, and can even display progress, such as during a file upload.

Conclusion

During the brand refresh process of Quino, we made its character feel more approachable and fun by aligning various visual elements cohesively. We updated the illustrations, allowing them to be used in a broader range of contexts. With the new landing page, Quino now offers a refreshed, user-friendly experience that reflects its vibrant personality and makes a memorable first impression on visitors.