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

Compared to the previous version of Ragene MVP,

40%

Completion rate for analysis task

Compared to the traditional data analysis way,

↑ 12×

Efficiency of analysis task at least

(Featured in academic journals)

The revamped product helped company to secure

10+

Orders from hospitals & labs

Background.

Who’s the user?

→ People in the life sciences field who need data analysis to support discoveries.

What's Ragene?

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

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.

Ragene is a no-code tool with the vision to expedite current life science discovery. It allows biodata analysis without skills of coding tools like like Python, R, etc., dramatically unleashes researchers' time, energy and productivity.

Prompt.

Initially, the team developed a no-code data analysis Single-Page Application as an MVP to validate demand. While feedback confirmed the need, the current MVP is designed for single-task completion, causing users to exit after use and limiting long-term engagement. Additionally, there is negative feedback on data analysis, the product's core feature. To address these challenges, Ragene plans to transition into a scalable web platform supporting data and analysis management, improving functionality, and enhancing user retention and long-term value.

Goal #1

→ Introduce new functionalities that enable users to store and manage data and analyses, improving user retention.

Goal #2

→ Enhance the existing core functionality (data analysis), improving the usability and efficiency.

Align the vision.

Although the initial requirement was straightforward—add new features and enhance existing ones—understanding the broader context revealed a deeper challenge. Directly integrating new features into the existing single-page application framework will degrade the user experience and constrain the product’s long-term scalability.

To address these issues, a complete redesign of the product framework was necessary. This approach not only resolved scalability concerns, enabling seamless integration of new functionalities but also provided a strong foundation for enhancing existing features.

Design part 1: Introducing new framework & functionalities.

As the design strategy, firstly, I restructured the existing single-page application into a scalable framework, including a module that allow users to manage and create more analysis tasks on the platform. Beyond analysis tasks, the new framework effectively supports additional features in the roadmap, such as database integration.

While designing features related to the database, as there are some objective technical requirements in this area, such as the typical size of data used in life science research, upload durations for large datasets, and whether background uploads could be implemented to improve efficiency.

To ensure a seamless user experience, I consciously and proactively collaborated with the PM and Eng to clarify these requirements and align the design with technical constraints and user needs.

Design part 2: Enhancing existing core functionality.

1) Lack of learnability

It challenging for users to grasp how to use the core functionality of a brand new product effectively, leading to frustration or drop-offs.

2) Overly complex workflows

Even when users understand the feature, the process feels unnecessarily complicated, discouraging further usage.

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

Product side:

Onboarding design requires time and resources from both design and development. However, given the product’s early development stage, where many features are still undefined or subject to change, designing an onboarding process at this stage could be wasteful as features evolve in the future.

User side:

After interviewing our users, I found that our target user groups is willing to explore and learn the new product independently. However, the product’s complex and unintuitive interface made this challenging.

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.

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.

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!