Introduction

Purple is on a path towards a premium identity, and as part of this evolution, the website needed to reflect the new look and feel. The digital design team at Purple was tasked with rebranding the existing design system with new colors, fonts and visuals that reflect the new premium identity. In addition to creating new patterns to help elevate the site experience, comprehensive documentation was created for our cross-functional teams to ensure consistency and a seamless approach to building and transitioning web pages.

The Problem

The Foundation

Colors

Our colors convey our brand personality and values but also help users navigate through the interface. The right combination of colors can influence how they feel, think, and behave.

Typography

Typography plays an important role in establishing the website as the most vital and authentic brand touchpoint, while simultaneously moving users quickly and clearly through the commerce experience. The typographic scale manages the font sizes used within PDS. All type styles are derived from this scale.

Layout

Purple layouts use increments of 4 which enables us to create visually dynamic layouts. Consistent spacing creates a visual balance that makes the user interface easier to scan.

To create an efficient layout, we consider 2 kinds of spacing: horizontal and vertical. Horizontal is based mainly on typographic considerations and spacing through elements. Vertical based on some rules and minimum spacing between components. Every element in a component is built following these grids

Design Process

The process of releasing a design update or a new component to the design system typically involves steps to ensure that the changes are well-documented, thoroughly tested, and effectively communicated to relevant teams. Here’s an outline of the process:

Before & After

Impact

After launching PDS, our design team has experienced improved efficiency in page design and build, allowing us to focus on creating more innovative components to support evolving business needs. This has also led to enhanced consistency and performance in the user interface across both desktop and mobile platforms.

Key Takeaways

• Consistency and Scalability: The design system should emphasize consistency in design elements and scalability to accommodate future growth and business needs.

• Continuous Improvement: Recognize that design systems require ongoing maintenance and improvement. Our team is dedicated to supporting these efforts and ensure the design system remains relevant and effective.

• Knowledge Sharing: Encourage knowledge sharing within the organization. Share insights, best practices, and lessons learned from the design system overhaul to benefit future projects.