The problem

PIMCO.com's design system, while functional, lacks performance considerations. This leads to slower loading times, potential user frustration, and inefficiencies for developers.

Priorities:

• Visual Hierarchy: Clearly prioritize information and guide user attention.
• Consistency: Maintain a consistent design language throughout the portfolio.
• Interactivity: Incorporate interactive elements to enhance user engagement.
• Responsiveness: Ensure the portfolio is optimized for different screen sizes.

Challenges and Past Efforts

While the previous iteration of the project addressed many challenges, the  focused on refining the design system for optimal speed and efficiency. Some key areas of focus included:

• Unified Design Language: Ensuring a consistent visual identity across all global sites, despite regional variations in marketing strategies and audiences.
• Enhanced Scalability: Preparing the design system for future expansion to additional sites and platforms, while maintaining performance and efficiency.
• Continued Performance Optimization: Building upon the previous phase's improvements, we explored additional techniques to further streamline the front-end and back-end, ensuring lightning-fast load times.

By addressing these challenges in the past phase, we aimed to create a more cohesive and efficient design system that better served both users and developers.

Research and Discovery

• Benchmarking: We analyzed design systems employed by other financial institutions to identify best practices and performance optimization strategies.
• User Research: conducted with PIMCO employees, especially those involved in content creation and website updates, to understand their pain points and desired improvements.

Defining Optimization Strategies

Based on the research findings, we prioritized optimization strategies that would have the most significant impact on performance and user experience. These included:

• Component Performance Optimization: Evaluating component code for efficiency and implementing techniques like lazy loading, code splitting, and caching for frequently used components.
• Image Optimization: Analyzing and optimizing image formats and sizes to reduce file size without compromising visual quality.
• Caching and Content Delivery Networks (CDNs): Leveraging browser caching and CDN caching for static assets like images and fonts to minimize server load and improve page load times.
• Code Minification and Bundling: Combining and minifying CSS and JavaScript files to reduce their size and improve load times.
• Server-Side Rendering: Evaluating critical content sections and potentially implementing server-side rendering to improve initial page load performance.

Design and Prototyping

From the design perspective, we also used these factors but in regards to minimal viable use cases. As an example, we made sure to include only the required inputs and fields for a component, and made sure to reuse items like introduction copy sections within most of our most common modules. Scalability considerations and reuse was key in these efforts.

To showcase the potential benefits of our implementations we created multiple proofs of concept., developing pages and interactions based on previous site content. With that, we witnessed improvements in website performance, specifically page load speed.

In other instances, prototypes were created. These prototypes used the new system and showcased how they would work within experience. We used this method to gather feedback and refine the designs when we deemed that it was better to test prior to development. Our enhanced navigation layout and UX was a key item where we demonstrated the benefits and cleaned up the accessibility from previous iterations.

A large production pain point from the previous site was creating image assets at many different sizes to use in various locations. We developed a system that only requires one size image to be uploaded and is then scaled and optimized on the back-end to be placed in various containers and locations. This cuts the production needs and assets by nearly 95%, also resulting in a drastic time savings.

Implementation and Rollout

Once individual components became more finalized, the elements were seamlessly integrated into PIMCO.com's live environment. To ensure developers could effectively leverage the new system, training sessions and handoff meetings were held to cover expectations and final outcomes.

Following periodic releases, continuous performance monitoring was implemented to identify any additional areas for optimization, keeping PIMCO.com running at peak performance.

Evaluation and Outcomes

To gauge the success of the optimizations, key performance indicators (KPIs) were established, focusing on page load speed, user engagement metrics, and developer productivity gains.

Post-implementation data analysis revealed substantial improvements in page load speed, a 20% reduction, and increased user engagement attributed to a faster and more responsive website.

Developers also benefited from streamlined implementation guidelines, leading to increased efficiency.

Conclusion

Optimizing PIMCO.com's design system yielded significant gains across website performance, user experience, and development efficiency.

Looking ahead, continuous improvement can be achieved through integrating performance monitoring tools and A/B testing.

This project underscored the significance of user research and performance optimization in design systems, highlighting the value of iterative design and testing in creating a high-performing and user-friendly website.