Company Logo in White
Pair Eyewear
Building and scaling the foundational design system for Pair Eyewear's digital product suite.
Director of Product Design
Alan Tran
Lead Product Designer
Rais Ahmed
Product Designer
Coco Hsiao
Overview
Together with the director of product design, we created a comprehensive design system aimed at enhancing consistency, efficiency, and scalability across Pair's digital product suite. The design system served as a single source of truth for the design and development teams, ensuring a cohesive user experience and streamlined workflows
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:
1
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.
2
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.
3
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)
View