Zymo Service Portal
Zymo Service Portal

A leading player in the biotech analysis field, specializing in Complex B2B SaaS design workflows.

B2B Design

Image of an iPhone lying on a table

Timeline

Oct. 2023 - Sept. 2024

Jun. - Sept. 2023


Topic

Biological Service Tool

Team

1 PM, 1 Designer, 10+ Developer

Team

UX Design, UI Design, Interaction Design, Wireframe, Hi-fi Mockup, Prototyping

UX Design, UI Design, Interaction Design, Wireframe, Hi-fi Mockup

Designing a Reverse Shipping Experience

From Chaos to Clarity: Revolutionizing the Shipping Experience in Microbial Testing

💡

Overview

As Zymo Research expanded its sequencing services and medical device offerings, the need for a streamlined and efficient shipping process became critical. Managing the shipping of sensitive biological samples and medical devices required specific protocols, including temperature control, hazardous materials handling, and complex international regulations. The previous shipping process was manual, error-prone, and resulted in frequent delays and reshipments, frustrating both customers and internal teams.

The Zymo Sequencing Hub was designed to address these challenges by creating an intuitive, user-friendly shipping experience, ensuring that both customers and internal teams had clear, real-time guidance throughout the shipping journey.

🏁

What is the product?

🏁

What is the product?

🏁

What is the product?

What is Microbiome Sequencing?

Imagine your beloved pet develops an unusual skin condition, and your vet suspects a fungal infection. The vet collects a sample and sends it to a specialized lab for genetic sequencing. Zymo Research, a leading lab in this advanced service, decodes the genetic information to identify the infection.

What is Microbiome Sequencing?

Imagine your beloved pet develops an unusual skin condition, and your vet suspects a fungal infection. The vet collects a sample and sends it to a specialized lab for genetic sequencing. Zymo Research, a leading lab in this advanced service, decodes the genetic information to identify the infection.

What is Microbiome Sequencing?

Imagine your beloved pet develops an unusual skin condition, and your vet suspects a fungal infection. The vet collects a sample and sends it to a specialized lab for genetic sequencing. Zymo Research, a leading lab in this advanced service, decodes the genetic information to identify the infection.

How does the User use it?

The Vet will collect the sample from your cute dog, and will store the sample properly in the tube. Then ship the sample to Zymo to do the analysis. The step that Vet gonna take is shown as below.

How does the User use it?

The Vet will collect the sample from your cute dog, and will store the sample properly in the tube. Then ship the sample to Zymo to do the analysis. The step that Vet gonna take is shown as below.

How does the User use it?

The Vet will collect the sample from your cute dog, and will store the sample properly in the tube. Then ship the sample to Zymo to do the analysis. The step that Vet gonna take is shown as below.

Our growing challenge: Scaling up meant addressing inefficiencies in shipping for complex biological sample

Our growing challenge: Scaling up meant addressing inefficiencies in shipping for complex biological sample

Our growing challenge: Scaling up meant addressing inefficiencies in shipping for complex biological sample

💡

Situation: The Growing Pains of a Scaling Business

💡

Situation: The Growing Pains of a Scaling Business

💡

Situation: The Growing Pains of a Scaling Business

As Zymo Research rapidly grew, the traditional shipping process could no longer keep up with the increased volume and complexity of orders. The existing workflow, which relied on manual communication, led to frequent shipping errors, particularly with microbial samples that required specific conditions. The shipping process was further complicated by the need for different protocols based on the nature of the samples or devices being shipped, such as temperature-sensitive products, hazardous materials, and international shipping compliance.

How might we streamline customer experience for the microbiome shipping services?

Our outdated shipping system created frustration, delays, and errors—hindering customer experience. For the our current business amount, over $3 million was wasted on the customer support and consultation per year.

Our outdated shipping system created frustration, delays, and errors—hindering customer experience. For the our current business amount, over $3 million was wasted on the customer support and consultation per year.

Our outdated shipping system created frustration, delays, and errors—hindering customer experience. For the our current business amount, over $3 million was wasted on the customer support and consultation per year.

Stakeholder Interview

We conducted the stakeholder interview, and let the stakeholder to give us a throughout idea on how to build the portal. The stakeholder give us some draft of the ideas below. They want to start a service platform to streamline customer's order, shipping and data receiption process, and use the portal to centralize user's behaviour instead of the massive manual reminder inputs here.

  • Key Insight: The logistics team highlighted the importance of streamlining the shipping process to reduce the burden on customer service and prevent delays in receiving samples or devices that needed specific handling.

💡

Key Challenges

💡

Key Challenges

💡

Key Challenges

Complex Shipping Requirements

Many samples and devices had unique shipping requirements, such as dry ice for temperature-sensitive items. Customers often missed critical details, leading to delayed or compromised shipments.

Manual Communication

Shipping guidance was provided through emails and phone calls, leading to confusion, misinterpretation, and back-and-forth communication between customers and the support team.

Shipping Errors and Reshipments

Due to the complexity of the shipping requirements and lack of clear guidance and documentation frequently resulted in reshipments, which increased costs for both customers and Zymo Research.

Lack of Real-Time Visibility

Customers lacked real-time insight into whether their shipments met the necessary conditions, leaving them uncertain about the status of their shipments and increasing support inquiries.

We designed a Quick MVP Solution to further consolidate the ideation.

💡

Phase 1: Ideation

💡

Phase 1: Ideation

💡

Phase 1: Ideation

Customer Interviews:

We conducted in-depth interviews with a diverse group of customers, including individual researchers, large institutions, and international clients. The interviews revealed common pain points, such as confusion over shipping instructions, missed deadlines due to incorrect documentation, and frustration over the lack of real-time shipping updates.

  • Key Insight: Many customers were overwhelmed by the technical details of shipping requirements and found the manual process for obtaining shipping guidance difficult to follow.

Ideation from stakeholder’s draft

Improvement on the intended UI

My initial role at this stage is to convert the stakeholder's primary insight into the phase 1 and polish the product user interface using my experience as a UI/UX designer.

My initial role at this stage is to convert the stakeholder's primary insight into the phase 1 and polish the product user interface using my experience as a UI/UX designer.

My initial role at this stage is to convert the stakeholder's primary insight into the phase 1 and polish the product user interface using my experience as a UI/UX designer.

It's more than a business problem. The user made mistake beacasue they are confused.

It's more than a business problem. The user made mistake beacasue they are confused.

It's more than a business problem. The user made mistake beacasue they are confused.

💡

Microbiome Service Workflow from the User Perspective

💡

Microbiome Service Workflow from the User Perspective

💡

Microbiome Service Workflow from the User Perspective

User Flow

This diagram illustrates the Microbiome Service workflow from the user's perspective. The user sends samples to our supply chain department, where eligibility is checked. If approved, the samples are sent to the lab for sequencing and analysis. Once completed, the lab provides the results to the user via the portal.

The complexity is that, the portal is not only for customers, but also for the labortary staffs.

The complexity is that, the portal is not only for customers, but also for the labortary staffs.

The complexity is that, the portal is not only for customers, but also for the labortary staffs.

B2B Transactions: Navigating Multi-Stakeholder Complexity

Unlike traditional e-commerce, B2B transactions involve not just customers but entire companies. Users represent organizations with multiple stakeholders—purchasing agents, financial departments, and scientists—which adds layers of complexity to the process.

💡

User Journey Map

💡

User Journey Map

💡

User Journey Map

Identifying Key Frustrations in the User Journey

The user journey map highlights key frustrations in the payment, shipment, and data retrieval processes. These areas will be our focus for making adjustments and improving the overall user experience.

💡

The Design and Development Journey

💡

The Design and Development Journey

💡

The Design and Development Journey

From Sketch to System: Building the Zymo Sequencing Hub

With the scientists' initial idea as a foundation, I developed the first draft of the workflow. My goal was to create a seamless experience that would address the challenges we identified: E-commerce and Payment Shipping Guidance and Notifications Data Storage and Management

From Sketch to System: Building the Zymo Sequencing Hub

With the scientists' initial idea as a foundation, I developed the first draft of the workflow. My goal was to create a seamless experience that would address the challenges we identified: E-commerce and Payment Shipping Guidance and Notifications Data Storage and Management

From Sketch to System: Building the Zymo Sequencing Hub

With the scientists' initial idea as a foundation, I developed the first draft of the workflow. My goal was to create a seamless experience that would address the challenges we identified: E-commerce and Payment Shipping Guidance and Notifications Data Storage and Management

• E-commerce and Payment

• E-commerce and Payment

• E-commerce and Payment

• Shipping Guidance and Notifications


• Data Storage and Management

Design Challenge No.1

E-commerce and Payment

💡

Streamlining B2B E-commerce for a Seamless B2C Experience

💡

Streamlining B2B E-commerce for a Seamless B2C Experience

💡

Streamlining B2B E-commerce for a Seamless B2C Experience

This challenge focused on simplifying complex B2B e-commerce payments. B2B transactions involve quotes—contract-like agreements between companies. We designed a portal with three sections: quote, payment, and project, highlighting key details like quote number, expiration, and payment status.

The quote and payment statuses determine if the project can proceed, ensuring a smooth workflow. Despite the complexities, our design delivers a B2C-like experience, making the process intuitive and efficient.

Mapping User and System Flows

The user flow is split between user actions and backend processes. The diagram highlights key user steps and Zymo Steps. After user ship sample, Zymo processes the sample and displays results on the portal.

Initial Sidebar Design for Key User Behaviors

Based on our analysis, we created the first version of the sidebar to streamline key user behaviors. The menu is organized into six main items:

  1. E-commerce

  2. Payment

  3. Shipping Guidance

  4. Data Storage

  5. Order Tracking

  6. Results & Reports

This structure helps users navigate the portal efficiently.

Product Selection Flow

These images show the choose product flow. Users first land on the Microbiome Service page, where the five key services we offer are displayed. For each service, users can get a price review by entering the essential order information. This flow simplifies access to pricing details, streamlining the overall process.

These images show the choose product flow. Users first land on the Microbiome Service page, where the five key services we offer are displayed. For each service, users can get a price review by entering the essential order information. This flow simplifies access to pricing details, streamlining the overall process.

These images show the choose product flow. Users first land on the Microbiome Service page, where the five key services we offer are displayed. For each service, users can get a price review by entering the essential order information. This flow simplifies access to pricing details, streamlining the overall process.

Payment Flow Challenges

The next challenge was streamlining payments for B2B (Purchase Offer) and B2C (credit card) customers. We regrouped them into verified and unverified categories.

  • Verified customers can pay via PO or credit card.

  • Unverified customers can use credit cards, but PO payments require financial department approval.

Cart and Checkout

In the checkout flow, unverified users receive reminders to provide their information to the customer service team. Additionally, clear indications of the next steps and payment status are provided to guide users through the process.

Email Reminder

We implemented email reminders to provide users with clear updates on their status and guidance on the next steps, ensuring they stay informed throughout the process.

Design Challenge No.2

Reverse Shipping Process

💡

Addressing Reverse Shipping Challenges for Sample Analysis

💡

Addressing Reverse Shipping Challenges for Sample Analysis

💡

Addressing Reverse Shipping Challenges for Sample Analysis

Reverse shipping, where users send samples to us, led to user dissatisfaction, high inquiries, errors, and frustration. This raised support costs and risked user abandonment, negatively impacting business operations.

How can customer ship their sample to us?

💡

Solving Reverse Shipping Challenges

💡

Solving Reverse Shipping Challenges

💡

Solving Reverse Shipping Challenges


From user research, we applied three key methods to improve the shipping process. We simplified wording and streamlined the shipping guide, made form transitions and submissions easier, and added flexibility for users to pause and resume the process. To bridge the digital and physical gap, we provided physical copies for mailing samples and ensured proper identifications to enhance success rates.

Simplified the Shipping Guidance

To improve the process, we simplified shipping instructions and made reminders smarter. The system now automatically displays relevant guidance based on the selected service. For instance, if a user selects raw sample, only raw sample instructions appear on the shipping page.

Streamlining Form Submission for User Convenience


We streamlined form submission by offering both online fill-in forms and a Dropbox feature in the portal, allowing users to easily upload pre-filled PDFs. This design accommodates the needs of both new and returning customers.

Error Provention by Confirmation Page

The confirmation page allows users to double-check important terms and highlights the notification section in a clear, focused manner, ensuring users don't miss crucial details.

Improving Shipping Guidance Accessibility and Reducing Abandonment

We offer flexible access and added a quitting mechanism that lets users pause and resume, reducing abandonment and improving completion rates.

Improving Shipping Guidance Accessibility and Reducing Abandonment

We offer flexible access and added a quitting mechanism that lets users pause and resume, reducing abandonment and improving completion rates.

Improving Shipping Guidance Accessibility and Reducing Abandonment

Improving Shipping Guidance Accessibility and Reducing Abandonment

Resume Mechanism

Users can easily resume the shipping guidance process anytime through the Portal's Ongoing Projects tab, ensuring a seamless experience.

Resume Mechanism

Users can easily resume the shipping guidance process anytime through the Portal's Ongoing Projects tab, ensuring a seamless experience.

Resume Mechanism

Users can easily resume the shipping guidance process anytime through the Portal's Ongoing Projects tab, ensuring a seamless experience.

Exit Reminders

We provide reminders when users attempt to quit the process, notifying them of remaining steps and any applied discounts. These reminders have effectively reduced cart abandonment rates.

Exit Reminders

We provide reminders when users attempt to quit the process, notifying them of remaining steps and any applied discounts. These reminders have effectively reduced cart abandonment rates.

Exit Reminders

We provide reminders when users attempt to quit the process, notifying them of remaining steps and any applied discounts. These reminders have effectively reduced cart abandonment rates.

Bridging Digital to Real-World Shipping Guidance

Seamless Access to Shipping Instructions

To address challenges users faced at the post office, we implemented an automatic download and one-click email feature. This ensures users have easy access to the shipping instructions on their devices, even outside the digital platform, improving their experience and reducing errors during shipping.

Clear Indication on Next Step

To address challenges users faced at the post office, we implemented an automatic download and one-click email feature. This ensures users have easy access to the shipping instructions on their devices, even outside the digital platform, improving their experience and reducing errors during shipping.

Clear Indication on Next Step

To address challenges users faced at the post office, we implemented an automatic download and one-click email feature. This ensures users have easy access to the shipping instructions on their devices, even outside the digital platform, improving their experience and reducing errors during shipping.

Clear Indication on Next Step

To address challenges users faced at the post office, we implemented an automatic download and one-click email feature. This ensures users have easy access to the shipping instructions on their devices, even outside the digital platform, improving their experience and reducing errors during shipping.

Design Challenge No.3

Data Storage

Managing Completed Projects and Data Storage

In the Completed Projects tab, users can view completed projects and receive email reminders for data and project status updates. Due to AWS storage limitations, customers have a limited time to download reports. To address this, we implemented an email reminder system to ensure timely downloads within the allowed period.

Real-Time Access to Reports and Data

The Report Page provides real-time access to both report details and data directly on the portal, ensuring users can view updates instantly.

Others: Design Iteration and Improvement

UI Detail Iterations

↑ Final Design

Enhancing Dashboard UI for Better Accuracy and Readability

Lastly, we made UI improvements on the dashboard to enhance information accuracy and readability. Across three versions, our final design includes category tabs to separate projects by status and function. We use red to highlight projects with issues or on hold, and yellow to warn users of potential problems with their project status.

Iteration 1: Redundant UI element →

In Iteration 1, we introduced search, sort, and filter functions. However, usability testing showed that the top menu bar effectively categorizes all projects, making the additional search unnecessary. Stakeholder feedback confirmed that the project volume is manageable, and a simple top category bar is sufficient for users to filter projects efficiently.

Iteration 2: Overwhelm Color Use →

Another iteration we abandoned involved using different colors to indicate project statuses. While it appeared visually appealing, user research revealed that too many colors distracted users. Though aesthetically pleasing, this design lacked the functionality and clarity of the final version we adopted.

Result and Impact

💡

The Moment of Truth: MVP Launch

💡

The Moment of Truth: MVP Launch

💡

The Moment of Truth: MVP Launch

After eight months of intense development and collaboration, the Zymo Sequencing Hub was ready for its debut. We launched the MVP version internally on August 18th, with plans to go public on September 26th. The results were nothing short of transformative.

After eight months of intense development and collaboration, the Zymo Sequencing Hub was ready for its debut. We launched the MVP version internally on August 18th, with plans to go public on September 26th. The results were nothing short of transformative.

After eight months of intense development and collaboration, the Zymo Sequencing Hub was ready for its debut. We launched the MVP version internally on August 18th, with plans to go public on September 26th. The results were nothing short of transformative.

📊

Key Metrics:

📊

Key Metrics:

📊

Key Metrics:

62%

62%

Reduction in customer support inquiries

After the first quarter of launch, customer support inquiries for microbiome services decreased by an impressive 62%.

25%

25%

Higher Customer Satisfaction

Customers reported that the new system was intuitive and easy to follow. The average satisfaction score for the system improved significantly, rising from 6 to 7.5.

💡

Usability Testing Result

💡

Usability Testing Result

💡

Usability Testing Result

• Order Placement Efficiency

The time it took for users to place an order was significantly reduced too, from an average of 20 minutes on the phone to just 3 minutes and 40 seconds using the portal.

• Payment and Shipping Success Rates

Tested with 10 users.

80% of users completed the payment process on their first try, and 70% successfully navigated the shipping flow without errors. This was a significant improvement over the previous system.

🌄

A New Era of UX at Zymo Research

🌄

A New Era of UX at Zymo Research

🌄

A New Era of UX at Zymo Research

The Zymo Sequencing Hub has not only improved operational efficiency but also set a new standard for UX maturity within the company. The success of this project has opened the door to expanding similar digital solutions across other business units, including DNA and RNA analysis services. Our experience with the Hub has shown that automation and thoughtful design can significantly enhance customer satisfaction and reduce the workload on our support teams.

The Zymo Sequencing Hub has not only improved operational efficiency but also set a new standard for UX maturity within the company. The success of this project has opened the door to expanding similar digital solutions across other business units, including DNA and RNA analysis services. Our experience with the Hub has shown that automation and thoughtful design can significantly enhance customer satisfaction and reduce the workload on our support teams.

The Zymo Sequencing Hub has not only improved operational efficiency but also set a new standard for UX maturity within the company. The success of this project has opened the door to expanding similar digital solutions across other business units, including DNA and RNA analysis services. Our experience with the Hub has shown that automation and thoughtful design can significantly enhance customer satisfaction and reduce the workload on our support teams.

Impact & Learnings

🚀

Leadership and Learning: My Journey as a Senior UX Designer

🚀

Leadership and Learning: My Journey as a Senior UX Designer

🚀

Leadership and Learning: My Journey as a Senior UX Designer

This project was a defining moment in my career. Leading the UX design for the Zymo Sequencing Hub allowed me to grow as a designer, but more importantly, it taught me the value of cross-functional collaboration. Working alongside scientists, developers, and customer support teams, I learned how to navigate the challenges of integrating diverse perspectives into a cohesive product vision.

This project was a defining moment in my career. Leading the UX design for the Zymo Sequencing Hub allowed me to grow as a designer, but more importantly, it taught me the value of cross-functional collaboration. Working alongside scientists, developers, and customer support teams, I learned how to navigate the challenges of integrating diverse perspectives into a cohesive product vision.

This project was a defining moment in my career. Leading the UX design for the Zymo Sequencing Hub allowed me to grow as a designer, but more importantly, it taught me the value of cross-functional collaboration. Working alongside scientists, developers, and customer support teams, I learned how to navigate the challenges of integrating diverse perspectives into a cohesive product vision.

🤝

The Power of Collaboration

🤝

The Power of Collaboration

🤝

The Power of Collaboration

Our project manager, who had a bioinformatics background, played a crucial role in bridging the gap between the technical and user experience aspects of the project. Together with the scientists, we formed a partnership built on mutual respect and a shared commitment to excellence. This collaboration was the key to overcoming the many hurdles we faced, from aligning on project goals to coordinating across time zones with our overseas developers.

Our project manager, who had a bioinformatics background, played a crucial role in bridging the gap between the technical and user experience aspects of the project. Together with the scientists, we formed a partnership built on mutual respect and a shared commitment to excellence. This collaboration was the key to overcoming the many hurdles we faced, from aligning on project goals to coordinating across time zones with our overseas developers.

Our project manager, who had a bioinformatics background, played a crucial role in bridging the gap between the technical and user experience aspects of the project. Together with the scientists, we formed a partnership built on mutual respect and a shared commitment to excellence. This collaboration was the key to overcoming the many hurdles we faced, from aligning on project goals to coordinating across time zones with our overseas developers.

Connect Me.

Raina Wu

Portfolio 2022 - 2024