Walkthrough of how I adapted the
process to the needs
Overview
In this 5 month long project, I managed the operation and contributed to the design. The goal in this project was slightly different than the two other DSs I built in the past. Streamlining the development process in this project took the back seat to give the priority to:
Business needs:
With the acquisition of CodinGame, I needed to align the UIs of our product portfolio to help the cross-selling efforts.
Design operation
With a team spread in two continents, I needed to create a shared definition and principles around our core UI elements and align the way we design.
An unconventional start
While it's customary to follow atomic design principles for design systems, I faced time constraints and needed to address business needs promptly. Instead of starting with the core elements, I adopted a creative approach by beginning with a broader project definition and using the product's navigation as the entry point to kick-start the project.
Although this was a top-down approach, I ensured the team considered all essential core decisions. We adopted industry standards like the 8dp grid system and provided templates and references to guide our work.
Our unconventional start to the design system project had several benefits. The changes had an immediate positive impact on the products which aided our sales team in their cross-selling efforts. The organization's recognition of these results boosted the design team's motivation, helping them embrace the project with greater enthusiasm.
After that, the pressure from the team was removed and allowed us to start having a more standard planning around the project.
Enabling the entire team to contribute
Designing and maintaining a design system could be a full-time job, but without a dedicated designer, I turned this limitation into an advantage by fostering a collaborative team effort, ensuring everyone felt a sense of ownership. I worked closely with one designer to:
Define and create templates to outlining the process and necessary documentation for each element.
Create the core tokens such as spacing and radius units, fonts, and colors that were the basis for design of any component.
Below show an example of those templates in use for the icons.
Enabling the entire team to contribute
Creative ways to involve everyone and expedite the process
With a team spread geographically, it was crucial for everyone to feel involved in this foundational work and have a say in the design and guidelines. To achieve this, I organized a collaborative working session/workshop. I specified a few components for the team to work on.
Text Inputs
Kristen
Masha
Input fields [text, paragraph, combo-fields, dropdowns, sizes and different states, sizes]
Field error, form error
Section title
Section description
[Dark, light mode]
Dialog
Gaby
Maryam
Forms
Modal (size, spacing, content, usage guideline)
Other forms: Slider (Keep, loose? Design specifications, guidelines)
Full page modals?
Tooltip ( types [ info, info+action/link, design specifications [size, spacing, font, action types], guidelines )
Menus
[Dark, light mode]
Notifications
Beth
Ihor
Types
Alerts
Notification tile (toast messages)
Banner
Cases [announcements, status, warning, error, confirmation]
Form submit status
Notifications
Product level messaging
Light Mode, Dark Mode
Notification with actions
The goal was to design, define principles, review, and audit the products and examine the fit of the new components, all in one session. This approach was successful and positioned everyone to contribute more effectively going forward.
Maintaining and expanding the system
After creating the initial set of components, it was important for the team to embrace them, properly utilize them and design with component thinking. I made a simple guide to to help the team with those.
Adding a component
How to know when to add a component ?
If you feel the need for a recurrent element that isn’t yet present in our design system, a new component may be needed.
Start here ⬇️
Yes
Many cases
No
Yes
Humm ... Not realy sure
Yes
No
No
Yes
No
Yes I’m really sure !
It’s a very specialized case
Hummm ... Actually no !
Yes, and I feel bad about it
Does your design element adhere to existing components ?
Can you change your design element to match an existing component ?
Is this a one-off design element or are there other use cases ?
Is your design quite similar to an existing component ?
Is your design relevant to all places where the existing component is used ?
Really sure that your design can’t be tweaked to match the component ?
Can you make it generic and sustainable enough so it can be used in many places in the future ?
Are you absolutely sure you have to do it this way ?
Use the DS component and enjoy it 🎉
Challenge your design ! It must be generic and turned into a reusable DS component.
Create a new component ⭐️
Update the component based on your design 😇
Tweak your design to use the existing component 🙏
Challenge your design 😎
Create a new variant of the existing component 😜
OK, do it. Note how rare this is and must be 🙏
Validation process
Here are the steps needed for your new component to be validated and pushed to all once you have designed it.
Showcase
Take some key pages and showcase the component. This will allow the team to see how to use it and if it works.
Offline feedback
Let the design team know you have worked on a new component and share it with them. Ask for their feedback through slack or figma.
Review (one or multiple times)
Have the design team review the component during one of our standards call. If feedback have been given, rework the component and then bring it back to a review session.
Announce
During the following design review, announce the new component.
Publish
Once everyone is aware of this new component, publish it in figma so that all designers can start using it.
Ticketing
TBD
This five-month project was successful on multiple levels. This post covers some of the highlights, but there are many more details I can share in an
in-person session.