ClassKlap
Creating a Design Language: Increasing Mobile App Visual Design Consistency
Overview
Roles: Visual Design, Illustration | Tools: Adobe Illustrator, Adobe Premiere Pro | Team Size: 1
The ClassKlap Learning App was introduced in 2020 to connect students to their schools. The target users for the app were children in lower grades (K-3 students) and hence, it needed to be child-friendly to capture their attention.
Challenge
The project was already underway when I joined the Product Team and development of the app had just started. My first task was to add playfulness to the visual design of the app with character illustrations and animations.
​
Choosing a color scheme for the character illustrations posed a significant challenge as the designs needed to be cohesive with the aesthetic of the app. This led me to another challenge - the lack of a style guide.
Solution
I created a style guide that aligns with the company's brand to bring visual consistency to the app in this project and in other future projects and aid in the design of custom characters.
A snapshot of the style guide
Impact
The style guide brought visual consistency to the app and in other future projects. The characters I designed gave a distinguishing and friendly look to the app, enhancing engagement.
Approach
01
Constraints
01
Create the style guide based on existing design patterns.
02
Use geometric shapes and the logo colours to keep brand identity intact.
02
Colour Scheme
I chose a set of colors from icons used to represent different subjects on the app and other ClassKlap products to keep the brand identity intact and make the overall visual design more cohesive. It also helped in creating a sense of familiarity with the new designs.
The selected colors aligned with the primary and secondary colors on the color wheel which added flexibility in creating rich colour schemes for the illustrations.
Icons for different subjects and final colour scheme for illustrations and visual design
03
Character Design
We wanted the characters to be unique to ClassKlap and decided to create custom characters with geometrical shaped heads for the app instead of using stock characters. These custom characters added playfulness and vibrancy and later became mascots for the app.
Character concept and snippets of the character design process
Design
A sample of ClassKlap Learning App characters
Highlights of usage of characters in various projects (e.g., GIFs to increase screen personlisation, go-to-market deliverables on PlayStore, and in-app notifications)
Takeaways
Design Documentation
I learnt the importance of design documentation. The style guide I created helped in creating cohesive design deliverables for this project and future projects. For instance, while adding new features to the ClassKlap Learning App, this documentation was helpful for onboarding new developers who joined the team later.