Altus Design System
A design system to create a consistent look and feel across all 4 products using different tech stacks.
Why do we need a design system?
Branding identity: There is a disconnect between branding guideline and product design style guide, there is no common understanding of what style need to be agreed on. We have a branding style guide on google drive, but this is not translated into actual production.
Technical documentation: we currently do not have technical documentation to guide the developer on how to use reusable components. The knowledge is lost once the main developer steps out of a certain project. This is both a design debt and a tech debt.
Onboarding: we don’t currently have a system to onboard developers or designers on how to translate the design into development.
Accessibility: we currently don’t have best practices on how to make each component accessible, or how to design for accessibility. this is important especially as an education technology company that we fully evaluate our current apps and adhere to WCAG AA standards.
What outcomes are we trying to achieve?
Brand consistency throughout our products. i.e. colours, logos
Provide technical documentation on how to use components so the knowledge is not lost.
Better onboarding documentation for future developers and designers.
What I am doing now to achieve this
Weekly design system combing session with design team i.e. this week we will tackle dropdowns. and we go and collect all the dropdown variations from all the apps
we discuss and agree on a variation to 1) document into the system 2) serve as a reference variation
document reference variation to online.
create tickets to update in-production components to match the reference component in DS
What was accomplished so far…
A fully built component library on Figma that is integrated into each designer’s files. So each designer is able to pull from a common library that is always up to date. This master library is constantly being revamped to retire old components and add new components.
A fully built company-wide library on Zeroheight that is integrated into Figma. This our living documentation that is constantly up to date with Marketing and Product Design team.
How we keep the design system up to date
What needs to be done next
fully integrate design system into code base using Storybook
propagate design system to include corporate website styling