Visualittle

Visualittle

Visualittle is the first web app I've ever developed and my first project on javascript. It's a twenty-idea association quiz that uses lateral thinking and gamification to make you reflect about your brand's visual identity by thinking about its personality.

At the end of the quiz, Visualittle provides a few ideas and options to approach the brand's personality from a graphic designer's perspective. You can give it a try if you want!

TRY VISUALITTLE

Character design

In order to create a little narrative and to put the user in a playful mood, I designed a little character that guides you all through the process. Conceptually, it evolved from muse to fairy and then to wizard to eventually become a fluffy inspiration particle.

User interface

The app has a welcome page, a quiz page and a results page. The A-B option buttons are the core of the app's UI design. I wanted to make clear that there are always two choices to consider and, since it's a long twenty question quiz process, I wanted to make the user goes though the minimum number of steps possible to not make it boring or frustrating.

In order to build the app more as a tool that can be reused many times (rather than a regular quiz) and to prevent pattern repetition, the questions' order is shuffled every time the quiz starts, and the options' position is decided randomly. There's also always five questions left out, so the quiz is never entirely the same.

Visual results

To visually illustrate the results shown at the end of the process, I designed 21 logos and secondary elements along with typography pairings and color palettes.

When deciding which results to show, the code considers the two highest out of 10 different brand personality parameters and mixes the resulting elements depending on how they rank. The shown results can be randomized since the same result can give many different outcomes, just like a brainstorming session would.