Situation
During my time at Caterpillar, I was responsible for leading the vision and strategy for a set of marketing technologies. This included the Adobe Experience Cloud infrastructure, which supported a network of over 100 websites and 15+ supporting technology platforms.
However, over the years, ad-hoc front-end design and development had resulted in significant UX and technical debt within the platform. This slowed down development, constrained design ideas, and limited functionality enhancements, while also increasing maintenance and support costs. As a result, we needed to overhaul the front-end framework of this legacy platform to offer more flexibility and creativity to content creators.
The product had been augmented over time by multiple developers with little in the way of code standards. This resulted in a front-end code structure that was difficult to scale or evolve due to:
- Multiple codebases, with no common library of web elements and styles
- Poorly organized cascading styles and javascript libraries
- Hundreds of redundant templates and components
- Custom-coded elements were used instead of utilizing the platform’s native capabilities
- Design and prototyping took longer since elements were being recreated.
- Designs were inconsistent, with each party creating UI elements “their way.”
- Final design assets were not aligned with legacy code, making it more difficult to integrate. Development took longer as teams spent more time figuring out how to implement new designs in old code.
Multiple designers, developers, and strategists worked on the same codebase, but:
- They had varied approaches to their solutions
- They often recreated elements from scratch with each new endeavor
With hundreds of websites across different companies, the needs were quite varied and difficult to anticipate.
Actions
I led the effort to overhaul the front-end framework on existing legacy platform to offer more flexibility and creativity to content creators. We built a design system that accounted for all aspects of the existing design, as well as new features to be introduced.
Needs Analysis
- I evangelized the need and benefits of design system throughout organization.
- I complete a technical assessment which revealed scale of challenge
- I work with teams to evaluate strategic options for addressing issue.
Strategy & Design
- I defined all common use cases for templates and components across the sites.
- I developed strategy for streamlining and consolidating existing web elements.
- Worked with design teams to create a new design system using graphic files, live front-end code, and best practices.
Development
- Worked with platform team on plan for integrate new front-end code into existing legacy system
Results
Design
- Improvements to the speed and quality of designs.
- Introduction of rapid prototyping to test multiple concepts quickly.
- Enable non-designers to plan their content
- Design consistency within the website, as well as across other company channels and websites.
Development
- Future-proofed, extensible code that is easier scale
Collaboration
- Provides consistent direction and guidance to multiple parties.
- Better communication between designers, developers, and strategist. Common visual language.
Costs
- Changes and enhancements to platform are easier and can be completed with more velocity.
- Reduce supplier costs for design and development.
- Repurpose time and focus into user testing and content creation.