I was hired by Cytek Biosciences to design SpectroFlo; a desktop application that allows scientists to acquire and analyze data from a cytometer. My job was to design a product that was intuitive and simple while supporting a huge variety of features. That came with its challenges. In this article, I will demonstrate how I approach designing complex software.

My process:

1. Clarify Requirements. I worked with Cytek's staff to document and communicate project details to the rest of the company, building a consensus on vision. That consensus helped the project run smoothly.
2. Build Domain Expertise. I studied flow cytometry and competitor products such as BD FACSDIVA. I learned about our UI technology (Microsoft WPF) and hardware technology (Aurora Cytometer).
3. Design with Stakeholders. I worked alongside subject experts, our engineers, and our users.
4. Iterate Super Fast. I quickly mocked up team members' and customers' ideas/change requests and hosted followup meetings with stakeholders. This allowed the team to review alternate ideas quickly and visually, which helped attain unanimous consensus on at least 1 new feature or product decision almost every day.

Design Feedback

I guided our design meetings by writing feedback and action items on the whiteboard. I would then convert these action items into Jira tickets either for myself or for the engineers. Sometimes feedback already had an associated Jira ticket; in those cases, I would write the ticket ID on the note. I censored sensitive information from this photo.

The Product

In this section, I'll demo the final product and its features. All the screenshots were designed by me. Enjoy!

Overview

Get Started Menu

Experiments

The Acquisition UI provides the tools necessary to acquire data. We organize sets of data into what we call Experiments.

Completed experiments are accessed through the My Experiments option in the Acquisition Experiment menu. Experiments are organized by the date they were created.

I designed a hierarchical layout for users to organize their experiments into Groups and Tubes. Users can organize and save their experiments as templates.

Worksheets

Worksheets are used to visualize the data in the experiment. To select a worksheet, the user clicks Worksheet in the Acquisition menu.

Users can have multiple worksheets open at a time using Tabs.

Quality Control and Performance Tracking

The Daily QC and Reference Control features allow users to assess and improve their cytometer's system performance.

Acquisition

The Acquisition Control panel allows users to start, stop, pause, and record data acquisition.

Acquisition Worksheet

The worksheet allows the user to analyze their data.

A toolbar at the top of the worksheet area allows the user create plots, render statistics, create population hierarchies, and draw gates.

Preferences

Preferences allows users and admins to customize and optimize their workflows. For example, the Worksheet tab allows users to change the way elements are displayed in the worksheet.

---

Material Design

I created a design system that was based on Material Design. Here are some of the many reasons I did this:

• It's a unified system that combines theory, resources, and tools for crafting digital experiences.
• My job was to optimize for usability, and Material Design was the most usable design paradigm of its time, thanks to Google's UX research resources.
• Material Design Icons allowed us to use existing open source materials so that we only had to design a few specific icons.
• While doing research into our UI technology, Windows WPF, I found an open source toolkit that provided many Material Design UI components out of the box. I asked our engineers to look into it, and I got confirmation of its viability before committing to this design paradigm.
• We wanted our users to subconsciously attribute a level of trust and security to our app, and Material Design was tightly associated with Google.

Custom Material Design Icons

Here is a sample of the icons I made for special cases that weren't available in the open source Material Design library:

Branding

I designed SpectroFlo's logo to show off the modern aesthetic of the product. Also, lasers.

Conclusion

This article should provide you a solid idea as to the way I approach designing software. If you'd like to see more of my UI designs, check out my Mobile App UI portfolio.