teachmint

Named after the childhood favourite crayon box, Krayon isn’t just a toolkit of UI elements - it’s a carefully crafted visual language that brings harmony, consistency, and efficiency to a wide range of products. And yes, we had a lot of fun building it!

Why we needed a design system?

The challenge was clear: as our product offerings grew, so did the number of inconsistencies- duplicate components, mismatched styles, and scattered design patterns. Teams were spending more time rebuilding than reusing. This not only slowed us down but also diluted the user experience. Our goal was to fix this by creating a flexible, unified system that could support all user journeys - no matter the persona or platform.

Problems we faced & how I solved them

1. Inconsistency across products

Problem: Different teams were designing similar components in different ways—resulting in visual fragmentation and extra engineering overhead.
Solution: I introduced a shared component library with clearly defined usage guidelines. Every component was built to be modular and reusable, drastically reducing duplication and enabling a consistent look and feel across all products.

2. Lack of persona-specific design language

Problem: Students, teachers, admins, and parents each interact with the platform differently, but our UI didn’t reflect that nuance.
Solution: I anchored the design language around a common emotional thread—crayons and watercolours—something familiar to all stakeholders in the education space. This became the inspiration for our colour palette and visual language.

3. Overwhelming interfaces for students

Problem: Students were often overwhelmed by cluttered layouts and loud colours.
Solution: I introduced a pastel-based colour palette that created a sense of calm and clarity. Each shade was intentionally linked to subjects or key actions, helping students navigate with ease.

4. Typography issues across devices

Problem: Our typography wasn’t optimised for readability, especially on smaller screens.
Solution: I selected a typeface that was versatile, readable, and accessible across all platforms—from smartphones to large screens - ensuring legibility in both high-density information cards and long reading passages.

5. Disconnected design & development

Problem: Designers and developers were not always aligned on component behavior and states.
Solution: I worked closely with engineering to document design tokens, states, and interaction patterns. We ensured that the design system was built with developers in mind, which sped up handoffs and reduced guesswork.

Approach: Designing with empathy

We began by creating a mood board rooted in the real-world experiences of teachers and students—books, blackboards, crayons, class notes. This helped align the entire team on the emotional tone we wanted to create. Every component was then built with accessibility, modularity, and responsiveness in mind.

• Colour palette:
  Pastel tones that support visual clarity and emotional comfort

• Typography:
  Chosen for readability and platform flexibility

• Responsive card layouts:
  Designed for seamless performance across mobile, tablet, and desktop

• Component library:
  Built to be flexible, scalable, and easy to maintain

What the system achieved

• Reduced design and development cycles by reusing components

• Improved user experience through consistent, accessible visuals

• Aligned cross-functional teams under a single visual language

• Made the interface feel simpler, softer, and more engaging—especially for students

Final thoughts

The design system has become more than just a toolkit—it’s a shared language that empowers every designer and developer at Teachmint to build faster, better, and more thoughtfully. It helped us scale with confidence while staying true to our users’ needs. And as our product suite continues to evolve, the system is built to grow alongside it—flexible, inclusive, and beautifully simple.