Renaissance Design System

Overview

Building a design system from the ground up to craft common design language foundation for PIMCO’s regional websites.

Year
2022-2023
Client
PIMCO
Services
UX / UI Design, Project Management, Prototyping

The problem

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:

  • Conflicting guidelines and direction.
  • Duplication of common components.
  • Inconsistencies across market websites and microsites.
  • Pressure for agile solutions without discovery and research.
  • Siloed teams working with disjointed communication.
No items found.

The challenges

Different approaches from both technology and design have created disjointed experiences and inconsistent branding across the global sites.

Multiple Regions

32 regional sites, multiple languages, all with differing marketing strategies and audience characteristics.

Speed & Efficiency

Site load speed was a concern from user feedback. Streamlining the back and front end is key.

Scalability

Need for scaling across multiple sites and possibly internal platforms in the future.

Our foundation

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.

No items found.

The components

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.

Modules

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.

No items found.