When designing and building a product, you very quickly run into the issue of needing to document your (design) components. Otherwise you risk making 2 versions of the same button or style.
In 2018 I switched POP from Sketch to Figma and I have been building on that design system ever since to help not only designers and engineers but also other team members to use our design system.
September 2016 — 2018
When I first joined POP in 2016 and was using Sketch, styled components were only just appearing in design tools. The need to document common components like buttons, icons and many more becomes a must-have over time.
I am happy I started this process early on, at POP I never had to do a lot of maintenance work on our design documentation because of that. It was and still is, up to date.
The following sections will describe each category of the design system and show and tell it's contents.
This is where POP's colors, text styles, borders, shadows, iconography and more is defined.
Many of these styles and icons are used in components in the upcoming sections, therefore requiring to be well documented themselves and act as a source of truth.
Though most icons come from the Nucleo icon library, many were custom made.
Grays, stoplights, highlights, dashboard accent colors, POP logo colors and social app colors.
For simplicity and performance POP makes use of system fonts. San Fransisco on Mac, Segoe UI on Windows.
The largest part of the design system: all components that are sometimes even nested in other components. Forms, buttons, tabs, search bars, tags, drop downs, confirmations, tooltips, pop-ups, popovers, tables, date and time selectors and more are defined and have their states layed out.
It is very important to document every component, big or small in the same way so the team can avoid creating new components that already exist.
Components that can be used in forms.
Buttons, sorting and filter buttons, toggles, search fields, dropdowns and tags.
Tooltips and in-product tips.
Confirmation bars that appear after an action.
Full table with rows and columns.
The chat editor has been the core of POP since 2016. It's where customers write their conversations in what we call 'Flows'. The editor therefore supports all the message types such as text, gallery cards, quick replies, images, gifs, audio, files and more.
All of these are well documented in the design system so over the 4 years of designing for the chat editor, we managed to keep consistent function and style.
The text component.
The quick replies component, used as buttons within chat.
A text message that includes a button.
The gallery card, perfect for displaying content.
The receipt component (to be sent after a purchase).
An overview of the chat editor components and some of its states.
The Inbox proved to be an important feature for POP and I'm happy it is well documented. Sending all kinds of messages such as text, gallery cards, images, audio, files, stickers, emoji's and more resulted in a lot of different states and edge-cases to be resolved and documented. This is (partly) reflected in the timestamps, receipts and different message types documented in this part of the design system.
Different chat components to be used in the chat column of the Inbox.
More complex chat components such as quoted replies, cards and text bubbles with reactions.
The various read receipts used in Inbox.
Different states for the chats column.
The box in which a user can create Flows, upload files and ultimately respond to the customer.
Layouts are part of the design system to make designing faster. A common layout such as a page in the dashboard, a fullscreen pop-up with title, subtitle and content are easy to grab and use. This prevents the need to starts from scratch every time and manually add all the components.
Layout pages of the dashboard.
Three possible states of the sidebar.
Simple layout for a fullscreen pop-up.
Layout pages of the workspace dashboard.
The miscellaneous part of the design system consists of logo's, phone mockups and chat components to illustrate a conversation in Messenger. Not only is this useful for marketing, the conversation in Messenger is also good to illustrate a feature that has to work with Messenger (as we often do at POP).
Having all the components well documented in Sketch and later Figma really proved to be very timesaving and function as a great source of truth. Not just for myself but also for developers and designers that would join. Especially with the pre-designed layouts it's simple to start designing features.
Chat bubbles to be used to mimic Facebook Messenger UI and create mockups.
Mockup of Instagram story (left) and Instagram post (right).
Mockup of sending receipt (left) and lead generation (right) in chat.
Mockup of back in stock (left) and customer support (right) in chat.
The design system has resulted in improved and quicker collaboration with team members at POP. The main benefits being that engineers get consistent components in designs and that designers are forced to be consistent.
A very useful additonal benefit for me was that non-designers could also use our design system to quickly mock up ideas or suggest tweaks. This made it much easier and faster to collaborate and communicate ideas with the entire team.
Around 12 people working at POP have actively used the design system
Years of documenting design components
Components and styles documented in Figma
Press M to unmute audio