Bloomreach
Creating design system to scale development
Bloomreach
Creating design system to scale development
CLIENT
CLIENT
CLIENT
CLIENT
Bloomreach
Bloomreach
Bloomreach
Bloomreach
TIMEFRAME
TIMEFRAME
TIMEFRAME
TIMEFRAME
1 year, 2024
1 year, 2024
1 year, 2024
1 year, 2024
ROLE
ROLE
ROLE
ROLE
Design Systems
Design Systems
Design Systems
Design Systems
Design Docs
Design Docs
Design Docs
Design Docs
UI Design
UI Design
UI Design
UI Design
IMPACT
IMPACT
IMPACT
IMPACT
Unified brand experience across platforms & faster development turnover of new features
Unified brand experience across platforms & faster development turnover of new features
Unified brand experience across platforms & faster development turnover of new features
Unified brand experience across platforms & faster development turnover of new features
I spent a year with the Bloomreach design team on building and implementing a design system from the ground up. We called it Banana - I promise we did more than just making everything yellow 🍌: From crafting individual components and patterns to documenting them and working closely with frontend developers on implementation, I made sure everything was designed for both usability and scalability. I also defined accessibility guidelines and design principles, ensuring a seamless experience across the platform. The result is a unified ecosystem that empowers designers and developers alike. We love bananas! Do you?
I spent a year with the Bloomreach design team on building and implementing a design system from the ground up. We called it Banana - I promise we did more than just making everything yellow 🍌: From crafting individual components and patterns to documenting them and working closely with frontend developers on implementation, I made sure everything was designed for both usability and scalability. I also defined accessibility guidelines and design principles, ensuring a seamless experience across the platform. The result is a unified ecosystem that empowers designers and developers alike. We love bananas! Do you?
I spent a year with the Bloomreach design team on building and implementing a design system from the ground up. We called it Banana - I promise we did more than just making everything yellow 🍌: From crafting individual components and patterns to documenting them and working closely with frontend developers on implementation, I made sure everything was designed for both usability and scalability. I also defined accessibility guidelines and design principles, ensuring a seamless experience across the platform. The result is a unified ecosystem that empowers designers and developers alike. We love bananas! Do you?
The making of a checkbox.
Or well, of any component in the 🍌 system..
The making of a checkbox.
Or well, of any component in the 🍌 system..
01 Component design
01 Component design
01 Component design
First step happens in Figma - this is where we created the checkbox component with all it's variables and states keeping in mind all of its current use cases in our platforms.
First step happens in Figma - this is where we created the checkbox component with all it's variables and states keeping in mind all of its current use cases in our platforms.
First step happens in Figma - this is where we created the checkbox component with all it's variables and states keeping in mind all of its current use cases in our platforms.
02 Documentation
02 Documentation
02 Documentation
In the second step I wrote a detailed documentation for the component. Our documentation bridged design and development, providing clear guidelines, visual specifications, and implementation details. This became the single source of truth for designers and developers.
In the second step I wrote a detailed documentation for the component. Our documentation bridged design and development, providing clear guidelines, visual specifications, and implementation details. This became the single source of truth for designers and developers.
In the second step I wrote a detailed documentation for the component. Our documentation bridged design and development, providing clear guidelines, visual specifications, and implementation details. This became the single source of truth for designers and developers.
03 { Code implementation }
03 { Code implementation }
03 { Code implementation }
The implementation phase was a collaborative journey between the design and frontend dev team. While the starting point for devs was the documentation I wrote, the process also involved a continuous dialogue to clarify any implementation details and design decisions. With limited resources, we also had to make tradeoffs. We established a pragmatic approach, prioritising core functionality and agreeing to defer more complex variants to future design system iterations. This iterative process allowed us to maintain high-quality standards while remaining flexible and responsive to evolving product needs.
The implementation phase was a collaborative journey between the design and frontend dev team. While the starting point for devs was the documentation I wrote, the process also involved a continuous dialogue to clarify any implementation details and design decisions. With limited resources, we also had to make tradeoffs. We established a pragmatic approach, prioritising core functionality and agreeing to defer more complex variants to future design system iterations. This iterative process allowed us to maintain high-quality standards while remaining flexible and responsive to evolving product needs.
The implementation phase was a collaborative journey between the design and frontend dev team. While the starting point for devs was the documentation I wrote, the process also involved a continuous dialogue to clarify any implementation details and design decisions. With limited resources, we also had to make tradeoffs. We established a pragmatic approach, prioritising core functionality and agreeing to defer more complex variants to future design system iterations. This iterative process allowed us to maintain high-quality standards while remaining flexible and responsive to evolving product needs.
Cool, we have a checkbox.
Now just all the other componets
and we have a design system
Cool, we have a checkbox.
Now just all the other componets
and we have a design system
© vh.studio · 2025