Design systems / Open source · Designed during tenure · Aug 2022–May 2026

One system. Many learning experiences.

I extended Kolibri’s shared design language so different learning and administration workflows could reuse the same components, interactions and feedback.

Role

Senior Product Designer

Timeline

Aug 2022 — May 2026

Company

Learning Equality

Shared redesigned Kolibri components shown across Studio, Learn, Coach, Facility and Device

01

One language, different environments

Facility and learning tools have to work across very different screen sizes. Shared navigation and focus states give those environments a consistent foundation.

Device-sized Kolibri navigation and accessibility component states — App bars across screen sizes and the redesigned focus states.

02

One shell. Different work.

Publishing a channel and submitting it for review are different tasks. Both use a fixed header, scrolling content and actions that stay within reach.

Publishing a channel, with its actions always in reach.

The three-zone side panel reused for distinct workflows.

03

Feedback in context

Progress, warnings and confirmations stay beside the work that triggered them, from publishing a channel to checking submission eligibility.

Progress and completion feedback stay with the task.

04

From component to screen

Responsive cards and type hierarchy bring the same design language into every product surface.

Responsive Kolibri channel cards and component size rules — Responsive channel cards, proportions and breakpoints.

Kolibri typography, heading hierarchy and refined type-scale studies — The core type hierarchy and a refined type-scale exploration.

creative-systemslearningcomplex-systems

Next case study

What happens when one successful product wants to become a category?