Back To Work
Zenith Design System
Years: 2022 – 2023
Summary:
This company had an existing design system that needed updated components and patterns. I contributed a few designs that were added to the system and built on top of. I later became the design system lead after organizational restructuring.
Challenges :
The platform was built on top of a low-code development tool that came with out-of-the-box components. But the components given left a lot of holes in the system. I was often tasked with creating new components that fit the system while also writing documentation.
(Example of the only alert types the low code tool provided)
Problem:
Users need a collection of alerts so the system can provide them with visual feedback on successful actions, errors, updates etc.
Process:
I started by researching the industry standard for alerts from other design systems. Then, based on those examples, I wrote use cases for when each alert type.
As I thought of use cases, I built the components in Adobe XD. I built them based on Atomic Design; figuring out what were the atoms and molecules. I also make each alert responsive, so that when a designer types in words, it auto-resizes accordingly.
( Alert – Broken down according to Atomic Design )
( Alert – Built to be responsive for editing in Adobe XD )
( Alert – Options in XD as States )
Result:
Finally, I broke down the component’s different states such as success, error, warning, and info. This was part of the hand-off I sent to the UI Developers working on the system. I did pair coding to provide live feedback and knowledge of CSS to the developers as they built the design.
( Alert Types Part 1 )
( Alert Types Part 2 )
(Alert types Part 2)
Scaling:
Once becoming the Lead, I gathered a group of designers and devs to come up with a way for teams to contribute to the Design System. A lot was being built but the Design System team was unaware of what needed to be tested and added for reuse. I created a decision tree to guide teams on when to contact our team.
( Black rectangles used to redact company information )
Additional Deliverables:
Here are other examples of UI elements I designed and worked with developers to build for the system.
Tags
Button Types
Button Colors
Split Button
Drag and Drop List Item
Reorderable List Item
Expandable Cards
Builder Template
Map Design
