A Material-based design system and component library for an enterprise suite of communication and collaboration apps: chat, email, calendar, contacts and project management.
SaaS / Enterprise software
Industry
2020
Year
3,534
Components
The founders wanted the whole suite to feel as familiar and professional as Google’s apps, while every app had started life as a different open-source project with its own look.
Google Material Design as the foundation: a blue and neutral palette with named colour tokens, Manrope and Source Sans Pro, an 8dp grid for mobile, tablet and desktop, and a set of 900+ custom 24px icons. Components were built with Atomic Design in Sketch, reviewed with the founders and handed off through Zeplin, linked to Storybook for the developers.
A library of 3,534 components that powered around 20 apps, add-ons and extensions, and the biggest component library I have ever built. The founders were very happy with the result.
The suite brought chat, video calls, email, calendar, contacts and project management together for enterprises, NGOs and public organizations, built on top of open-source apps. Before designing any single app, the team needed one shared visual language.
As Lead UI/UX designer, working with one other designer in a remote team of around 60 people, I defined the colours, type, grid and components that every app in the suite would reuse.
Scope
Colour palette & tokens
Typography system
Sizing & 8dp grid
900+ custom icons
Atomic Design methodology
Global components
Developer handoff
Tools
Sketch
Illustrator & Photoshop
Zeplin
Storybook (with developers)
More projects
I reply within 24 hours on weekdays.
