top of page

Implementing a Design System from scratch

My aim was to ensure a seamless, accessible user experience across Principal Financial Group's digital channels in Chile, with consistency as our guide. Employing a modern design system was our strategy to meet this user-centric vision efficiently.

Joining the digital transformation effort

In 2017, I embarked on a transformative journey with Principal Financial Group's Digital Experience Lab in Chile, aiming to revolutionize the digital presence of Principal’s suite of companies. As the 15th employee in a fast growing organization, my role quickly evolved from Staff UX Designer to Design Manager and later to Head of UX, reflecting the need for design leadership in a company at the cusp of digital reinvention.

Assorted collection of user interface buttons with different shapes and styles

Identifying the challenge

My early analysis revealed a disjointed digital experience, characterized by inconsistent UI elements across our platforms. This inconsistency, evident in everything from button designs to color schemes, signaled the need for a unified approach to enhance trust and usability in our financial services.

Vision for a unified Design System

The limitations of existing component libraries led to a pivotal realization: we needed to create our own design system. This vision aimed at consistency and efficiency, fundamental for building customer trust in the financial sector.

Image depicting a set of gray circles over a white background. Each circle contains the name of a business unit of Principal
Image created with DALL-E depicting people in a meeting room

Gaining support and building the case

Convincing business leaders of the design system's value was critical. I presented compelling arguments highlighting benefits like reusable components, streamlined collaboration, and long-term scalability. This advocacy secured the necessary support to move forward.

Pioneering a Design System

Guided by ambition and constrained by resources, my team led the creation of Principal Chile's inaugural design system. We crafted a UI component library to achieve visual consistency across digital platforms. Crucially, in partnership with engineering, we developed coded components—this collaboration was pivotal, ensuring our design intentions seamlessly translated into practical application. Together, we laid the foundation ahead of the wider enterprise initiative, setting a precedent for innovation at Principal.

 

This endeavor not only exemplified the importance of aligning goals among engineering, design, and product teams but also showcased the transformative impact of strategic vision and cross-functional collaboration on achieving digital excellence.

Image depicting colors, typography and other User Interface elements from the design system
Map of the world which highlights the city of Santiago, Chile and Des Moines USA

Collaborating beyond borders

Our collaboration with the corporate UX team was a first for the organization, setting a milestone. We were crucial in establishing the enterprise-wide design system with our initial visual designs, setting its tone and theme. The design system underwent many iterations, but its visual identity originated from our contributions.

 

This partnership helped create a unified design language and ushered in a new era of collaboration within the organization. Our efforts kickstarted the development process, showcasing how a strong vision from the start can inspire continuous refinement.

Legacy and impact

The journey from recognizing the need for a design system in Chile to influencing a global design strategy exemplifies the power of strategic vision and collaboration. Today, the value of such a system in accelerating product development and ensuring design consistency is universally acknowledged, marking a significant milestone in Principal’s digital evolution.

Screenshot of the website for Principal Financial Group's design system website.

Visit Principal's enterprise design system at design.principal.com

Principal Financial Group is a registered trademark of its respective owner and is not affiliated with, nor does it endorse, this website.

  • White LinkedIn Icon

© 2024 by Matías Martínez Boyslton

bottom of page