Overview.

My role

In 2023, I joined Ragene as their first UX/product designer, tasked with building upon the initial work designed by their engineers. Over the past year, I've played a pivotal role in designing and refining a data analysis and visualization product.

Team

1 Product Manager

3 Developers

2 Bioinformatics Scientists

This case study shows how I collaborated with an interdisciplinary team to incrementally revamp the product from both user and business perspectives. Through my efforts to enhance the no-code data analysis tool, I've significantly improved user experience, attracted new customers, and contributed to paving the way for potential scientific breakthroughs.

Timeline

2023-2024

Background.

Who’s the user?

People in the life sciences field who need data analysis.

In the life sciences field, people such as bioinformaticians, researchers, medical experts, they analyze biological data to study and interpret complex data, helping advance research, improve technology, develop drugs, understand genetic variations, etc.

What's Ragene?

No-code tool enables life science people to explore biodata without writing code.

In life science research, analyzing biological data often requires proficiency in programming languages like Python, R, etc., besides expertise in the field. This dual demand affects research efficiency.

Ragene is a no-code platform with the vision to expedite current life science discovery. The product allows biodata analysis without any knowledge of coding or programming language, dramatically unleashes researchers' time, energy and productivity.

Design Part 1: Rebuild Product Core.

Design Goal.

Right after joining the team, I learned that the biggest challenge facing our product, Ragene, was that most users were quitting before completing the analytics task and visualizing the data. By organizing the feedback collected so far and integrating it with user journeys, it became clear that we needed to enhance the product to accomplish two critical goals:

1. Enable users to easily start analyzing tasks as soon as they begin using the new tool.

2. Ensure that users can seamlessly complete their analysis tasks without getting stuck.

Insight 1.

“How can we prevent users from feeling overwhelmed with a new tool?”

→ Developing a specialized onboarding is not advisable at this stage due to the low ROI.

Initially, the team planned to develop an onboarding process to help users learn about the platform's features and usage. However, user research showed that our primary users—biology students and researchers—have a strong ability to explore and learn new tools independently.

Given the user behavior and the product's development stage, where many features are still undefined and resources are limited, we decided to focus on two main areas at this stage instead of developing a specialized onboarding process:

1. Optimize the main interface to be as easy to understand and use as possible.

2. Provide a documentation as a backup to offer further instructions to users.

Insight 2.

“Why do users find the analysis flow complex and get stuck?”

→ The current flow doesn't match users' mental model for data analysis.

Through user research, I found that users need to build analysis pipelines by selecting and arranging different algorithms and filling in different parameters to get the required visualization.

However, the current interface & flow make users have to switch repeatedly between the analysis page and the tree diagram panel to view the analysis pipeline, and the unintuitive and inflexible interaction doesn’t align with users’ mental model and pulls down the user's analyzing efficiency.

Conclusion

Distill 3 main design principles from user research as guideline in the design phase.

→ Easy-to-learn: Users can learn how to use the tool by exploring on their own without specific tutorial & onboarding.

→ Intuitive: The analysis pipeline has an intuitive presentation to the user without switch between different interfaces.

→ Flexible: Users have the flexibility to build and edit analysis pipeline without switch between different interfaces.

Level 1 / Strategy

Shift product’s underlying logical from text-based interface to GUI.

→ Align user flow with their mental models of the data analysis process.

Based on the user workflow in data analysis, I proposed a new GUI concept that abstracts algorithms into visual blocks, allowing users to intuitively and flexibly build computation flows. I validated this concept early with stakeholders and received positive feedback with following reasons:

1. There are already open source APIs for GUI development that can be directly called during the development phase, which will greatly shorten the development cycle.

2. Although the GUI concept is quite different from the existing version, it only involves front-end changes, not back-end changes, which is in line with the development timeline.

Level 2 / Skeleton

Design a new GUI layout as a solid fundamental for the product to scale on top of.

→ Straightforward feature layout enables users to quickly get started by self-exploration.

Interestingly, during my initial explorations of functional layouts, I designed two layouts based on GUI concepts: the Floating Panel and the Classic Panel, similar to the Figma UI2 and UI3 layouts.

Unlike Figma's update from UI2 to UI3, I merged the benefits of modern floating effects with traditional fixed layouts. This design approach combines the modern aesthetics of floating panels with the stability of fixed layouts to cater to the preferences of life science researchers.

Level 3 / Surface

Define the detailed visual & interaction design for key pattern with holistic view.

→ Ensure good usability and scalability of the product core feature.

After finalizing the page structure, I focused on the most crucial element of the drag-and-drop interface: the node card design. I designed evaluated 3 design options with the team, considering both usability for users and scalability for product development, before making a design decision.

Design Part 2: Connect Design To Business.

Business need

Enrich platform resources & Increase user retention by building a community in future (like Figma community).

While Ragene is currently concentrating on the functionality of data analytics, it is also planning its future direction. It is anticipated that once the core functions of the product are nearly fully developed, Ragene will begin to establish a community centered around life science research and data analysis. This community will enable users to communicate and enhance the platform's resources.

Design solution

Make room for new features in advance based on the business strategy.

As a startup designer, I design with both the present and future in mind. I integrate features that are likely to be needed in the future into the current design stage based on business requirements.

For example, I delivered current version design and future version design including capabilities for users to directly access public data within the platform or to upload their own analytical algorithms. This approach ensures that the team's vision for the product's offerings is clearly articulated from the start.

Design Part 3: Validation & Iteration.

User feedback

“I have to switch between different nodes to view various vis, which is inconvenient.”

→ Improvement

Redesign node card with a more intuitive way to navigate through different visualizations.

The visualization preview of each node is displayed directly on the node after the node computation is completed, without the need for each selection. So users can view multi data visualization at a time.

User feedback

“I don't know how to fix nodes that are running with errors, it's overwhelming…”

→Improvement

Provide AI-generated error messages that guide users in debugging for analysis pipeline.

During analysis pipeline runs, unexpected runtime errors can occur, leading to user frustration. To address this, we aimed to provide users with straightforward, AI-generated solutions to help them resolve issues more efficiently.

After confirming the technical feasibility with the engineers, I added a mode for the side panel dedicated to displaying these AI-generated error messages & solution.

User feedback

“My analysis pipeline has many nodes, which sometimes affect my other operations.”

→Improvement

Allow multiple nodes to be collapsed to shorten the pipeline.

In actual analysis tasks, a pipeline can consist of up to 20 nodes, and a single node may connect to multiple branches. This complexity can sometimes hinder the pipeline's readability and other aspects for the user.

To address this, I have implemented collapsible options for nodes, allowing users to collapse less important parts of the pipeline as needed to simplify the interface.

🎉 Phew~ You made it!