JOTSON

Reducing tech and design debt with a design and illustration system

  • DESIGN SYSTEM
  • UX
  • PRODUCT DESIGN
Jotson Design System cover, components and screens on a lavender gridJotson Design System cover, components and screens on a lavender grid

tl;dr

I helped Jotson, a growing energy management app, get ready to bring design in-house. The goal was to organize their design files, build a clear system, and make sure their new designer could start without slowing anyone down.

This work made it easier for teams to find what they need, design faster, and hand off work without confusion.

impact

DESIGN SYSTEM
0-1
Built and improved reusable components and cleaned up the file structure
FASTER HANDOFFS
2x
Teams could find and use the right files with less back-and-forth
ORGANIZED WORKSPACES
3+
Clear workspaces for product, web, and marketing teams
Snapshot of the new Jotson design system: components, typography, color, and illustration guidelines
A snapshot of the new design system
Main navigation before: a grid of fixed nav variants

BEFORE

Variant bloat with fixed nav items and states

Main navigation after: one agnostic component

AFTER

One agnostic nav with robust properties

BEFORE & AFTER Retooled the main nav to one component with robust properties. Critical at this stage of the product with nav items still changing as features launched.
Analytics screen before the data visualization redesign

BEFORE

Analytics screen after the data visualization redesign

AFTER

BEFORE & AFTER Introduced a richer data visualization experience with clear context
Onboarding screenOnboarding
HQ screenHQ
Analytics screenAnalytics
Resources screenResources
Toolkit screenToolkit
Improvements made on the user experience and interface design based on research findings

Breakdown

01—

Core system

When I joined, the team found Jotson’s Figma files hard to use. Files were mixed, names were unclear, and devs didn’t know what was final.

To fix this, I led the work to:

  • Create sections for product, web, and marketing
  • Set up clear naming rules and color-coded covers
  • Build a dedicated design library with shared components

The product now has a single source of truth for design assets. Teams could find what they needed fast and designs became more consistent.

Original Jotson illustration style, a labeled household energy diagramOriginal Jotson illustration style, a labeled household energy diagram
Before: Naive illustration style. Didn’t fully convey the complexity of the brand nor the flexibility to move between marketing and product use cases
Kilowatt-hours
Litres
Pounds
After: Evolved style using silhouettes and negative space. Brand-focused with flexibility to cross between marketing and product use cases.
Spot illustration compositions, before and after
BEFORE & AFTER Illustration compositions for product and marketing use
Original onboarding flow screens
Onboarding flow screens in the new design system
BEFORE & AFTER Onboarding flow
02—

Illustration system

The old illustration style didn’t match the evolving product. I created a simpler, grown-up version of it. The new illustrations are still clean and friendly, but they match the brand’s maturity now.

They were better at explaining complex energy topics simply and on-brand, and they now work across product, web, and marketing.

03—

Key insights & design implications

Issues:

  • Files were disorganized, so teams lost time searching
  • Design debt was high, so devs rebuilt patterns again and again
  • Style was inconsistent, with no shared visual rules

Fixes:

  • A structured system made work easier for everyone
  • A single source for design assets saved developers time
  • A shared style gave the brand a more unified voice
EXPLAINER VIDEO An animated explainer of the Jotson app. I made the illustrations, storyboarded it in Figma and animated the final edit in After Effects, with sound effects as an extra touch. The turnaround was tight and took some late nights, and the brand and I were both happy with the result.

Learnings

Impact & measurable outcomes

Short-term impact:

  • Product and dev teams worked faster
  • The new designer onboarded smoothly
  • Visual language is now aligned across product, web, and marketing

Long-term impact:

This project showed how a well-organized system leads to better teamwork, and how small changes can make a big difference.

  • The design system is still in use and growing
  • Teams now follow a clear process
  • Collaboration is faster and more efficient