Overview.
Accelerate biodata analysis through
scaling & enhancing visual programming platform
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
Achievement
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.
Ragene, a no-code data analytics tool
for life science research & clinical medicine
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.
Problem.
Three major friction points in user flow
hinder long-term platform usage by users
Initially, the team developed a no-code data analysis Single-Page Application as an MVP to validate demand. While feedback confirmed the need, user journeys revealed 3 major friction points that hindered task completion, negatively impacting analytics completion rates and user retention on the platform.
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.
3) Repetitive operations
When user want to get previous analysis result, they have to re-upload data file and re-analyze, the repetitive operations leds a low user retention.
Align the vision.
Brainstorm & Prioritize ideas,
narrow down the scope, define the design goals.
To address user challenges in their data analysis workflow, I facilitated workshops with the cross-functional team to generate potential solutions. We prioritized these ideas based on user needs and business considerations, which helped narrow the project scope and establish clear design goals.
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.
Decision-making: Why not design onboarding at this stage?
→ Developing a specialized onboarding is not advisable at this stage due to the low ROI.
Initially, the team considered developing a guided onboarding process to help users quickly understand and navigate core functionalities, ensuring a smoother learning curve and improved experience. However, given the following reasons, our team came to a consensus: creating an onboarding flow is not cost-effective at this point. Instead, improving the usability of the core functionality itself and making the interface intuitive enough for self-exploration is a more pragmatic approach.
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.
Design part 1: Introducing new functionalities.
Rebuild the product's IA to enable
the integration of additional features
Connect design to business
→ Design a new scalable framework align with the product roadmap.
In order to achieve the design goal: Introducing new functionalities the design goal, firstly, I restructured the existing single-page application into a scalable framework for long-term development, 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.
Build a database management system
as the foundation for data analysis
Understand technical requirements & constraints
→ Identify considerations in data-related design with PM and developers.
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.
Distill root problem
from user & secondary research
“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.
Revamp the product level by level
from framework to the details
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.
Based on the framework layout of the page and the design of key elements, I refined and perfected other functional details to enhance the user experience.
Validation & Iteration.
Continuous improve product usability
based on regular user testing & feedback
By conducting user testing of the design, we observed that users could quickly grasp the product and easily create their own analysis pipelines by the drag-and-drop interface as our expectation. Encouraged by this, we released this version to internal test users. After the release, we continued to refine and improve the design based on usability issues that users encountered in real-world usage.
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.
.gif?w=1920)
More iterations are still in progress…
