None?
also none
Discovery
As we explored the problem in greater detail, we discovered the reality extended beyond visual design.
After spending time with the external development team, it became clear that many inconsistencies within the product reflected inconsistencies within the codebase itself.
Components that appeared visually similar were often implemented entirely separately.
Buttons were one of the most striking examples.
Rather than using a shared component, new buttons had frequently been created whenever a feature required one. In some areas of the platform, multiple button implementations existed on the same page.
Similarly:
- Colours were sometimes managed centrally and sometimes hardcoded
- Containers and cards often existed as page-specific implementations
- Navigation patterns varied throughout the platform
- Layout structures lacked consistency
This reinforced our belief that solving the problem required more than a visual refresh.
We needed to establish a shared system that could be adopted by both design and development.
Creating Alignment
Importantly, this was not a project we had been asked to undertake.
The initial goal was to redesign a specific workflow.
However, while exploring potential solutions, my fellow designer and I began creating redesigned concepts using a more consistent visual language.
These concepts included:
- Updated navigation patterns
- Refined typography
- Consistent spacing
- Unified component styling
- Improved visual hierarchy
When presenting these concepts to stakeholders, feedback was overwhelmingly positive.
Conversations quickly shifted away from the original workflow and towards a broader question: 'Can we make the entire platform look like this?'
What began as an exploratory exercise gradually evolved into an agreed strategic initiative internally known as Standardisation.
Defining the Foundation
To maximise impact while minimising implementation effort, we focused first on areas capable of improving the experience across the entire platform.
This included establishing standards for:
- Colour usage
- Typography
- Border radius
- Spacing and padding
- Page layouts
- Navigation structures
- Core interface components
A key objective throughout was avoiding unnecessary disruption.
Rather than introducing radical layout changes, we focused on creating consistency through patterns that could be implemented incrementally.
This approach allowed us to improve the product experience while remaining mindful of development effort and existing user familiarity.
Building a Design System
As the initiative progressed, we began building what effectively became Bolster's first design system.
Within Figma, we created:
- Reusable component libraries
- Component variants
- Shared styles
- Standardised page templates
- Light and dark theme considerations
- Interaction patterns for future features
Over time, this evolved into a comprehensive representation of how the platform should look and behave.
For the first time, design and development had a shared reference point for creating new functionality.
This significantly reduced ambiguity during handoff and established a consistent visual language across future projects.
Implementation Strategy
Given the scale of the platform, replacing everything simultaneously was unrealistic.
Instead, we worked with the development team to create a phased implementation strategy.
Phase 1: Visual Standards
Shared styles for typography, colours, spacing, and other foundational elements were established and applied across the platform.
Phase 2: Structural Components
Core navigation elements including:
- Side navigation
- Top navigation
- Footer
were rebuilt and standardised.
Phase 3: Reusable Components
A new button system and other reusable components were introduced.
Rather than requiring a large-scale refactor, these components were adopted whenever areas of the platform were updated or redesigned.
This allowed standardisation to spread organically across the product while avoiding significant disruption to development priorities.
Outcome
Standardisation fundamentally changed how design and development operated within Bolster.
The initiative provided:
- A shared visual language
- Reusable design patterns
- Improved consistency across the platform
- More efficient collaboration between design and development
- Faster creation of future features
- A foundation for large-scale initiatives such as Bolster Plus
Most importantly, it shifted the organisation away from designing and building individual screens in isolation and towards thinking in systems.
By establishing common standards and reusable components, we created a scalable framework that could support the platform's future growth while significantly improving the experience for both users and internal teams.
Reflection
One of the biggest lessons from this project was recognising when the problem being solved is larger than the task originally assigned.
We were asked to redesign a workflow.
Instead, we identified an opportunity to improve the foundations of the entire product.
While the resulting design system was valuable in itself, the greater impact came from creating alignment across design, development, and leadership around a shared vision for the platform's future.
