Transnetyx Sequencing

Reducing friction by revamping the ordering process

Prototype GIF of feature

Following the acquisition of Laragen, Transnetyx Sequencing is the latest product to be integrated into the product suite that aimed to create a simple, modern, and efficient way to place Sanger Sequencing orders.

I led the end-to-end designs on this project by revamping the ordering process which consisted of leading research/testing sessions, exploring and ideating multiple concepts, and facilitating technical and business tradeoffs through design iterations.

TIMELINE:
12 months,
Launched in Q3 2024
TEAM:
Director of Design
Product Manager
Product Analyst
Content Writer
8 Engineers
ROLE:
Product Designer

* The data and prices shown are fictional figures and do not represent the final product. All information on this case study is my own and are does not reflect the views of Transnetyx.

Before

Previous screenshot of the ordering process

After

New and improved screenshot of the ordering process

Placing orders were a headache

Users were frustrated with an outdated ordering process

When conducting early user interviews with our users, many of them expressed difficulty and frustration with the current ordering process as it was an essential tool in their daily workflow in order to perform their research.

Quote from user that talks about how outdated the current system is and the workarounds they need to perform their work
User quote that mentions how the system has no way to add or remove a row and that they must restart the whole order after entering their data

Our interviews helped identify multiple usability issues:

❌ outdated functionality to meet the needs of current users

❌ lack of ability to undo mistakes (e.g. add/delete row)

❌ minimal error prevention to promote recovery

The ordering process is quite complex

Designing a modern and intuitive process

Insights from our user interviews helped identify key objectives we wanted to address where we could optimize and improve the efficiency of placing an order.

Some of our key objectives were...

📝

Reduced Manual Workflows

To improve efficiency, we wanted to simplify the ordering process to make placing orders easier and allow our admins to focus less on administrative tasks.

💪

New & Competitive Features  

To elevate an outdated process, we ideated new features to optimize and improve the experience of our users to empower them in their day-to-day work.

🎯

Improved Accuracy & Reliability

We wanted to automate certain processes in order to improve turnaround time, support future customer audits, and provide reliable and accurate results to users.

Simplifying the process into three steps

We analyzed and consolidated steps from the current ordering process in order to improve the workflow and reduce the time to place an order.

Flow chart detailing the three step process to place orders

Flow chart detailing the three step process to place orders

Ideating methods to enter data quickly

A quick entry table was not as quick as we wanted it to be

An early concept I had was allowing users to quickly enter their data into a table, similar to Excel, where they could copy & paste to populate the table rather than entering it by row.

Early concept where all columns of data could be entered at the same time

Early concept of quick entry utilizing only a table

Our developers highlighted the trade-offs to implement this idea, as it would prolong the data entry process for users rather than expedite it. In the end, we decided to scrap this idea.

Templates were a bridge of what we could implement

Our users indicated that they entered the same information ~90% of the time, with the primary changes occurring in the samples column. I believed that templates could address this issue by automating data entry to streamline the ordering process.

Prototype of how templates function

Templates removed the need to have users enter data by auto-populating it with every new order

We went with templates for these main reasons:

✅ Addresses user's pain point of having to re-enter the same information for every order

✅ Faster order placement = more revenue

✅ More feasible & simpler to implement

Killing two birds with one stone

Improving usability by implementing a design system

Throughout the project, we pushed to standardize components so they could be reused in our other products. This process also included rebuilding our navigation to improve usability which required a functioning design system.

Our design system was a great success as swapping and updating components were easily done. We improved design velocity, the navigation experience, and UI with more modernized visual design.

Components highlighted with a purple marker to indicate all the components used to build Sequencing

The order process was majorly built using components to improve usability and design consistency

Results

Sequencing is currently in preparation to launch our MVP in Fall 2024.

Our team identified these metrics to determine success:

  1. Reduction in emails/tickets between admins & customers
  2. CSAT score ≥ 85
  3. Reduction in order submission timeline with MVP in comparison to current ordering process

Personal Takeaways

Throughout this project, our design system underwent a significant transformation. Previously, we relied on a messy process of pulling frames and components from previous files. This project helped to standardize our design process, enabling the creation of reusable components. This not only enhanced our design velocity but also created design consistency across our other products.

Drawing from my prior experience with design systems, I advocated for best practices, contributing to the growth of our design culture as we continue to build and maintain our design system.

Overall, this was an exciting project to work on. Despite encountering several challenges along the way, our team consistently overcame them by openly expressing our opinions and concerns, aligning ourselves with the best approach to progress effectively as true collaborators.

Prototype GIF of feature

fin.

Scroll To Top