Case Study: Design Systems
Jump-starting the Kolbri design system at Learning Equality.
Problem:
Design was a team of two and design consistency was weakening across our product suite given the fast pace of feature dev. Designers + developers started creating custom UI in order to keep up with fast shipment of features. Products experiences looked and behaved in different ways, frustrating users with unpredictable UI and introduced different software mental models.
Hypothesis:
By investing efforts into creating a design library…then the team has a shared vocabulary to collaborate, create more consistent components, and save product development time.
Starting with conversations
The design system to be a tool primarily for designers and developers. However, getting input from the broader product team is important.
We sent a survey to the team with the following 4 questions and to get a sense for what the current design standard is, where it can be, and how the system can help with that.
Deciding which patterns and components need documentation & overhaul.
A practical start was to get together with developers prioritize what components and elements needed documentation to be standardized into the design library. A loose criteria for priorities were as followed:
P0: components and elements appearing frequently across all products, e.g. buttons, modals, colors, typography, icons, colors.
P1: components and patterns that are universal and exist in core experiences, e.g. layouts, grids, error states, forms, menus.
P2: components and patterns that are nice to haves, and would require extra bandwidth such as motion, loading states, empty states..
Maintenance in-Figma & on the web
Once component/pattern behavior, functionality, and examples were documented google docs, I updated designs info Figma and notified our developers so they could maintain latest versions on the live design system (public documentation for all to see what we’ve worked on!).
Making documentation public.
Having the design system live on a public URL communicates to external stakeholders and broader team members that design is very much intentional and that we take consistency and transparency very seriously. Here are some screenshots of the live version:
