Revvity Design System
This case study showcases my journey, the challenges faced, the impactful solutions I contributed, and the valuable insights gained throughout this experience.
The Context
Revvity's design system, publicly accessible through revvity.design, required a substantial UX and UI overhaul following the company's spin-off. Facing a tight timeline, our team aimed at branding the components from our library within a quarter, which is 3-month time. In addition, to cater for business needs in various product units, new components were to be built at the same time.
The new brand of Revvity was launched on May 9, 2023. The company was previously affiliated with PerkinElmer, Inc.
↓ Take a look at the press release below for more context. ↓
The Solution
Updated revvity.design, the public-facing company design system website along side changes made, synchronizing design and documentation, to achieve a single source of truth for our designs and solutions for every stakeholder and user of our company's products. This is extremely important to maintain consistency.
35+ UI components rebranded from the old branding to the brand new Revvity branding within 1 month, exceeding expectation and accelerated development process.
In addition to rebranding, the team understood that we could not just put development cycles of products to a halt. Therefore, we stretched our capacity and also newly created and designed 10+ UI components at the same time, all adopting the new branding.
→ Take a look at the design system revvity.design here ←
Quantitative Impact
UI Components Rebranded
In one quarter, which is all of the components in the design system, including variants & states.
New Components
On top of existing rebranding efforts, 10+ extra components were researched on & designed.
Single Source of Truth
Our design system library acts as the single source of truth for any users and stakeholders.
Qualitative Impact
Enhanced Brand Identity
Elevanted Revvity's brand identity in every touch point, creating a cohesive look and feel across all UI components
Improved User Experience
Through meticulous research and design, we significantly improved the usability and accessibility of the design system.
Collective Success
Fostered a collaborative environment, engaging with designers, developers, and stakeholders to ensure user centricity.
My Role
As a key member of the Core UX Team, my responsibilities encompassed a wide range of activities:
- Rebranding UI Design: Participated in the rapid rebranding process, transforming UI components to align with Revvity's new brand identity in an iterative manner.
- UX Research: Led and conducted extensive primary and secondary research to inform the design of new UI components.
- Prototyping and Management: Played a pivotal role in prototyping and managing UI components, ensuring their alignment with the overarching design system.
- Documentation and Insight Sharing: Led documentation and promotion across teams, utilized Zeroheight to document the design system on revvity.design, encapsulating research insights and design decisions.
Overcoming Challenges
We follow a general design system development roadmap to ensure consistent results and transparency across the team. Although this process looks linear, oftentimes development happened in an iterative manner. As a UX researcher, I advocated to the team to adopt the research-based principle in our design system processes, to ensure that team discussions do not arrive at opinion-based designs that disregards accessibility and UX design good practices that had roots in our user findings.
User-based Research
Understanding the significance of stakeholder involvement, as a UX researcher I led workshops and user testing sessions to gather insights from users of the design system, including product team designers, stakeholders, and developers. This collaborative effort was crucial in ensuring the rebranding process met the diverse needs and expectations of all users.
Working Agile
Adopting a daily sprint approach, I, with another UX intern ensured quick, agile responses to emerging design needs and challenges through daily workshops and standups. My role in conducting daily research and designs, coupled with consistent progress reporting, was instrumental in maintaining the momentum and quality of the rebranding process.
Research-based Improvements
As the UX Researcher and Designer in the core UX team, I ensured the rebranding initiative was not merely a cosmetic change but an opportunity for enhancement through extensive accessibility research with WCAG guidelines, ISO guidelines and competitve research, as well as usability testing, ensuring the design system was not only visually appealing but also highly functional and user-friendly.
Feedback Cycle for Iteration
As the Revvity Design System began to integrate more deeply into the company's product ecosystem, it became essential to establish a robust feedback pipeline. As a UX Researcher I established this pipeline through active, daily communication with designers and multifunctional teams, and it was critical in capturing real-time insights from the users of our design system, predominantly the product teams and end-users. The goal was to create a continuous loop of feedback that would facilitate iterative improvements to the design system.
The Process
I was responsible for the following:
- Feedback Collection: Utilized tools like SurveyMonkey and Maze to gather feedback from both internal teams and external users.
- Workshops and Interviews: Conducted workshops and one-on-one interviews with product teams to understand their experiences and challenges in using the design system.
- Data Analysis: Analyzed the collected data to identify trends, pain points, and areas for improvement
Impact of the Feedback Pipeline
The pipeline was proved to be very helpful to the entire process of development. The observed benefits include:
- Timely Insights: The feedback pipeline provided immediate insights into how the design system was being used across different products.
- User-centric Findings and Improvements: Feedback directly influenced the iterative improvement of UI components and patterns, ensuring they met user needs more effectively.
- Enhanced Collaboration and Awareness: The process fostered a culture of open communication and collaboration, encouraging teams to actively contribute to the evolution of the design system.
Iterations of Components and Patterns
Based on the continuous feedback, I was involved in several iterative changes:
- Accessibility Enhancements: Adjustments were made to improve the accessibility of UI components based on user suggestions.
- Performance Optimization: Components were refined for better performance and responsiveness to cater for hardware products of various screen sizes, enhancing the overall user experience.
- Visual Consistency: Regular updates were made to maintain visual consistency across all components, aligning with the evolving brand guidelines.
What I learned
Designing and developing a design system was not easy, but it was my first experience with the design system and it was truly rewarding.
- Design System Management: Acquired hands-on experience in building and managing a complex design system that is also scalable required a lot of attention on how the components are built and how the documentations are synchronized with your internal files.
- UX Research Proficiency: Through conducted numberous primary and secondary research activities for each component rebranded and developed, this experience enhanced my expertise in UX research and testing methodologies.
- Adaptability: It was a tight timeline for the core UX team to rebrand and build the design system at the same time. I learned to become very agile in designing and reporting status, as well as presenting findings and design to stakeholders and higher-ups.
Award & Recognition
For my outstanding achievement in the co-op term, I was awarded the Making a Difference Award as a recognition for my contribution to the organization’s design system, product development, research endeavours.
