Re-designing components for the new Sage.com Design System

Contributing to the new Design System with cohesive, scalable components across different breakpoints.

About

I joined Sage's design systems team to help expedite the design system for Sage.com, collaborating with four UI designers and a motion designer over two months. Each of us focused on specific components, exploring ways to revamp them while ensuring consistency, scalability, and accessibility. We also set guidelines for each component and uploaded them on Zeroheight.

Timeline

Jul 2022 - Sept 2022

Team

Design Lead, Senior UI designers x4, Motion designer

Tools

Figma, Zeroheight

Key Activities

Visual design exploration, re-designing components, updating components on Zeroheight

Why did we build a design system for Sage.com?

The primary objective was to develop a scalable, future-ready design system for Sage.com, ensuring consistent brand alignment across both the website and Sage’s broader suite of products. Sage’s major rebrand in 2022 introduced a refreshed aesthetic and unified branding across all platforms.

My team focused on consolidating the design elements for Sage.com, working through a large volume of UI components on Figma to refine or redesign them as needed.

This was a highly task-intensive role, as we simultaneously evaluated and updated numerous elements to ensure they aligned with the new brand standards.

It was key to deliver a robust design system that not only met current requirements but also laid a solid foundation for future innovation and growth at Sage.

My team focused on consolidating the design elements for Sage.com, working through a large volume of UI components on Figma to refine or redesign them as needed.

This was a highly task-intensive role, as we simultaneously evaluated and updated numerous elements to ensure they aligned with the new brand standards.It was key to deliver a robust design system that not only met current requirements but also laid a solid foundation for future innovation and growth at Sage.

Delivering scalable components under tight deadlines by quickly adapting to Sage.com’s design system framework

Challenges in developing the Sage.com design system included getting up to speed quickly in a new team environment, especially as I joined as a contractor during the project’s final stages. With Figma files already established, the team had a clear direction and a tight deadline, so it was essential for me to adapt swiftly.

Each component had multiple variants, so I adopted an atomic design approach, breaking down elements into their smallest forms for efficient scaling and consistency. To navigate these challenges, I emphasized clear team communication and focused on balancing immediate solutions with future scalability, ensuring successful delivery of my components.

To build a scalable Sage.com design system, assessed components, facilitated collaboration, and delivered detailed documentation

Component Assessment
I started by evaluating the components assigned to me, referencing best practices from other design systems to ensure each component adhered to atomic design principles. This approach helped maintain consistency, modularity, and reusability across the system.

Continuous Collaboration
Throughout the process, I kept in close communication with the team, establishing feedback loops through weekly presentations. Based on team feedback, I iterated on components and picked up additional ones as I progressed, ensuring they met both user needs and technical requirements.

Delivery
Once the components were refined, we documented the design system thoroughly in ZeroHeight. This detailed documentation made the system accessible and easy to implement for the Sage design team and developers.

Centralizing sage’s design system in Zeroheight: clear documentation accessible to designers and developers

This in-depth analysis ultimately deepened my understanding of the project. I examined the existing user flows for Facebook and Instagram, identifying key problem areas.

I regularly met with my team to evaluate the feasibility of Hootsuite's suggested changes. The redesign process involved mapping out existing user flows, pinpointing key problem areas, and exploring strategies to create a more intuitive user experience.

Key Takeaways

Effective communication with the broader team and developers was super important for understanding their needs. It helped us create components that genuinely worked for the team. Some components offer more flexibility than others, so it's important to find the right balance in development.

Zeroheight was instrumental in keeping everyone in the loop and smoothing out the design-to-development process which helped cut down on duplicated efforts across teams The positive feedback from our soft launch has set a solid groundwork for Sage.com going forward.

More work

Re-designing data management

Pre-built websites for campsite owners