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
UI Design
UI Design
UI Design
UI Design
IMPACT
IMPACT
IMPACT
IMPACT
Unified design language across 3 AI-powered products, reducing handoff time by ~30% and enabling dev team to ship new features 20% faster.
Unified design language across 3 AI-powered products, reducing handoff time by ~30% and enabling dev team to ship new features 20% faster.
Unified design language across 3 AI-powered products, reducing handoff time by ~30% and enabling dev team to ship new features 20% faster.
Unified design language across 3 AI-powered products, reducing handoff time by ~30% and enabling dev team to ship new features 20% faster.
I spent a year at Bloomreach building and implementing a design system from the ground up for an AI-powered SaaS platform used by enterprise teams. We called the system Banana (and yes, we did more than just make everything yellow 🍌).
I led the creation of core components and patterns, defined accessibility standards and design principles, and worked closely with frontend engineers to ensure smooth implementation across products.
The result was a unified, flexible design ecosystem that empowers designers and developers to move faster while maintaining consistency, usability, and trust across the platform.
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 Platform audit
01 Platform audit
01 Platform audit
First step happens was auditing 3 platforms that Bloomreach has. I went down to component and atom level, comparing the needs for the different platforms. Seeing where they differ, seeing where they overlap. What are the needs for a date picker component in one platform and what do they look like in the other? Do we need a quick select as part of the compoent or is it so specific it should be something we leave as custom?
This audit gave me a solid plan of what will be the design system foundations and what components do I need to start building.
First step happens was auditing 3 platforms that Bloomreach has. I went down to component and atom level, comparing the needs for the different platforms. Seeing where they differ, seeing where they overlap. What are the needs for a date picker component in one platform and what do they look like in the other? Do we need a quick select as part of the compoent or is it so specific it should be something we leave as custom?
This audit gave me a solid plan of what will be the design system foundations and what components do I need to start building.
First step happens was auditing 3 platforms that Bloomreach has. I went down to component and atom level, comparing the needs for the different platforms. Seeing where they differ, seeing where they overlap. What are the needs for a date picker component in one platform and what do they look like in the other? Do we need a quick select as part of the compoent or is it so specific it should be something we leave as custom?
This audit gave me a solid plan of what will be the design system foundations and what components do I need to start building.
02 Component design
02 Component design
02 Component design
The next step happens in Figma - this is where I created all the necessary components with all it's variables and states keeping in mind all of its current use cases in our platforms.
The next step happens in Figma - this is where I created all the necessary components with all it's variables and states keeping in mind all of its current use cases in our platforms.
The next step happens in Figma - this is where I created all the necessary components with all it's variables and states keeping in mind all of its current use cases in our platforms.
03 Documentation
03 Documentation
03 Documentation
Once the design was in place, I wrote a detailed documentation for all the components which was available for both design and dev team in Storybook. My documentation bridged design and development, providing clear guidelines, visual specifications, and implementation details. This became the single source of truth for designers and developers.
Once the design was in place, I wrote a detailed documentation for all the components which was available for both design and dev team in Storybook. My documentation bridged design and development, providing clear guidelines, visual specifications, and implementation details. This became the single source of truth for designers and developers.
Once the design was in place, I wrote a detailed documentation for all the components which was available for both design and dev team in Storybook. My documentation bridged design and development, providing clear guidelines, visual specifications, and implementation details. This became the single source of truth for designers and developers.
04 { Code implementation }
04 { Code implementation }
04 { 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 components.
And that’s exactly what we built.
Building blocks that scaled into a
design system.
Cool, we have a checkbox.
Now just all the other components.
And that’s exactly what we built.
Building blocks that scaled into a
design system.
© vh.studio · 2025