thefaculty

App & Brand Identity Redesign

Project Overview

thefaculty is a mobile quiz app, developed for italian university students, which allows them to play 1v1 matches, answer questions and get rewarded with discounts and promotions offered by partners of the app.

In 2021, thefaculty underwent a major rebranding process in order to develop a stronger identity and visual style, while also improving the user experience and a large portion of the system architecture.

My Contributions

My main tasks were to:

– Build a new visual identity for the entire App interface

– Create a Design System that could be quickly updated while also bringing coherence to the whole navigation experience

Building a new Design System

thefaculty

Aug 2021 – Dec 2021

thefaculty is an educational platform which uses gamification as a tool to engage learners, helping them to grow their knowledge while having fun. While the main mechanics (quizzes, scoreboards, rewards and personalization) were mostly structured, there were two main problems with the App’s interface:

1. Functional and structural inconsistencies

Each section had been designed independently, leading to different navigation hierarchies depending on the needs of the moment;

2. No clear visual language

There was no visual language to define the context of use and the “environment” in which students found themselves in.

To this end, I gathered every instance of all graphical elements present within the App to create an interface inventory (you can see a part of this in the image below, where I grouped all the “button” elements variations). These helped highlighting how much unstructured and fragmented the interface was, spacing between many styles and properties. There was a strong need for coherence and homogeneity.

In order to address these problems, I started designing a library of reusable interface elements that constituted the “atoms” for the entire system. The goal was to build a way to quickly deliver new interface screens, maximising the time spent on feature design while decreasing the effort to come up every time with the new interface elements needed. This also helped in maintaining a consistent visual style within each section.

Consistency and coherence also meant lowering the learning curve of the system: navigation flows started to feel similar to each other, creating a sense of familiarity to returning users, who quickly adapted to the new hierarchy of each section.

Defining the visual language

thefaculty

Aug 2021 – Dec 2021

Once the building blocks for the interface were defined, I spent some time researching a visual style that could appeal to students while also communicating the fun and playful experiences found within the App.

To this end, the new library of elements featured rounded and dynamic shapes, accompanied by a vibrant color palette and cheerful, defined and diversified iconography.

Befores
/ Afters

Befores / Afters

Whenever possible, I favored icons to texts or labels. Many iterations were made in order to find the most recognizable and self-explanatory icons for each feature and section.

Iconography research and design was a big part of this process: I wanted to create a feeling of belonging for students, showing them that thefaculty was tailor-made for their world.

In order to make the experience even more immersive and interactive, I crafted custom animations for a variety of these icons.

Check out the entire app

(It’s free to download!)

iOS Android

The new logo

thefaculty

Aug 2021 – Dec 2021

The last stage of the process was to ensure this new ecosystem could be identified with a coherent mark. The brief was to find a way to synthesize all the work done until this moment, but also that wouldn’t jeopardize the current brand awareness with a completely different solution. The concept had to remain the same, while adapting to the new visual language created for the system interface.

I therefore identified three key words that described best what the focus of the brand was:

Education

Students

Fun

And through these I designed a new custom shape.

The final outline was similar to the original: the classic graduation hat still worked as a strong and recognizable symbol for education. However, the focus shifted to the human side of the brand: a welcoming, rounded face replaced the cold, generic and pointy hat, while its blinking eye connected to the brand promise of having fun while learning.

Of the same importance was the choice for the new typeface. Candy Cake turned out to be the perfect alternative: playful, rounded and with a lot of personality.

As a final step, we wanted the logo to be brought to life through a distinctive animation.

An animated logo is an important asset, since it can evoke emotions, personality and values within just a few seconds, while also helping the brand to stand out from its competitors.

I went for a simple, yet distinctive animation that could easily stick in people’s mind: below you can see the final result. This animation welcomes new users every time the App is opened.