1. Overview

The Attune Flow Cytometer Configurator is a digital tool designed to help researchers customize and configure Thermo Fisher Scientific’s Attune Flow Cytometer to fit their laboratory needs. This project was not a redesign but a net-new experience built to support users in understanding and selecting from a range of product options and accessories.

Team

• Jonelle Boyd, Sr. UX/UI Designer
• Jesse Mitchell, Sr. Product Owner
• Amanda Thompson, Content Strategist
• Christine Lewis, Lead Front-End Engineer
• Front-End & Back-End Engineering Team

UX Goals

• Create a clear, guided flow for customizing complex scientific equipment
• Provide just-in-time information to help users understand configuration options
• Build a flexible, modular UI to support future expansion and changes
• Improve user confidence and reduce decision-making friction

2. Challenges

Flow cytometers are highly technical instruments with multiple configuration paths based on specific research needs, such as laser selection, detector options, and compatible accessories. Many users are experts in their field but may not be familiar with how to configure an instrument online.

Key challenges

• Ensuring scientific accuracy while simplifying terminology for varied audiences
• Making a complex, multi-step process feel linear and manageable
• Creating a responsive, modular design that supports desktop-first use
• Balancing detail with brevity in a high-stakes product configuration context

3. My Approach

To ensure usability and accuracy, I followed a structured process grounded in UX best practices:

1. Cross-functional Collaboration
   Worked closely with product managers and engineering to understand technical requirements, system logic, and user types. Defined the scope of available options and rules for compatibility.
2. Research and Content Mapping
   Analyzed existing product documentation and internal resources to define each step in the configuration process. Collaborated with stakeholders to identify key decision points and necessary explanations.
3. Modular Interface Design
   Created a modular design that supports step-by-step navigation with consistent layouts, progressive disclosure of content, and built-in validations to guide correct configuration choices.
4. UX Writing and Terminology Alignment
   Worked with product and marketing teams to align on language that is both scientifically accurate and user-friendly. Focused on reducing jargon and offering helpful inline guidance where needed.

4. User Journey

Before designing the interface, I collaborated with product owners to understand the typical flow cytometer buyer’s journey—from initial research to final purchase. Users were often scientists or lab managers who needed to ensure the selected configuration aligned with their experiment types, lab capacity, and budget. Many relied heavily on product documentation or sales representatives in the past.

To align the configurator with real-world behavior, I mapped a step-by-step journey:

1. Select an Attune Flow Cytometer model
2. Add required lasers and compatible detectors
3. Choose optional accessories and software
4. Review summary and submit for quote or purchase

The design aimed to support users at each of these stages with embedded guidance and real-time feedback.

5. Competitive & Internal Research

To ensure the configurator met both usability and business goals, I evaluated digital tools from three relevant sources:

• BD Biosciences: Their flow cytometer configurator was highly technical and form-heavy, with minimal contextual guidance or user-friendly visual aids—highlighting opportunities for a more intuitive and supportive experience.
• Apple (Hardware Configurator): While not a scientific tool, Apple sets a high standard for user-friendly configuration.
• Internal Thermo Fisher Tools: Existing internal configurators often relied on outdated UI patterns and lacked consistent visual hierarchy, which reinforced the need for a more modern, modular, and responsive design.

These comparisons reinforced the value of progressive guidance, real-time feedback, and a clean, scalable layout tailored to both novice and expert users.

6. Final Design

The final configurator design uses a multi-step format with persistent navigation, clear section headers, and smart defaults. Users begin by choosing a core model, then move through laser options, detectors, accessories, and service plans. A summary panel updates in real time, helping users visualize their configuration as they go.

Key UX Features

• Progress Indicator to show where users are in the process
• Expandable Help Sections with contextual descriptions and images
• Real-Time Summary Panel that tracks selections and updates pricing
• Built-in Validations to prevent incompatible choices and guide corrections
• Responsive Layouts optimized for desktop-first use in lab settings

View PDF of Attune Screens

7. Results

The Attune Flow Cytometer Configurator launched as a key part of Thermo Fisher’s instrument purchasing experience. It has helped simplify what was previously a complex and sales-driven process into a guided, digital-first tool accessible to a wider range of users.

Key Results & Metrics

• Positive feedback from internal stakeholders and field sales teams
• Reduced dependency on manual configuration support
• Increased clarity and transparency in the configuration and pricing process

8. Learnings & Reflections

This project highlighted the value of close collaboration between UX, product, and engineering teams in making highly technical systems more accessible. Designing for modularity and progressive disclosure ensured that users weren’t overwhelmed while still retaining full control over their configuration. It also reinforced the importance of domain-specific UX writing to bridge the gap between scientific precision and usability. As the tool’s framework proves successful, it opens the door to scaling the configurator model across Thermo Fisher’s broader portfolio of scientific instruments.

UX Principle: Consistency and Standards

Maintaining Consistency and Standards in user interface design refers to using consistent layouts and interaction patterns across each step to reduce cognitive load.

1. Overview

As Pulumi’s user base expanded, it became clear that the Pulumi Cloud Dashboard needed a redesign—one that could guide first-time users while still supporting experienced ones. I partnered with product owners, product managers, and Pulumi’s principal data engineer to create an integrated onboarding experience directly within the dashboard. A/B testing and internal feedback played a key role in shaping the solution. Rather than building a separate onboarding flow, we focused on embedding helpful, contextual guidance into the core product experience—making onboarding feel like a natural part of the platform.

Team

• Jonelle Boyd, Sr. UX/UI Designer
• Pablo Seibelt, Principal Data Engineer
• Casey Huang, Sr. Software Engineer
• Eli Staykova, Product Manager
• Meagan Cojocar, Product Owner
• Craig Symonds, Product Owner

My UX Goals

• Provide meaningful, contextual guidance for new users
• Minimize cognitive load and reduce onboarding friction
• Maintain a clean, modular dashboard layout that can evolve

• Design for flexibility to accommodate diverse user types and workflows

2. Challenges

The original dashboard didn’t offer clear direction for new users and lacked flexibility for different onboarding scenarios (e.g., team onboarding, individual projects, different cloud providers). There was also confusion between the Dashboard and Home pages, leading to redundant or missed information.

Opportunities included:

• Streamlining the initial user journey without overwhelming users
• Creating one centralized place for onboarding, insights, and navigation
• Designing a scalable system that could grow with the product

3. My Approach

To ensure the system was scalable, consistent, and easy to use, I followed a four-step approach grounded in UX best practices:

1. User & Stakeholder Collaboration
   Partnered with product managers, owners, and the principal data engineer to map key user journeys and pain points.
2. Competitive Research
   Analyzed Terraform, AWS, and Vercel to benchmark onboarding strategies.
3. Wireframes & Prototypes
   Built low-fidelity wireframes and interactive prototypes. Tested internally and refined through feedback loops and A/B testing.
4. UX Strategy: Progressive Disclosure
   Gradually introduced onboarding content based on context and user behavior, reducing overwhelm.

4. User Journey

We drew inspiration from established systems like Google Material, Flowbite (a.k.a – Tailwind Figma), and Helios libraries. These systems demonstrated the value of a well-structured, documented, and extensible approach to UI. Their clarity and scalability helped shape our thinking around how to define tokens, components, and usage patterns in a way that would be both practical for our team and aligned with best practices.

5. Competitive Analysis

To inform the design direction, I conducted a competitive review of several cloud and infrastructure platforms, including Terraform, AWS, env0, and Vercel. I focused on how these tools onboard new users, present data, and structure their dashboards.

Key takeaways included:

• Terraform: Useful for experienced users, but lacks accessible, guided experiences for less technical audiences. Good for understanding how expert-first tools guide activation. and env0 offered clear, checklist-style guidance to help users get started
• Vercel: Great example of progressive disclosure and streamlined onboarding. Prioritizes clarity and speed, making it ideal inspiration for developer-friendly, low-friction workflows.
• AWS: Information overload. Shows the importance of simplifying interfaces and surfacing relevant guidance based on user context.

6. Prototyping

Login

Using insights from research, I created low-fidelity wireframes to explore different login and onboarding strategies—such as a single email-field entry point versus a two-page flow separating Sign In and Create Account—to evaluate which layout best supported ease of use and user clarity.

Getting Started

I initially considered a separate Home page for the “Getting Started” module but ultimately chose to embed it within a modular dashboard for a more seamless experience. The “Getting Started” module provides simple, step-by-step guidance, streamlining the user experience.

Digital Prototype

As I progressed with the wireframe, I created a low-fidelity interactive prototype to demonstrate interactions and tested it with a few engineers to gather feedback.

View Lo-Fi Prototype

7. Final Designs

Login

After exploring different login and onboarding strategies through low-fidelity wireframes, including a single email-field entry versus a two-page flow, we conducted A/B testing to assess user preferences. The results favored the two-page model, with a split-page design: information about Pulumi on the left and the Sign Up form on the right. This layout provided a clear, focused user experience, allowing users to learn about Pulumi while simultaneously entering their details. It reduced friction by guiding users step by step and keeping the process organized, making it the most effective choice for onboarding.

Dashboard

I developed a modular dashboard with embedded onboarding, including a “Getting Started” module, action-driven cards, and adaptive interface elements. Progressive Disclosure was used to surface onboarding tasks only when relevant, helping users build confidence step by step without cognitive overload.

View Hi-Fi Prototype

8. Results & Next Steps

The final redesign delivers an onboarding-friendly, scalable dashboard experience that seamlessly supports all users—from first-timers to power users.

Key Results & Metrics

• Embedded, frictionless onboarding directly in the dashboard
• A unified, modular layout supporting both onboarding and analytics
• Enhanced clarity and navigation without sacrificing future flexibility
• Improved usability and visual consistency across the platform

• A 30% reduction in onboarding time (based on A/B testing)

Next Steps

Looking ahead, we plan to introduce a customizable dashboard experience, enabling users to add charts, remove sections, and personalize their workspace. As we shift toward analytics-focused dashboards, it makes sense to eventually move the onboarding content to a dedicated Home page—fulfilling the original vision while giving users greater control.

9. Learnings & Reflections

This project deepened my understanding of designing flexible systems that adapt to diverse user journeys. Embedding onboarding into the dashboard (rather than separating it) helped reduce friction while still supporting advanced users through progressive disclosure and modular components. I learned how critical it is to validate assumptions with data—A/B testing and cross-functional feedback were key to refining the experience. Collaborating with engineers, product managers, and data experts also reinforced how strong UX comes from aligning user needs with technical realities. Ultimately, the work reminded me that impactful design goes beyond UI—it’s about creating systems that guide users at the right time, in the right way.

UX Principle: Progressive Disclosure

Progressive Disclosure is a design principle that involves presenting only the information or options a user needs at a given moment—revealing more complexity or detail gradually as needed.

1. Overview

The Pulumi UX team lacked a formal UI library, which led to inconsistencies across the product and inefficiencies in both design and development. As Pulumi Cloud and the team grew, the need for a unified visual language became clear. The focus was on building reusable components and establishing foundational styles to support a more consistent and scalable user experience.

Team

• Jonelle Boyd, Sr. UX/UI Designer
• Dylan Kilgore, Sr. UX/UI Designer
• Vic Fernandez, Sr. UX/UI Designer
• Kimberley MacKenzie, Sr. Frontend Engineer

My UX Goals

• Establish visual and functional consistency across teams and features
• Reduce design and development debt by creating reusable, standardized components
• Improve accessibility through built-in patterns and usage guidelines
• Foster cross-functional alignment between design and engineering through shared systems and documentation

2. Challenges

Before the UI library existed, our design and development workflows were fragmented. Designers frequently recreated components from scratch or worked from outdated files, while developers implemented UI without clear guidance or consistency. This led to duplicated work, visual drift, accessibility issues, and a fragmented user experience. We saw an opportunity not only to fix inconsistencies but to build a system that would support scalability and streamline collaboration across teams.

3. My Approach

To ensure the system was scalable, consistent, and easy to use, I followed a four-step approach grounded in UX best practices:

1. Audit & Align (Consistency)
I started with a UI audit to identify inconsistencies and redundant patterns. This gave us a clear picture of what needed to be standardized and where to consolidate design efforts.

2. Define Foundations (Usability)
We established core design tokens—typography, color, spacing, and elevation—to create a consistent and reusable visual language that could guide both design and development.

3. Build Modular Components (Scalability)
Following atomic design principles, I built flexible, reusable components in Figma, progressing from simple elements to more complex UI structures to support evolving product needs.

4. Document & Collaborate (Accessibility)
I created usage guidelines covering behavior, accessibility, and edge cases, and worked closely with engineering to ensure long-term maintainability and alignment between design and implementation.

4. Inspiration

We drew inspiration from established systems like Google Material, Flowbite (a.k.a – Tailwind Figma), and Helios libraries. These systems demonstrated the value of a well-structured, documented, and extensible approach to UI. Their clarity and scalability helped shape our thinking around how to define tokens, components, and usage patterns in a way that would be both practical for our team and aligned with best practices.

5. Execution & Collaboration

We built the UI library in Figma, where we created atomic components, established design tokens, and documented properties and use cases. I also contributed to writing guidelines that covered behavior, accessibility, and edge cases—ensuring our system was not only consistent but also inclusive and functional. Collaboration with our front-end developer was key: we regularly synced on implementation details, reviewed GitHub PRs, and maintained a feedback loop to keep the design and code in sync.

The design system is still a work in progress, with the long-term goal of building a public-facing website similar to Google Material’s—something that can serve as a shared resource internally and eventually externally. For now, documentation lives in a working Google Docs file titled UI Design System Guidelines, which serves as a living guide for how to create or update components within the Pulumi Cloud Console. This document is actively maintained and intended to evolve alongside the system until the full site is ready to launch.

6. Results & Next Steps

The design system has improved consistency across Pulumi Cloud and reduced the time designers and developers spend on repeat work. Feedback from internal teams has been positive, especially around shared patterns and accessibility support. The next milestone is launching a public-facing documentation site to better support onboarding, cross-team adoption, and external contributors.

Key Results & Metrics

• 80% reduction in time spent designing repeat UI components, thanks to reusable assets in the Figma library.

• 4× faster onboarding for new designers and developers, due to centralized documentation and clear component usage.

• 100% adoption rate among Pulumi UX designers for the new Figma component set within the first quarter.

• 20+ documented components and growing, each with usage guidelines, accessibility notes, and edge case considerations.

7. Learnings & Reflections

Building Pulumi’s first design system taught me how foundational consistency and clarity are to scaling UX. I deepened my understanding of atomic design, accessibility standards, and cross-functional documentation. Most importantly, I saw how a well-structured system can bridge gaps between design and development, enabling teams to move faster while staying aligned.

Methodology: Atomic Design

A methodology that breaks interfaces into five hierarchical stages—atoms, molecules, organisms, templates, and pages—for scalable and modular UI development.