Agilent Technologies

Role: Contract, User Experience Design
Period: 2020 — 2021

I joined the Agilent team as a contract designer to assist with Agilent's CRISPR Design Software ecommerce site. This site is where scientists and researchers can find, design, and customize sgRNA sequences for purchase.

I worked closely with Agilent's team providing user experience expertise and numerous design deliverables including a sitemap, user flows, pixel-perfect screen designs, and an interactive Figma prototype for testing usability and to share the product vision and direction with relevant stakeholders.


My Role: User Experience and Interaction Design

I joined the Agilent team as a contract designer to assist with Agilent's CRISPR Design Software ecommerce site. This site is where scientists and researchers can find, design, and customize sgRNA sequences for purchase.I worked closely with Agilent's team providing user experience expertise and numerous design deliverables including a sitemap, user flows, pixel-perfect screen designs, and an interactive Figma prototype for testing usability and to share the product vision and direction with relevant stakeholders.


Product Goals and Requirements

Our primary goal was to make it easy for users to design and purchase sgRNA sequences, either their own uploaded sequences or sequences from Agilent's design catalog. We also needed to ensure that this new product fit in with Agilent's existing family of products in order to maintain a consistent experience for their users.

Product Goals and Requirements

Sequence Upload Flow

One of the core interactions was the sequence upload and validation flow, where users could submit their CRISPR gRNA sequences for processing. I designed a step-by-step guided experience that reduced errors and made a technically complex task approachable for a broad range of users.

Sequence Upload Flow

Brand Guidelines and Asset Creation

It was important that the CRISPR site adhere to Agilent's design guidelines to ensure a consistent experience for users across Agilent's many products. Some challenges we encountered were managing existing inconsistency within Agilent's products and needing to define and create new interaction patterns and visual assets for new features. When creating new interaction designs I'd repurposing or adjusting existing interactions in order to stay as consistent as possible with existing interaction patterns while, most importantly, making them intuitive and easy to use.

Brand Guidelines and Asset Creation

Customizing a Sequence

Once uploaded the system checks each sequence and informs the user if there are errors or non-standard sequences which may take longer to produce. If there are errors the user may fix them directly in the customize sequence page or simply remove that sequence from their batch. The user can also determine which, if any, end modifications they would like.

Customizing a Sequence

Configuring a Sequence

The user can configure uploaded sequences choosing yield, purification, and quantity. The user also has the option to bulk edit sequences to make configuring a long list of sequences much quicker.

Configuring a Sequence