The leading technology platform for decentralized, real-world clinical research.

Smart Omix Web App

Defining and prioritizing user stories and product features;
Facilitating & overseeing product specs;
Constructing site architecture and user flows based on use stories;
Iterating design options;
Conducting product reviews with stakeholders;
Delivering product design to engineering team for production;
Running usability testing and incorporating feedback into product roadmap;
Producing marketing materials (videos, posts, etc.);

01 - Timeline & Responsibility

The design of Smart Omix started in September 2021 with the goal of launching the first release in July 2022. As the main product designer in Smart Omix, my responsibilities and priorities shift along the journey. In the initial design phase, I worked closely with product to define product’s long-term vision, set up a scalable product structure, explore possible user stories by talking to the domain experts. Then I focused on iterating user flows, web UI and UX copy to optimize the user experience while facilitating review sessions to collect stakeholder’s feedback and incorporate it into the design work. After that, I delivered the design to engineers for implementation based on the timeline and feasibility. By the end of the product’s first lifecycle, I carried out usability testing and incorporate user feedback to product’s road map for future releases. Now I am working on Smart Omix V2 for next release.

02 - Context

What is clinical research ?

Clinical research is a process of collecting answers from participants regarding clinical-related questions at specified frequencies for a continuous period.

* Instrument: Media of collecting clinical data, could be in the form of surveys, photos, videos, and readings from medical devices, etc.

What is clinical research on digital platform ?

Comparing to traditional clinical researches, researches on digital platform could increase the accessibility of research activities tremendously, since such activities will not be constrained to specific time and location anymore. However, research activities on digital platform will have more challenges on researcher-participant relationship since the it is difficult to build trust through digital screens.

03 - Opportunities

What is Smart Omix ?

Smart Omix is a digital platform for end-to-end observational clinical research. It has a researcher-faced Web App and a participant-faced companion Mobile App.
· Web App: Platform where researchers draft their studies, manage their participants, and access their study data.
· Mobile App: App where participants enroll in study, submit data, and redeem awards.

What are the core strengths of Smart Omix ?

04 - Goals & Challenges & Design Solutions

The core product strengths and product value have guided the product design along the whole design process. All the design solutions are around the challenges of how to reinforce the core strength and increase product market value.

Challenge 01

How to build a robust, flexible and scalable system to handle end-to-end research activities with various complexities, team sizes, and needs?

Fact

There are multiple phases in research activities

Design — Draft and design the study content, including study protocol, consent, instruments, etc.
Launch — Submit study for the IRB approval and have it available for future participants.
Manage — Recruit and enroll study participants; facilitate and manage their participation.
Analyze — Supervise study progress and review study data .

Fact

There are various of user groups of different sizes and needs

Our target users has a wide spectrum, from individual researchers with limited resources to research teams with organization support and fundings.

Fact

The core tasks and needs vary in different study phases

The core tasks and goals are distinct for different study phases, as well as the focuses of target users. So it is difficult and unnecessary to combine all the activities in different phases into one giant section. They need to be relatively independent and with easy reference with each other.

Design Solution

01. Build a study-level navigation system around study phases

02. Studies will be stored and managed under “organizations”, and permission access will be controlled by “roles” in the organization

* Due to the technical issues on the hosting platform, the prototyping video cannot show appropriately. This GIF will be replaced with a high resolution video once I resolve the issue.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Challenge 02

How to build an intuitive system to handle the complicated state change in study’s life cycle?

Fact

Research activity is not a linear process, study’s status will switch between states.

The 4 phases in a study’s life cycle is not a linear process, study needs to switch back and forth between different study states based on its complexity. The behaviors of study of different states are distinct from each other.

Design Solution

Build a robust system to support all actions illustrated in study state machine

* Due to the technical issues on the hosting platform, the prototyping video cannot show appropriately. This GIF will be replaced with a high resolution video once I resolve the issue.

Challenge 01

How to create a safe environment for researchers to use such new data collection approaches with confidence?

Fact

Novel data collection is a new frontier with great benefits and risks for most researchers and organizations.

By introducing such novel data collection methods, Smart Omix aims to not only improve study data quality, but also bring renovational changes to research activities.

Design Solution

01. Design an experience with 2 parallel goals -- Educate & Encourage

1. Educate researchers with the domain knowledge of such data integration. (more important in the early product stages)
2. Encourage researchers to apply such data integration in their studies with customized settings.

02. Design a layered/nested structure to display information with hierarchy.

With the educational purpose in mind, the UI will be heavy in educational and explanatory content.
1. A layered/nested structure will allow information be presented users with carefully designed hierarchy.
2. It will provide a high-level overview while allow users to explore and learn more if they want.
3. There is a dedicated place for each data type, and all the informations are organized in categories.

* Due to the technical issues on the hosting platform, the prototyping video cannot show appropriately. This GIF will be replaced with a high resolution video once I resolve the issue.

Challenge 01

How to make the system accessible and intuitive enough for users of various backgrounds & knowledge to have an easy start?

Fact

Research activity is a process full of complexities.

Smart Omix aims to be a platform accessible for all kinds of researchers despite of their knowledge and experience, create a streamlined, easy-to-use system despite of its complex nature.

Design Solution

01. Design an informational layer on top of the functional UI.

Design has applied an information system on top of the UI to reveal additional information through specified behavior.

* Due to the technical issues on the hosting platform, the prototyping video cannot show appropriately. This GIF will be replaced with a high resolution video once I resolve the issue.

02. Create mini tasks with stepped guidance

The process of creating a valid study involves a lot of steps and actions. Instead of giving users full freedom to configure their studies in any order, we design mini tasks at important moments to guide users for better results.

* Due to the technical issues on the hosting platform, the prototyping video cannot show appropriately. This GIF will be replaced with a high resolution video once I resolve the issue.

03. Ghost downstream actions and contents to let users focus on current tasks while reminding users of what is coming.

We have applied a design pattern to let users focus on the current task while building expectation for users of what is coming.

* Due to the technical issues on the hosting platform, the prototyping video cannot show appropriately. This GIF will be replaced with a high resolution video once I resolve the issue.

Challenge 01

How to increase the transparency between researchers and participants? How to increase the transparency of in-flight studies?

Fact 01

The bond is weak between researchers and participants in digital clinical research activities.

The biggest drawback of clinical researches on digital platfom is the weak bond between researchers and participants since all the communications are carried out through screens. There is no way for researchers to evaluate participants’ perception or understand their struggles in real time. As a result, there is no way for researchers to discover the issues and re-engage the participants efficiently.

Fact 02

The high transparency of in-flight study is in demand.

In-flight study behaves as a black box in traditional research activities. However, researchers do need to review the study progress and data to detect problems and make necessary adjustment to in-flight studies.

Design Solution

01. Design notification system to make sure researchers can stay up-to-date of study progress, action items, and participants’ requests.

A notification system has been incorporate into different web sections to make study tracking and participant management handy for researchers. They can view all the action items, new messages and requests from participants, get alert of critical adherence change.

* Due to the technical issues on the hosting platform, the prototyping video cannot show appropriately. This GIF will be replaced with a high resolution video once I resolve the issue.

02. Design highly customized data dashboard to allow researchers to view the data from different perspectives.

Data dashboard has data displayed in different categories. For each category, researchers can filter data in a highly customized manner to view data from/of different participants groups, to easily detect problems and react to it.

* Due to the technical issues on the hosting platform, the prototyping video cannot show appropriately. This GIF will be replaced with a high resolution video once I resolve the issue.

05 - Design Implementation

Design work will not stop at the time of engineer delivery. In order to deliver the design to engineers, designer need to design for all possible scenarios and user actions. To be sepcific, there are 3 major perspectives to review and check if the design is complete.

01.

Take care of all the edge cases.

02.

Fine tuning the interactive behaviors.

03.

Capture the flow gaps and optimize the experience for all scenarios.

06 - Usability Testing & Roadmap

I have run a series of usability testings during engineer implementation. All the feedbacks have been incorporated into the roadmap for future releases.

* Due to the technical issues on the hosting platform, the prototyping video cannot show appropriately. This GIF will be replaced with a high resolution video once I resolve the issue.

Reflections

It is important to set up a scalable site structure in the first place: No product can be perfect at its first release. But it is important to set up a long-term product vision even only 10% of it can be implemented in the first release. Road map should be implemented along with product initiation so all the parties are the same page of the target market, users and the ultimate product goal. Designing only for the next release without a big picture in mind will cause tons of problems for the future, especially when it comes to web structure design. The navigation system should be scalable with appropriate places for all the key features on the road map. By doing that, not only the development effort will not be wasted, but also it will help users to have a smooth transition to future releases.
Designer's responsibility go beyond designing: In order to design a decent product addressing the problems and deliver it to production, a designer's knowledge should go beyond UX or UI, way beyond. To understand the domain knowledge, the real pain points, the actual needs, and the compliance requirement is the foundation of designing function product. To comprehend the development cost of different design approaches, the limitations of engineers, and the efficient way of design delivery is the core of designing feasible product.
Collect feedbacks from stakeholders, but be the judge and own the design: It is important to collect feedbacks from all stakeholders: sales, clinical, engineers, but designer should be the final judge and own the product design. Every stakeholder's vision is only one piece of the puzzle, and there are always thousands of different opinions. As the main product designer, the person who put the puzzles together should do a thorough evaluation, taking all the feedbacks into consideration and make the final decision and be confident about it.
Consistency is always the top priority: It is easy to have inconsistent design elements while designing such a complicated product, especially when design and implementation are carried out in phases. The consistency will be presented in multiple levels, from general overview (such as design format, interactive behavior, UX copy, etc.) to tremendous details (such as font, color, size, etc). Whenever new changes are issued in certain sections, it is always critical to review the whole product to find out if there is any similar items but being treated differently.