Backbone Design System

Backbone

Building and scaling the foundational design system for Backbone's web experience.

View Website

Web Product Design

Rais Ahmed

App Product Design

Andrew Sibert Kauhi Hookano

Lead Engineer

Brendan Norris

Overview

Working together with the greater design team at Backbone, we focused on creating a design system for the digital + web experience. We collaborated together to create a system that would feel aligned with what had been created for the App, but stand on it's own for the web experience. This included creating a system that would handle the website, social media, but also email campaigns to create visual + brand consistency across Backbone's digital presence.

Objectives

Consistency

Establish a unified visual language and interaction patterns to ensure brand consistency across all products.

Efficiency

Reduce redundant work by providing reusable components and guidelines, thus accelerating the design and development process.

Scalability

Create a flexible system that can evolve with our products and support new features and design trends.

Process + Responsibilities

Research + Analysis

Conducted an in-depth analysis of existing design systems and best practices in the industry to inform our approach. We took an extensive look at Shopify's Polaris, Mailchimp's Pattern Library, Uber's design system, among many others to best inform our decisions.

Stakeholder Collaboration

Engaged with designers, developers, and product managers to gather requirements, understand pain points, and ensure the system met cross-functional needs.

Component Library Development

Designed and developed a library of reusable UI components, complete with detailed documentation and usage guidelines.

Interaction + Prototyping

One initiative we took during creating the design system was to include the element of interaction across even our smallest components such as buttons, inputs, cells, and more. This ensured that when designs were tested, the user would be using a prototype very close to what is in production.

Documentation + Training

Compiled comprehensive documentation and conducted training sessions to onboard teams and promote adoption of the design system.

Outcome + Learnings

Increased Efficiency

The design system significantly accelerated design and development processes, reducing time to market for new features and products.

Brand Consistency

Achieved a unified and cohesive look across all digital platforms, strengthening Pair Eyewear’s brand identity and user experience.

Learnings

Owning the development of the design system for Pair Eyewear was a highly rewarding experience that enhanced skills in design, collaboration, and project management. It underscored the importance of a user-centered approach and the value of systematic problem-solving. The successful implementation and adoption of the design system has set a strong foundation for Pair Eyewear’s future growth and innovation in not only the eyewear industry, but e-commerce alike.

Research

For this initiative, we conducted two separate rounds of research:

Preliminary Research

Before we defined scope and design requirements, we did a round of preliminary research including a round of comp analysis against competitors in the space, as well as leading e-commerce brands to identify common patterns and best practices.

We also conducted a survey asking our existing users to identify existing pain points they experienced while browsing on Pair's product page. We tested among two separate cohorts: the loyal user that has been with Pair for 2+ years, and newly adopted customers who recently had made a purchase.

Usability Testing

Since this page refresh was introducing multiple net-new components for our users, we wanted to conduct a round of usability tests to validate the designs we put together. We ran 2 separate unmoderated tests via UserTesting. Each test included 5 participants, with one group being existing Pair users, and the other group being users who have never interacted with Pair's website.

A/B Test

Once the designs were ready and built by engineering, we launched an A/B test to 50% of traffic on site. Because this was a page that experienced high traffic, this acted as a final round to validate the updated designs. (spoiler: the variant vastly outperformed the control)