Through 2020, PIMCO lacked any formalized design system. The web experience had become a large repository of technical debt, with many instances of similar or repurposed components with unique programming and lack of unity. Different initiatives had different styles and standards.
What we found:
Different approaches from both technology and design have created disjointed experiences and inconsistent branding across the global sites.
32 regional sites, multiple languages, all with differing marketing strategies and audience characteristics.
Site load speed was a concern from user feedback. Streamlining the back and front end is key.
Need for scaling across multiple sites and possibly internal platforms in the future.
We needed to be sure to set our foundations and align with the Brand Design team to better inform the basis of our user interface and experience. We explored refined with best practices, accessibility standards and incorporated our designs in our essential patterns for layout and interaction.
We maintained a consistent design language across the UI. We accounted for multiple scenarios, background, and use cases. This allowed for more flexibility for execution with a wide array of use cases and module possibilities.
With Figma styles library, we setup our color styles broken out by function, category, and interaction palettes. Our typography scale was broken out by display, utility, body, and supporting styles.
We proceeded to create a component library, a collection of reusable interface elements themed by their foundations file. Our effort focuses on provided the proper building blocks so that we could easily create larger modules and design full layouts and interactions with ease and flexibility.
We made full use of Figma’s functionality to create robust components with variants, toggle layers, and nested components so that a designer could select a single component but also be able to work through an entire interaction flow by using the variables that we built in.
The goal was to have a well-organize library and source of truth for each component so that it was easy to maintain and update over time – even in the case of a major branding change.
Surely, the next step that needed to be taken was to put these components into larger modules so that we could build proper layouts and pages. With various input, experience, and feature goals, we created a large array of reusable and customizable items for use of our Content managers to craft a variety of layouts and user experiences.