MBS Design System
Building a scalable design system to improve product consistency, streamline collaboration, and support faster development across teams.
Client
Vulcano Company
Industry
Fashion
Date
2022
Role
UX/UI Designer
Scope
Website redesign, UX strategy, Business alignment
Built a design system from scratch that unified visual language across a securities platform and reduced friction between design and development.
The MBS Design System is the structural foundation for a product serving thousands of active users. What makes it interesting isn't the components — it's how the system changed the way two teams communicated: designers stopped rebuilding the same elements, developers stopped asking the same questions.
I worked on building the style guide as a usable system for both designers and developers.
My responsibilities included:
identifying the missing foundations needed for a shared system
structuring visual foundations such as color and other reusable rules
standardizing commonly used components
documenting usage guidelines
helping create a shared language between design and development through clearer system logic
This work was done with support from teammates, but my focus was on turning fragmented UI patterns into a more unified and maintainable structure.
Before building any components, the team and I began by auditing the existing interface to identify inconsistencies and determine the foundational elements that needed to be prioritized. This step ensured that we didn't build a theoretical system that failed to reflect the actual product.
The team held a brainstorming session to evaluate the current app's Information Architecture (IA). Following this, we defined a new IA direction to align with the overall app redesign and the implementation of the new design system.
# | Problem |
1 | Same components looked different across screens — no single source of truth |
2 | Every handoff required repeated manual explanation on both sides |
UI before establishing a design system: Components were designed from scratch for every screen, with no consistent rules in place. This resulted in identical components, such as buttons, having different corner radii or font sizes despite sharing the same dimensions.
There was a clear disconnect between design and implementation, compounded by loose management of design tokens. The Light theme suffered from contrast issues compared to the Blue and Purple themes. Furthermore, some interfaces lacked high-fidelity designs, consisting only of wireframes that were then coded directly.
