Unifying the Experience
In 2021 Kargo's Ecosystem has been growing significantly. Many platforms and applications have been made to improve our customer experience, but this growth came with an expense. Our components are scaling but it's not documented in a shared library, it slowed down our development & prototyping capability.
Armada 2.0
🧑🏻🎤 My Role
Product Designer, Governance Designer, UI Kit Maintainer & Creator Contributor, Orgs. Designer
📑 Project Type
Design System, Flow Design, UI Components, Technical
👯♀️ Collaborators
Engineers, Product Designer
🗓 Date & Place
Jun 2022 - Now, Kargo Technologies
💻 Final Output
Governance Flow
I design the governance workflow, and this is the output. For the first iteration, I'm not going deep into the details yet, so testing flow and some other details is not established yet as for now.
Governance Flow for Armada V 2.0
Design System Element Hierarchy
We redesign our file structure, making it align with our engineers' approach.
Refined Content
We re-evaluate what content each component should have on a foundational level.
Element Tracking
I built the element tracking to track all of the component requests, and allow other designers to contribute to the system (since our organizational model is federated, we have the core team but also allow people to contribute if they want to)
Story Book
Engineer start to build their own shared component.
Governance Flow for Armada V 2.0
✨ Outcomes
We just launched it, so we haven't measured much. but..
Adoption of our design has been sky-rocketing after our first socialization
We're flooded by feedback & request, trying to exercise our governance workflow in parallel and keep improving it
We're now starting to measure component adoption & detachment and investigating it for improvement <3
Scroll down for Design Process Overview or contact me
Design Process Overview
Kargo has several Platforms/Apps at that moment, from a high level they look the same and are very similar to each other. But it doesn't look like it when we look at it from a different perspective, even though they all look similar, for 1 use case we might have multiple patterns, and we are not sure why it happened, this problem scales along with our company and design team's growth.
All of the information can't be verbally shared anymore, someone has to codify it so everyone has a shared understanding. It all leads us to this project, to document and build a system that works so that our pattern, and experience, can scale consistently with clarity. The goal of this project is to, at least, launch our 1st release so that we can keep iterating afterward.
Discovery
We don't have a subject matter expert in design systems in the company at that time, so we have to figure out our-self, we did these:
What is a design system?
How other companies build their design system?
Where are we right now?
Opportunity Finding
After doing the discovery we realized that we have lots of problems, to sum it up:
'What we have does not thoroughly communicate the proper use of our Foundations and Components. This shows a lack of a common language between Design and Engineering, as there are no Guidelines and Governance in place. For context, this is our Design System now'
key item that we want to work on:
Organization Design
Define our principles -> what connected us? what is the desired experience?
Collaborate with engineers tightly
Define our Goal -> Start Working backwards (Working Bottom-Up)
Redefined our Design System structure
Complete Foundation
Complete UI Kit & Icon Kit
Complete Pattern
Work on Governance in parallel
Release Plan
After we built up the work plan, we start to execute.
Delivery
There are lots of deliverables of this project, what I'm going to share here is how we explore a use case of a component.
Usually we will start with its meta data first, try to benchmark, and discuss it in our weekly meeting.
We explore the user interface afterwards, once it finished, then we will ask people to try it out and start building out the acceptance criteria so that the component won't break
Lastly we wrap it out with documentation such as guidelines/anything that will help designer to understand the context of the component
Learning
As organization grows the more explicit knowledge > tacit knowledge, applies to anything including design system
How to communicate with engineer, it's very tricky when we're talking about design system
Understand better how figma works, with auto layout, breaking things down into atomic level. It can be very tricky sometimes, so I have to be also strategic when developing component
The importance of governance to keep the system living, and the feedback looping.
