Learnship//

Design System

UI CHallenge:

At the time, Learnship supported three separate platforms each with its own style guide and component set. There was no real design system in place. The goal was to build a design system that could scale to our business needs without interrupting existing product development cycles.

The setting

Active development work across three different platforms each with different style guides.
‍
We were in the process of retooling from XD to Figma.
‍
Product development was moving slowly due to a many factors including technical debt arising from fragmented systems.
Three distinct environments, each with unique look, feel, elements, and style-guides

The process

Working from screens in our production environment, I redesigned the M3 elements to match our existing front-end.
The goal was to make no changes to our design elements while bringing those elements into a design-token logic.
Design token propagation map

The results

A full-services Figma library with over 600 elements and styles that serves as a single-point of truth for design processes moving forward.
A decision in conjunction with the CTO to apply system to one of our production environments and slowly merge all of our products onto that environment.
Learnship buttons fit into our business-focused design languge
Inputs closely align with M3 best practices
Aside from standard date-pickers, Learnship also operates availability pickers for learners and trainers to provide their general availability
Learnship style cards come in four primary flavors with different inline shadows

The takeaways

A bespoke solution that is able to navigate business risks, technical capacities, and design needs usually wins out over dogmatic adherence to "best-practice."
Sexy, flashy tech should be reserved only for client-facing products and internal tools are happily quiet. That said, next time I would be more willing try token redesigns.
Next time I will align earlier front-end developers to speed up change-management processes.

Next: Leading design sprints

Want to know more? reach out through:
linkedinemail