BD FACSuite is software for clinical lab scientists. It helps with data acquisition and analysis from cell and particle experiments.
However, its visual design hasn't changed in a decade, causing users to gravitate towards more user-friendly options. Therefore, I improved the UI with a scalable design system and the UX to meet user expectations and enhance the overall experience.
The reconstructed design system encompasses: New color palettes, New typefaces and type scale, Onboarding patterns (work in progress) and Enhanced design components with new color schemes (not featured in this case study).
Presenting the software's ultimate screens is precluded by NDA limitations.
BD FACSuite is a desktop software designed for scientists and researchers in clinical labs. It facilitates the acquisition and analysis of data from cell and particle experiments using the flow cytometry method.
The software that controls the BD FACSLyric™ Flow Cytometry System comprises two applications, BD FACSuite™ Application and BD FACSuite™ Clinical Application.
Presenting the software's ultimate screens is precluded by NDA limitations.
In the biotech industry, software teams often cannot directly interact with external customers due to privacy and data security concerns.
As a result, we primarily focus on conducting research with internal users at BD and discussing it with market people and human factor engineers.
The visual design of the BD FACSuite has not been updated in a decade, leading to a shift in part of the established market towards emerging companies offering products with a more intuitive UX and appealing style.
Most FACSuite users have expressed dissatisfaction with its outdated visuals and aspired for more intuitive and enjoyable user interfaces to enhance the user experience.
In this product release, tasks within scope include color, typography, onboarding design, and selected elements. However, notification and iconography are considered lower priority and are out of our focus.
Satisfaction Rate: Through conducting quick demos of the updated UI screens with internal users, marketers, and stakeholders, we received confirmation that 15 out of 17 individuals were pleased with the revamped interfaces.
Development and design efficiency: The upgraded design system improved development efficiency by reducing design turnaround time and boosting the team collaboration.
I proactively sought product owners' insights on the UI improvement. This valuable input was integrated into our design strategy, effectively guiding the design process.
Breaking down the project into phases provides a clear roadmap for each quarter, helping the team to stay focused on specific objectives and deliverables.
The target audiences incorporate lab technicians, flow scientists, lab managers, researchers in hospitals and clinics, biotechnology companies, research institutions.
Te Flow Cytometry Market is across North America, Europe, Asia-Pacific, and LAMEA.
With the diverse workforce in clinical settings, we prioritized inclusive and accessible design considerations right from the outset.
In clinical laboratories, Beckman Coulter and BD lead the Flow Cytometry systems in use, with several others, including Thermo Fisher, and Sysmex.
Besides, BD FACSChorus and BD Research Cloud are iconic software programs within the BD software ecosystem. They demonstrate consistent visual styles and a component library that aligns with the dedicated design guidelines aka BD Software Unified System.
The revamped screens enhanced customer loyalty by increasing satisfaction from 50% to 90%.
The design system enabled designers and developers to work more efficiently and with greater consistency.
The improved team collaboration and streamlined negotiations with stakeholders significantly shortened the design turnaround time.
BD FACSuite is a desktop software designed for scientists and researchers in clinical labs. The software that controls the FACSLyric™ Flow Cytometry System comprises two applications, FACSuite™ Application and FACSuite™ Clinical Application.
BD FACSuite (the legacy Worklist page)
BD FACSuite Clinical (the legacy homepage)
Presenting the software's ultimate screens is precluded by NDA limitations.
The refreshed UI of FS app
Redesign concept without constraints for FS Clinical app
I faced significant constraints initially that added complexity to the redesign process, such as no existing digital design files, no established design principles and strategies, and the absence of a dedicated designer previously, making it challenging to establish coordination with team members.
The Flow Cytometry market is across North America, Europe, Asia-Pacific, and LAMEA. The target audiences incorporate lab technicians, flow scientists, lab managers, researchers in hospitals and clinics, biotechnology companies, and research institutions.
The visual design of the BD FACSuite has not been updated in a decade, leading to a shift of part of the established market towards emerging companies offering products with a more intuitive UX and appealing style.
Most FACSuite users have expressed dissatisfaction with negative experiences and aspired for more enjoyable user interfaces.
In-Scope:
Color, typography, onboarding design, selected elements.
Out-Of-Scope:
Notification, iconography.
Mark tasks for details
The quotes taken from the user interviews are:"I am unsure of where to locate the specific instructions when launching the updated program."
"The user guide always opens up in a separate PDF window. I have to jump back and forth between screens."
"I was initially confused about where the user guide and software reference book are, as they are under different menus."
The previous steps to locate documentation
The problem
Users struggle to efficiently locate documentation and specific feature instructions within FACSuite.
The exploration
Returning customers pay for software upgrades rather than purchasing new equipment.
Due to the instrument's high cost, few clinical labs are able to adequately stock their labs with new products; instead, to access the most recent features, they typically choose to renew the software license.
However, there are no dedicated solutions that facilitate easy access to new feature instructions.
Existing approach
Given this software's complexity and its integration with sophisticated instruments, current solutions encompass specialized training for instrument purchasers, integrated documentation within the software, and instructional videos available on the official website.
Missing approach
Returning customers have the option to pay for training sessions to better understand new features of upgraded software.
However, not all returning customers opt for paid training sessions due to various reasons, such as budget constraints or scheduling conflicts.
Target User
Customers only updated their applications, not allocating funds for the purchase of new equipment and training services.
success metrics
Pattern Analysis
Through listing out all pros and cons of various types of tutorial pattens, the Coach Mark, Modal Window and Slide Out are applicable for FS based on the specialty of bioscience industry and FS development bandwidths.
Next Step
Design Validation
Through conducting extensive usability tests and considering the development bandwidth of each concept, the analysis of the overall user engagement rate indicates that the pop-up modal is the most efficient way for users to access onboarding instructions.
Image source: https://medium.com/built-to-adapt/how-and-why-to-classify-problems-in-user-interviews-45825b26a23f
Method - Usability Test
Object
Figuring out the most efficient method for end-users to access the onboarding instructions.
Role of end users
Internal researchers at BD Bioscience and lab technicians at clinical labs.
Target performance goals
- Assessing usability and potential implementation barriers for a new onboarding design.
- Evaluating the usability of a prototype versus current system.
- Iteratively evaluating and improving the usability of instructions
Scenario-related bias
Since all users are experienced researchers, they might have received training and know how to find instructions.
Having the idea of appropriate patterns, the following questions are needed to be figured out to understand the user interactions with the components.
Concept Mockup & Observation
Coach Mark
The card provides instructions and engages users when the cursor is within its boundaries. However, users must know the tool's location and may need to refer to the guide PDF for complex use cases due to the limited space for all instruction steps within the card.
Slide Out
It integrates seamlessly into existing user flows and provides clear instructions for its use. However, users must be informed about the new feature's location to initiate the tutorial. Additionally, the prominence of tutorial videos may create confusion in the information hierarchy and obstruct part of the screen content.
Modal
It efficiently showcases new features and promotes them to competitors when users opt in, but it may become repetitive with marketing videos and disrupt users' daily routines.
Test Results Analysis
Clearly, Slide Out and Popup Modal stand out as the most efficient means for users to easily access specific instructions. However, during discussions with engineers, we realized that integrating an independent tutorial video would make the existing page structure more complex and require much more development effort.
The conclusion
The Popup Modal was prioritized for onboarding design, requiring minimal dependency and development effort.
The iteration
Informed by responses from user tests and initial user interview feedback, I iterated the mockup in the following aspects:
The panel can be relaunched after installation.
Restructuring the modal to incorporate all essential content.
Minimizing redundancy and polishing UI elements.
Validating information hierarchies through attention percentages.
The heatmap and focus rates are generated by Attention Insight.
End users
Lab scientists, averaging 44 yo, spend up to 10 hours daily on computers, leading to potential eye strain.
Apx 5% of people in the U.S. have vision impairments, with 3.89 million struggling to see even with glasses.
Solution
Proposing a new hue of green within the spectrum that differs from all other greens in BDSUS, including alert success and accent greens. Subsequently, establishing a color system based on primary colors.
Ensuring sufficient color contrast
The new green has sufficient color contrast with white and grays when they pair with each other.
Crafting Inclusive color palettes
After conducting presentations to marketing teams, I received feedback from the European marketing team about accessibility and familiarity concerns and then made some adjustments to the color value. Because accommodating various forms of color blindness (Protanopia, Deuteranopia, and Tritanopia) would enhance the user experience during transitions between the two applications.
It's essential to consider design choices that accommodate users with color impairments, when selecting color values for the clinical application
Iterating based on the stakeholders feedback
I involved stakeholders in the initial design process to gather their expectations, then adjusted the color scheme based on team feedback through iterative processes.
V 1. #00937F
Hue: 172, Saturation: 100, Lightness: 29
V 2. #39604D
Hue: 151, Saturation: 26, Lightness: 30
It's essential to consider design choices that accommodate users with color impairments, when selecting color values for the clinical application
Unifying visual language
Establishing visual layers for the legacy product through the analysis of the existing information hierarchy, guided by the choice of a primary color. Notably, the upper layer is designed to exhibit increased lightness, serving to reinforce the page's structure and highlight essential content.
Engaging Stakeholders for Informed Decisions
After presenting four low-fi prototypes featuring green schemes for refreshed pages, stakeholders and marketing professionals in the US and Europe were polled to select the fourth color palette based on their understanding of the industry and user preferences. Upon receiving the feedback, the color scheme was expanded into an inclusive color system.
It's essential to consider design choices that accommodate users with color impairments, when selecting color values for the clinical application
Color System
The Problem
solution
"Rem" leads to increased development effort and extra assessments. However, due to the limited budget, the decision has been made to use "Pixel" instead of "Rem."
The choice of using "Rem" leads to increased development effort and extra assessments. However, due to budget and timeline constraints, the decision has been made to use "Pixel" instead of "Rem."
Type Scale List
Tabular Design
Dedicated typefaces improve legibility: Narrow typefaces have a more consistent character spacing so to make words and lines easier to follow.
Clear visual cues should be provided for different interactions, including unit selection and row selection, in both regular and data acquisition states.
*images blurred for NDA purposes
Other Contributions
From Team Members
Yanfei has been a wonderful team player in UX design team. She has demonstrated solid technical skills in design by supporting different UX projects. She is a great product designer with a keen eye for visual design. One notable achievement is her ability to apply artistic creativity for rebranding effort of a legacy product, which received recognition from cross-functional stakeholders. I highly recommend Yanfei for any product design projects with her great sense of UX design and a collaborative spirit.
-- Marsha Yang, Design Manager
Yanfei did an exceptional job, redesigning a legacy software to modernize and add branding in line with the company design system. Yanfei worked across 4 teams, on multiple features and across different time zones. Yanfei' professionalism and attention to detail are way beyond her years and she would be an asset to any company.
-- Gillian Place, Senior Software Engineer
This is my first UX design job after the internship and my first time as a design lead within a product team. While it's been a bittersweet experience, I am grateful for the opportunity to learn and grow. Working closely with a diverse team, diving into product management, and negotiating with developers and stakeholders has exposed me to a wide range of skills.
While I was the sole designer on everything shown in this portfolio, all user pain points are from Alex (Human Factor Researcher) and Darci from the Market team. And some design are inspired by BD FACSChorus from Lauren (Senior UXD). Nothing could be where it is without the critique and collaboration of Marsha (my mentor/ Design Manager), Berry and Ruth (POs), Gillian( front-end engineer).
Embrace the next journey!
