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.

A high fidelity sitemap designed in Figma | Enlarge sitemap


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.


Key Product Requirements

  • An intuitive method for users to upload, edit, and save their own sequences
  • Easy browsing of Agilents existing library of sgRNA sequences
  • Enabling users to save sequences for later use or reordering
  • Bulk editing of sequences so that the user can quickly and easy customize a large order
  • An intuitive shopping experience in which users can add sequences to a cart or request a quote for sequences that are not readily available.

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.

Uploading, Customizing, and Configuring a Sequence

One of the primary user needs is to upload and prepare sequences for purchase. The user is able to accomplish this in three steps with the software guiding them along the way to ensure their sequences can be manufactored and will meet their specific needs.

Uploading a Sequence

The user can upload their own sequences or they can search Agilent's Design Catalog to find the sequences they need.


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.


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.


Agilent's Design Catalog

In addition to uploading and customizing their own sequences it was also important to give users easy access to Agilent's Design Catalog where they can browse existing designs that might already meet their needs.