Visualittle

Project Overview

Creating a 20-question process without it feeling tedious or boring was a primary challenge. Early sketches aimed to make the user experience simple, smooth, and engaging.

• Simplify the brainstorming process for brand visual identities.
• Provide a fun and engaging user experience.
• Ensure usability across different devices with a responsive design.

Target Audience

• Graphic designers and branding professionals.
• Marketing teams and brand strategists.
• Small business owners looking to define their brand identity.

User Flow

Initial sketches helped determine button sizes for comfort and usability. A functional user flow was established as follows:

• Welcome Screen: Users read an introduction and start the process or scroll for more information.
• Questionnaire: Users answer 20 questions by choosing option A, B, or NONE.
• Results Screen: The app shows the results, allowing users to randomize the outcomes or restart the process.

Functional Prototypes

Internal testing prototypes focused on making A-B options the core of the process while minimizing steps to avoid user fatigue.

• Background and Colors: A light grey background, yellow highlights, and mid-grey text were used to reduce eye strain. The visual style mimicked pencil sketches with marker highlights.

• Character and Icons: To keep the process engaging, a cute cloud character guided users, reacting to instructions with animations. A total of 50 illustrations made the process fun.

• Testing Feedback: Initial user testing highlighted issues with the grey-yellow palette, serif fonts, and the prominence of the character. Adjustments were made accordingly.

Final Version

The final version is a cleaner, simplier approach, using sans-serif fonts and one-color icons to replace the detailed illustrations. The background switched to bright white, but a dark mode option was added to reduce eye strain.

• Color-Coded Screens: Different screens were color-coded (blue for welcome, orange for questions, green for results) to enhance navigation.
• Refined Character: A simpler, animated cloud character replaced the original. SVG vectors and CSS animations ensured scalability and reduced load times.
• CTA Optimization: Call-to-action texts were simplified to single-word commands for clarity.

Conclusion

Visualittle serves as a functional tool to sketch a brand's visual identity, with options for randomized results. Future enhancements will include more parameters and outcomes to improve precision. The app is available for anyone interested in defining their brand identity through an engaging, interactive process.

Would you like to try Visualittle?