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

PDS (Purple Design System)

Welcome to Purple’s digital design system. This product is an ever-evolving repository, comprising atomic and modular components and page templates. It is maintained by our Digital Design Team and is the single source of truth for our UI and interaction patterns. It sets forth our standards and expectations.

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 users 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:

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.