I designed and developed a JavaScript web-app tool. Here's the process!

A favourite brainstorming exercise of mine is to define a brand's personality by idea association. "If your brand was a vehicle, which kind of vehicle would it be?", if the answer is a bike, it may mean it's an environment-friendly brand, or if it is a limousine, it may mean it's a luxury brand.

By asking many of these questions, a pattern is eventually drawn that gives a rough sketch of that brand's personality, which can be easily translated into a visual identity. It seemed feasible to build a digital tool able to do something similar by giving two choices in many hypothetical situations.

Structure Outline

From a user's point of view, the experience was way too similar to filling a regular questionnaire, a twenty-question process may feel boring or tedious if not done properly. Noting this, I started sketching possible ways to present the process in a simple, smooth and fun way.

I made actual size sketches to get a better grasp of how big the buttons should be, so the tool would be comfortable to use. In the process I discarded a few ideas that didn't seem user-friendly enough. Eventually I came up with a simple, functional user flow.

User Flow

1. Welcome: The user reads the brief introduction and pushes the button to start the process, or scrolls for more information and reads through it to find a second button at the bottom of the page to also start the process.
2. Questions: The user answers the 20 questions either choosing option A, B or NONE.
3. Results: The results are shown to the user. At the bottom of the page, the user can choose between randomizing the results or re-starting the process again.

Visual prototype

Since it was the main and most crucial part of the process, I began by working on the questions screen design. I wanted to make the A-B option buttons be the core of the process, and show clearly that there were always two choices to consider.

I also wanted to make the user go though the minimum number of steps possible when choosing an answer to not make the process excessively long, boring or frustrating. The two main options had to be in the same hierarchical level, but the NONE button could be relatively smaller to consider it as a last resource third choice.

To reduce eye strain I worked with a very light grey as background, using yellow as highlight and mid-gray instead of the usual black. I wanted a neutral appearance to make the result images pop by comparison.

The resulting visual reminded of a pencil sketch on a paper with a few yellow details highlighted in yellow marker. The kind of sketch a designer would do during a brainstorming session.

Functional prototype

Past the development phase, the prototype worked nicely and now it was time to give it some style and personality with colour, typography, illustrations and animations.

Since I wanted to make Visualittle's experience simple, fun and smooth I shuffled a few ideas to make the process more amusing. I was worried about the twenty question process, it may become tiresome or boring and make the user leave before the results could show up. That's why I designed a cute fun character that would guide the user through all the process.

It was originally intended to be a graphic design muse, then I shuffled the possibility of turning it into a wizard, until I finally settled with a fluffy idea cloud. The character can be seen reacting to instruction messages during the whole process in amusing simple loop animations.

Once the final version of the character was ready I designed two fun icons for every question to illustrate the different possible A-B choices, a total of 50 different cute illustrations to make the process more fun and amusing.

I also added background colours to separate the content by areas. A serif font for the titles made the app look vintage, like an old design textbook with marker highlights and pencil sketches.

I uploaded the app to my web's server and shared it with ten different acquaintances and volunteer testers. These are the conclussions I came to after questioning the users briefly:

• The general reception was positive, the process was simple, worked as a prototype and was easy to use.
• Since the questionnaire was the whole content of the page, a burger menu wasn't necessary.
• A few design choices seemed distracting: the gray-yellow palette, the serif fonts and the eyes in the illustrations.
• The character was cute but way too prominent.
• The dot pattern I was using in some illustrations wasn't visible in smaller screens.

Final version

Finally, I was ready to design and develop the final instance of Visualittle. This time I used more simple, sans-serif fonts and one colour icons instead of illustrations.

Getting rid of the grey background implied using a very bright white. While this choice looked more pleasing and made the app's elements pop, it also caused eye strain with such brightness. Thus, why I decided to implement a JavaScript function to change the stylesheet to dark mode.

In this last phase of the project, every screen has a distinct colour to signal and differentiate each one of them: blue for the welcome page, orange for the questions and green for the results. Despite this, colour is applied using the same logic in every screen, as background colour for the header section and highlight colour for illustrations and buttons.

I removed the character illustration in the questions screen to give more space for the text to breathe. I also added a title sentence that keeps count of how many questions the user has answered, to keep better track of how many questions are left.

As for the button illustrations, I also removed the eyes and changed the style to all of them to make them work both in dark and light mode, only three of them had to be completely redone.

The addition of colour separators for the results screen supposed a very positive hierarchy upgrade. The change of font to a more minimal one for the titles and subtitles also helped focus the attention on the actual results of the questionnaire.

Finally, a new, very simple character replaced the old one, a cloud ready to drop a little visual brainstorm. This new character is subtly animated, this time using CSS coding and SVG vectors instead of costly .gif images. Thanks to this, it can be expanded as much as the user wants, without loss of quality.

As a last touch, I modified the CTAs text to make them simple one word commands in capital letters, trying to use as conventional terms as possible in hope to make its functions more concise. For desktop users, I also implemented title tags to signal the function of every link and button.

In conclusion, as my first JavaScript project, Visualittle is a working tool able to deliver a rough sketch of how a visual identity would look like, with a few randomized options too. In time, I will evolve it by adding more parameters and possible results to make it more precise. Hopefully, it will be useful to someone who wants to try it. Would you like to try Visualittle?