.png)
sEQUENCE Design
system
team alignment
I met with the Head of Design, the CTO and the Design System Engineer to align on the steps to create the Sequence Design System.
Blockers
I advocated for upgrading our Figma tier to obtain Branching functionality for better version control and easier collaboration.
Template
I presented a template for organizing components along with their documentation and specs to internal stakeholders.
governance model
I explained best practices regarding utilizing a Design system and working with components. I also outlined how this would speed up design and development efforts.
planning
variables
I defined a set of primitive and semantic variables for colours, spacing and radius to help manage the overall design system. I also defined elevation, typography, icons and materials.
limitations and blockers
A lot of these values had to be extrapolated from already implemented components so collaborating with engineering was essential to the process.
foundation
process
New components were created and organized under a new asset library. Old components were revised and updated by introducing auto layout properties and by naming layers.
documentation and specs
Each component sheet includes documentation regarding usage, behaviour and accessibility. When needed, component sheets also detailed best practices (dos and don'ts) for component usage within the UI. Anatomy and behaviour information accompanied components to provide useful information for engineers.
components
purpose
I created page templates to make wireframing efficient and fast
Organization
The page templates were divided between the different Sequence products: Builder, arketplace, Wallet.
page templates
code connect
I am working with the engineering team to implement code connect and help bridge the gap between design and engineering. I am hoping this will reduce manual handoff mistakes and speed up implementation.
meeting mvp requirements
The new Design System met MVP requirements by:
-
creating a robust asset library and governance model
-
some projects are completed twice as fast due to the availability of flexible and well documented components
next steps and project success
overview
role
This is a project that I worked on for Sequence Builder throughout 2024. I was supervised by the Head of Design and collaborated with the Design System Engineer.
problem
The Builder had very few design assets that were undocumented and unorganized. Foundations were not defined, and neither were design workflows.
solution
Defining design system foundations, creating an asset library and defining a governance model.
KPIs
-
Component adoption rate: over 80% of UIs are built using components from the library without the need to diconnect them
-
At least 30% decrease in time used to create UIs
purpose
I included a schematic that represents the Figma folder organization for both transparency with the rest of the team and easy onboarding of new designers.
folders
There are four main folders that were created: the main component library, handoffs, user flows and prototypes for user testing.
figma folder organization
content
The governance model shows how the design system should be utilized in two different scenarios:
-
new design request
-
updates to the design system
purpose
The governance model provides best practices to the design team and ensures there is clarity around the design practices.
governance
Learnings
One of my bigest takeaways from this project is that continuous iteration is key. A design system is never “done”—it evolves based on feedback and product needs. That's why it's important to keep communication channels open and be open to feedback.