Design System Pilot Reduces Development Time by 50% Through Component Reuse
A pilot design system project cut development overhead in half, proving the effectiveness of consolidating duplicated code and streamlining the UI architecture.
Role
Lead Designer
Timeline
2 months
Impact
Gained executive approval for further design system initiates
Design System Pilot Reduces Development Time by 50% Through Component Reuse
A pilot design system project cut development overhead in half, proving the effectiveness of consolidating duplicated code and streamlining the UI architecture.
Role
Lead Designer
Timeline
2 months
Impact
Gained executive approval for further design system initiates
As Launchpad's low-code platform grew, every team had independently built their own version of dynamic value setting. This is considered a table-stakes capability that developers need dozens of times daily. In the absence of a cohesive feature, users were faced with a fragmented experience where the same essential function looked and worked differently across the platform.
**Stakeholder assumption:** Product management viewed this as a feature for "technical users" so therefore it didn't warrant investment in user experience improvements.
As Launchpad's low-code platform grew, every team had independently built their own version of dynamic value setting. This is considered a table-stakes capability that developers need dozens of times daily. In the absence of a cohesive feature, users were faced with a fragmented experience where the same essential function looked and worked differently across the platform.
**Stakeholder assumption:** Product management viewed this as a feature for "technical users" so therefore it didn't warrant investment in user experience improvements.
As Launchpad's low-code platform grew, every team had independently built their own version of dynamic value setting. This is considered a table-stakes capability that developers need dozens of times daily. In the absence of a cohesive feature, users were faced with a fragmented experience where the same essential function looked and worked differently across the platform.
**Stakeholder assumption:** Product management viewed this as a feature for "technical users" so therefore it didn't warrant investment in user experience improvements.
Looking for a strategic designer to help shape your product?
Project Overview
Key Results
Reduced development time for component updates by 50%
Consolidated 7 different page templates into a single configurable component
Gained executive approval for further design system work.
We piloted a page template project to demonstrate the value of investing in further design system efforts for Launchpad.
Uncovering underlying reasons for balooning technical debt
Despite an apparently consistent UI, code inspection revealed that teams had forked core components, creating significant maintenance challenges. Simple changes like icon updates required over a month to implement in production.
Developer interviews revealed that they avoided using the Core UI library directly because updates often created breaking changes and significantly increased testing requirements.
Fractured development efforts and difficulty adopting the Core UI library resulted in unecessary duplication of component code.
Outcome
Real-world validation of our solution gained executive buy-in for future design system work
Our pilot project simplified seven different page templates into one configurable component with three base templates: Landing Page, Inventory Page, and Detail Page.
Once the page component went live, our Chief Product Officer requested a visual change. The development team estimated only one sprint for implementation which was a dramatic improvement that secured executive buy-in for further design system work.
I consolidated 7 page components down to 1 that supported 3 primary base templates that supported additional configuration.
Solution
Implementing a new UI architecture to streamline development and improve system adoption
Collaborating with UI Architects and Backend Architects we created a new Authoring Design System repository to serve as a buffer between Core UI and product teams. This approach enabled more controlled updates while facilitating the creation of shared, reusable components compatible with backend systems. Development teams felt more compelled to develop with the system once we addressed the underlying pain point to adopting the system.
Previously there wasn't a seperation of the backend logic from the front end components.
We implemented a UI architecture that made it easier for the back end teams to adopt and made it faster for us to make UI updates.
I consolidated 7 page components down to 1 that supported 3 primary base templates that supported additional configuration.
Design System Pilot Reduces Development Time by 50% Through Component Reuse
A pilot design system project cut development overhead in half, proving the effectiveness of consolidating duplicated code and streamlining the UI architecture.
Role
Lead Designer
Timeline
2 months
Impact
Gained executive approval for further design system initiates
Design System Pilot Reduces Development Time by 50% Through Component Reuse
A pilot design system project cut development overhead in half, proving the effectiveness of consolidating duplicated code and streamlining the UI architecture.
Role
Lead Designer
Timeline
2 months
Impact
Gained executive approval for further design system initiates
Design System Pilot Reduces Development Time by 50% Through Component Reuse
A pilot design system project cut development overhead in half, proving the effectiveness of consolidating duplicated code and streamlining the UI architecture.
Role
Lead Designer
Timeline
2 months
Impact
Gained executive approval for further design system initiates
Project Overview
Key Results
Reduced development time for component updates by 50%
Consolidated 7 different page templates into a single configurable component
Gained executive approval for further design system work.
We piloted a page template project to demonstrate the value of investing in further design system efforts for Launchpad.
Core Challenge
Uncovering underlying reasons for balooning technical debt
Despite an apparently consistent UI, code inspection revealed that teams had forked core components, creating significant maintenance challenges. Simple changes like icon updates required over a month to implement in production.
Developer interviews revealed that they avoided using the Core UI library directly because updates often created breaking changes and significantly increased testing requirements.
Fractured development efforts and difficulty adopting the Core UI library resulted in unecessary duplication of component code.
Solution
Implementing a new UI architecture to streamline development and improve system adoption
Collaborating with UI Architects and Backend Architects we created a new Authoring Design System repository to serve as a buffer between Core UI and product teams. This approach enabled more controlled updates while facilitating the creation of shared, reusable components compatible with backend systems. Development teams felt more compelled to develop with the system once we addressed the underlying pain point to adopting the system.
Previously there wasn't a seperation of the backend logic from the front end components.
We implemented a UI architecture that made it easier for the back end teams to adopt and made it faster for us to make UI updates.
I consolidated 7 page components down to 1 that supported 3 primary base templates that supported additional configuration.
Outcome
Real-world validation of our solution gained executive buy-in for future design system work
Our pilot project simplified seven different page templates into one configurable component with three base templates: Landing Page, Inventory Page, and Detail Page.
Once the page component went live, our Chief Product Officer requested a visual change. The development team estimated only one sprint for implementation which was a dramatic improvement that secured executive buy-in for further design system work.
Once in place, we were able to demonstrate a significant reduction in development time for making UI presentation changes.