# UX Design
Bio Informatics
Data Management
User Experience
SaaS (B2B)
0-1
Web
Overview
CLIENT
A world-leading hospital that dedicated to clinical practice, education, and research.
DESIGN OBJECTIVE
This project is for supporting the internal genomics research.
METHODS
Prototyping (low-fi, mid-fi, hi-fi)
Usability testing
Sprint management
TOOL
Figma
Miro
Physical whiteboards
Azure DevOps
TIMELINE
Phase 1: Jan 2022 - Dec 2022 for proposing an MVP for researcher users, 20% FTE
Phase 2: Jan 2023 - Jan 2024 for MVP lifting according to the usability test result, 30% FTE
MY ROLE
Assistant UX designer in phase 1: contributed ideas in brainstorming, took charge of the hands-on design works on individual features
Lead UX designer in phase 2: the creator of the designs shown here
Observer and note taker for 2 rounds of usability tests
Project Context
This is a 0-1 project that aims to uncover and explore meaningful research questions through active data observations.
It supports the first few steps among the complex process of data investigation:
Prepare the object (data) of study
Query across datasets (for research users, allow them to compile a query more flexibly; for novice users, provide them modularized choices and explanations)
Manage the queries, and see the query progress
Save reusable query assets
Explore research direction
Browse the gathered (queried) data then send it to the next step in another platform
Users
Researchers in the genomics domain who seeks to get insights from data to inform their next research questions.
Data scientists
Non-data-scientist researchers
Phase 1
I was the creator of several components and contributed ideas in the brainstorming
Challenge 1.1
Challenge Statement
This is a 0-1 project that has no competitors, but the tasks users will perform by using this product are crystal clear. So I began by establishing the fundamental logic of the product and turn the tasks into a reasonable UI flow:
Choose the target user group for this phase
Build the framework of the product
Identify the key flow to the product, to help propose a timeline
Actions
The genomics domain is highly complex and challenging to understand. To understand the design issue, I collaborated with the product owner, who holds a PhD in the genomics domain. The product owner gathered preliminary information from the clients and then brainstormed with the design lead (for this phase) and me (as the assistant designer) to make the final decisions.
Three of us decided the target user group, the timeline, and a feature structure.
I translated this structure into an information architecture.
The design lead further refined it to ensure extensibility.
UX Solution for #1
We chose data scientists as the target user group for the MVP because they need more complex query parameters and have significantly broader use cases. These advanced use cases naturally encompass those of non-data-scientists, whose needs rely on the combination of algorithms developed for data scientists. Focusing on data scientists ensures robust algorithm and UI development that supports both groups.
UX Solution for #2 and #3
Flowchart
Information architecture
Timeline
The Query Formulation and the Query Result are the key steps of the flow, since the user takes the most actions in these 2 steps. We decided to spend the rest of time to iterate these 2 features after establishing the workflow.
Deliverables
I was the creator of several components and contributed ideas in the brainstorming (ideas above), the rest of pages in this phase were made by the design lead.
Challenge 1.2 (Usability Test)
Challenge Statement
How do users perceive the design?
Actions
The product owner designed a usability test with 2 key clients, they are also our typical users. I worked as a note taker and the deliverable organizer.
Findings
Our clients suggested to add a lot more choices and filters in the query formulator.
Even for data scientist researchers, they may not recognize every terminology, but understanding the annotations is crucial for effective query formulation.
There are a lot of UI inconsistencies.
Accessibility problem for the Query Management page, especially when there's an alert dot on the button on the status color background.
Phase 2
I was the lead designer in this phase
Challenge 2.1
Challenge Statement
Since there are a lot more actions a user should take in the query formulation process, how might we make the flows and contexts understandable, shortening the time a user spends on it as possible?
There’s no UI patterns in genomic software yet, while the workflow for building a query is very hard to understand.
Actions
I prototyped alternatives and compared pros and cons. I decided to use steppers to guide users taking actions while providing enough context information.
I also applied auto layouts and used design tokens to manage the new UIs.
UX Solutions
The stepper instruction iteration in the <Query Builder>, the green one was selected
Challenge 2.2
Challenge Statement
How to design the new features to support the filtering process?
There are 6 different input methods, which can be used either in parallel or individually, for users to define the region of interest. Additionally, users have the option to save their selection.
Actions
I created prototypes based on the requirements, ensuring alignment with the new UI tokens, including font, color, spacing, and grouping method.
I conducted a simple usability test with 2 colleagues who were not on this project, asking them to think out loud while looking at the static the interface. They shared their guessing of the available actions and the system's responses to those actions.
UX Solutions
The <Region of Interest Editor> in the <Query Formulator>
An iteration for the "Import Saved Region Set": Before user testing, I didn't realize that users might want to review their selections before updating, as selections were immediately converted into gene chips, losing track of the original resource. After testing, I added a selected status for "Import Saved Region Set".
Super Search and Versioning in the <Query Formulator>
Challenge 2.3
Challenge Statement
How might we enhance the understanding of terminologies
Consistency of the information triggers
Actions
I conducted a consistency check by listing all instances where an information icon was used, analyzing the rationale behind each usage, and providing alignment suggestions for improvement.
UX Solutions
I decided to unify the text size on the same information hierarchy, and align the icon size with the adjacent text to keep the consistency.
I changed the outlined icons to filled icons. It helps users distinguish the text from the graphical trigger, making the list easier to scan.
I decided to use the information icon in two ways: as a hoverable item for users to access detailed information, or as a visual cue to indicate where information sits.
The info icon for the Field under different context
When users need a quick scan through more than a careful consideration, I chose to use the hoverable info for fields. On the opposite case, I chose to display the info itself to help users focus on discerning the one field.
Challenge 2.4
Challenge Statement
Accessibility / usability improvement of Query Management page
Actions
I walked through the design and found it very hard to notice the red dot (used to indicate new query updates) on the blue button. In addition, the colors of the navigation bar were inconsistent with the status background colors below. So I created prototype alternatives to find out better solutions.
UX Solutions
Phase 1
Phase 2: adjusted color accessibility
Phase 3: unified with the design system
I also posted a further improvement in phase 3, I tried to align the design with the design system.
I made further changes since I noticed that users primarily check updates on the landing page rather than on the query management page. Most users come to the query management page to find a query according to the creation data. To enhance focus, I reduced the colors in the navigation bar, making the status colors in the table more prominent and helping users scan through queries more effectively.
Challenge 2.5 (Usability Test)
Challenge Statement
How do users perceive the design?
Actions
The product owner designed another usability test with 2 key clients, they are typical users. I worked as a note taker and the takeaway organizer. I wrote a usability report as a final deliverable.
Findings
(Query Formulator page) The right side show less usage rate and needs improvement.
(Query Result page) Users wish to read even more data in this page.
(For the whole workflow) Users usually create multiple test queries before launching a real query, as real queries often take a long time to complete. Most of the time, users check the query status to see if the real query completed.
(For the whole workflow) Users define the filter much more often than defining the sorting in the Query Formulator.
(New requirement) Since the queries are run on the cloud, and the cloud service is limited, the users want to know if it's a good time to run the real query.
(New requirement) It's time to design for non-data-scientist researchers.
(Consistency) The client would like to apply the design system I created for this series of product in another project.
Phase 3
I was the lead designer in this phase
Challenge 3.1
Challenge Statement
How might we adapt to the updated workflow?
(For the whole workflow) Users usually create multiple test queries before launching a real query, as real queries often take a long time to complete. Most of the time, users check the query status to see if the real query completed.
(New requirement) Since the queries are run on the cloud, and the cloud service is limited, the users want to know if it's a good time to run the real query.
Actions
I updated the workflow based on the new user feedback
UX Solution: update the information architecture
UX Solution: redesign the landing page
I decided to utilize the landing page to present the most recent query progresses and the cloud availability.
Usually, a user would focus on a few projects in a few months, so it's not necessary to present all projects this user owns on the landing page. Thus I used a large space to show the latest query progresses, which is the top thing a user concerns.
Challenge 3.2
Challenge Statement
How might we improve the efficiency of space usage?
(Query Formulator page) The right side show less usage rate and needs improvement. (For the whole workflow) Users define the filter much more often than defining the sorting in the Query Formulator.
(Query Result page) Users wish to read even more data in this page.
Actions
I made iterative prototypes to meet feature requirements. At the same time, I also worked to reduce visual noises and align the UI with the design system.
UX Solution
The Query Formulator page
Flat visual hierarchy isn’t always the best. When a user need to work with massive information, placing appropriate information on the same hierarchy can ease their working memory load. In this case, a complex visual hierarchy can actually improve the work efficiency.
Since users need to switch between categories very often to add new annotation source from the step 1, I decided to put it (step 1) aside the selection result (in step 2) on the same page. Higher information efficiency is more important than helping users focus on the current action in this case.
To reduce the visual noise, I assigned background colors to steppers, making sure users notice and understand the workspace and how the features were set up.
Users define the filter much more often than defining the sorting, so I buried the sorting feature in a deeper place, while utilizing the landing page of the Query Formulator for selecting annotations and establishing filters.
The Query Result page
Query information is hidden when scrolling down. The paginator is simplified into a floating chip.
To inform the association between the navigation chips and the table sections (see column blocks, each block corresponds to a navigation chip), I streamlined their look and feel.
Challenge 3.3
Challenge Statement
How might we adopt the current product and design for non-data-scientist researchers?
Actions
Our product owner helped me wrap reasonable choices into combos and interpret the combination with clear, understandable language.
I adapted the flow of non-data-scientists' process into a flow similar to that of data scientists, using steppers to guide their actions. Simplified components and interfaces were implemented to help non-data-scientists understand the complex, domain-specific choices.
UX Solution
Challenge 3.4
Challenge Statement
(Consistency) Apply the design system on BDIP.
Actions
I created a Figma Variable color token sheet to apply the color palette, and applied the design system guidelines I had developed for another project.
The design system I applied was originally created for a series of 9 research products for the same client.
UX Solution
Phases Ended
My Reflections
Ask the right question to the right person.
Since our team worked with a gigantic company, designers didn't have much opportunity to talk to the clients. But we have plenty of time talking to the product owner who has a PhD degree in bioinformatics. Learning through this project, I realized that I should direct technical questions to the product owner, ask validative questions to clients, and ultimately base my design decisions on observations and the synthesized knowledge gained from user sessions.
The database and logic is the key to understanding this difficult new issue, genomics research. Learning how to get on the same page with users is a unique part of the "empathy" process in this project.
I didn't fully get what BDIP does until I asked the product owner about the overall logic of the backend data. The data and logic are universal, and genomics is just one domain that applies this data and logic. The genomics context is too hard to be understood right away, but I can still grasp the core idea and start my UX work. Analogies really helped make everything clearer.
A good way to divide tasks between designers is: Establish clear task boundaries to define responsibilities, while maintaining a positive attitude to help each others' brainstorming phase.
Me and my leader brainstormed the framework design together, but the design lead would be the person in charge of delivering the framework design, and I took the hands-on works under the framework.
© Fangyu Zhou 2024 Selection · All Rights Reserved