top of page
This site was designed with the
.com
website builder. Create your website today.Start Now

SaaS platform design

Web 1920 – saas.png

Introduction

Background:

Drug development is a complex and challenging process that takes at least 10 years and a million dollars to find a new drug. Scientists must design the compound's structure, screen a million compounds to find a potential compound, and conduct clinical trials to develop a new drug.

This SaaS platform supports scientists to evaluate the ADMET/PK performance of a million compounds in advance so that scientists can focus on the potential compounds to accelerate the drug development process. 

Target audience:

Scientists from:

  • Pharmaceutical companies

  • C.R.O.

  • Small molecular drug institutes

  • Research laboratory

saas_1.png
Task 1.png

01.

Collaborate with team members to discover the problems and target

Topic 1

Drug development process:

I discussed with co-founders about their experience of drug development to understand the procedure and problems. Also, I studied essays, pharmaceutical companies' reports and competitors' websites to learn the knowledge of drug development in order to analyze the design goal and the features.

Topic 2

AI technology:

It is the AI-driven drug development platform that benefits the drug development process for discovering the new drug. In order to provide coherent information for analysis and evaluation, I focused on the design of the infographic and data management to integrate the latest AI technology and the data in the drug development process.

Topic 3

Business plan:

The platform will provide 3 pricing plans such as the free trial, tier pricing and subscription plan. So it is important to consider the experience and application of different plans in advance to design the platform structure.

Topic 4

Branding & experience design:

The design aimed to an intuitive and scalable online platform for users to easily accomplish the drug development process. Those compounds in the drug development are confidential data, therefore, the branding design will increase the users' impression to trust the platform for uploading their confidential data.

​

process_01

02.

Define the requirements and features 

User requirements:

At the beginning of the design, they only developed a two-page platform for AI prediction and only have a little experience in drug development. According to the drug development background, I organized the development process as a four steps process such as uploading the compounds, selecting the endpoints, viewing the results, and exporting files.

 

So, there were a few initial questions:

  • How to upload & show more than 1,000 data?

  • How to design the ordering process?

  • What is the format of the exporting file?

 

Also, VIRTUALMAN provided the tier pricing and subscription for the pricing plan. So I needed to consider the intuitive design for managing the account plan and the deposit.

​

  • How many personal profiles will be managed in the account?

  • How to manage the balance and record? 

Platform features:

VIRTUALMAN would like to provide a comprehensive AI solution for the drug development process such as different pricing plans, customized AI models and customer service. So I organized the business plan, product features and the drug development process for the SaaS platform deisgn.

​

  • Support virtual high-throughput screening. 

  • Users can select the AI model for the ADMET/PK prediction. 

  • Organize and manage more than a thousand data of the prediction result. 

  • Provide different features for the free trial or subscribed versions. 

  • Design the customer’s service process of the support system. 

  • Immediately access and check the account balance.

process_02

03.

Design the wireframe and mockup   

Sitemap:

SaaS_site map1.png

In order to integrate the above requirements and the features, I planned a dashboard for managing all information and accessing the prediction results. As the site map below, users could easily create a new task for compound prediction, viewing the results and managing their account and balance.

Wireframe:

During the wireframe process, I focused on the users' experience of the user flow and the features. Users need to view and check a huge amount of data on this SaaS platform, so I designed the pages with an F-shaped pattern for viewing the data. For example, I planned the content area with a hierarchical structure from the top-left to top-right and top to bottom. Also, I organized all data with a modular design that benefits users to easily find and check the data and our development team can upload new data model without design evaluation process.

wireframe_1.png
wireframe_2.png
wireframe_3.png

According to the competitor analysis, most of the biotech companies used blue and white as their brand colour, meanwhile, VIRTUALMAN's brand colour used blue and orange to design their logo. So I selected blue, white and light grey as the primary colour to express the trustworthiness, minimalism, cleanness and the AI tech, and orange to express the alarm instruction and payment.

The consistent design of the importing compounds process

Challenge:

Before proceeding to the mockup process, I reviewed the initial uploading file process and I found that the process might decrease the user experience of uploading files. The initial uploading file process was a two-step function for uploading the file and importing the file afterwards. However, users have to check their content again after they import the file.

uploadfileProcess1.png

Solution:

Therefore, I redesigned the process and added the screening and reviewing process. The screening step will check the file content that contains duplicated compounds or invalid format to merge the duplicates or exclude invalid compounds. The reviewing step allows users to review the uploading compounds and modify the name.

New import.png

However, when I came up with the concept, team members didn't support it due to they thought the concept changed the flow and might increase the development time. So I presented to the team a detailed flow chart and the reason that I would like to redesign the process. In my presentation, I introduced the benefit of the flow redesign that could support users to check duplicated and invalid compounds so that users would not be charged twice due to the tier pricing of the business plan. 

​

Keying SMILES &
drawing the structure:

This page is the preview area for keying a SMILE. When users keying a SMILES, they could immediately preview it to ensure whether the structure is valid or not. If the SMILES or the structure is invalid, the preview area will show the instruction for modification.

keying_drawing.png

Uploading file:

The uploading file has 3 steps for checking the file content such as viewing the merged compounds, duplicated compounds and final review. It is important to go through the checking process because a file contains more than a thousand compounds that might be repeated compounds, invalid structures or duplicates from previous tasks could result in the useless of data and double charging.

uploading file.png
process_03

04.

Deliver to the engineer for developing the prototype  

process_04

The experience design of the registration process

Overview:

  • The platform develops a free trial version for clients to experience the benefit of the AI technology.

  • The free trial version simplifies the process so that clients can experience the platform by registering their email addresses.

  • The welcome letter provides more information about the free trial version and a route for clients to log in.

Registration process:

1. When users register the email address on the SaaS platform, they will receive a verification email afterwards. 

​

2. And then they need to verify the email address through verification email.

sign up-1.png

Registration process:

3. When logging in to the SaaS platform, it will show the instruction for the free trial version on the dashboard. Meanwhile, the platform will send a welcome letter for clients to know more about the free trial version.

​

4. Clients can provide their profile information to have more credits for the free trial version.

Sign up-2.png

Design guideline

Design guideline-2.png

05.

Interview with clients to optimize the platform

Overview:

We interviewed and collected a few clients' experiences who have used the platform to proceed with some projects. I have designed an interview process to learn more about their development process and their experience with the platform. We found that the platform provided them with an intuitive design to upload compounds and view the results. Only a few processes were different from the previous procedure, for example, they needed a quotation for the purchasing procedure, a project function for proceeding with the compound calculation, a laboratory book for taking notes and communicating with colleagues and a hiding function for hiding the compound structure.

Optimized feature 1

Quotation for the purchasing procedure:

Clients needed to review the quotation to ensure that they have uploaded all compounds and purchased the essential endpoints for the calculation.

​

So I designed a "save task" feature in step 3 of creating a new task. Users could use this feature when they proceed to step 3 and would like to save the task for reviewing the amount of money and the contents. After they click the button, they will be redirected to the "Manage task" page to view the content of the saved task and they could make the payment afterwards.

save order.png

Optimized feature 2

Project function for proceeding with the compound calculation:

After the calculation of the task is done, scientists will find the potential compound to proceed with another test and compare it with other compounds.

​

So I used the same concept of the task feature to design a project feature. Users could create a new project with a new name, add unlimited tasks and share it with their colleagues. The same compounds will be combined into a single compound and the test results will show the latest calculation results. Therefore, users could keep calculating new compounds and adding the task to the project for reviewing and comparing the potential compounds.

project1.png

Optimized feature 3

Laboratory book for taking notes and communicating with colleagues:

Scientists uploaded more than a thousand compounds for calculation. Therefore, they might not be able to remember all compounds' results and the features, they needed a note function for taking some notes on the compounds and leaving some messages to their colleagues.

​

So I designed a compound note, task laboratory book and project laboratory book so that scientists could take a note on a single compound, a task or a project. If they would like to share the notes with their colleagues, they could just add their colleagues' email accounts to share the project and the notes.

compound note1.png

Optimized feature 4

Hiding function for hiding the compound structure:

Due to the SaaS platform, scientists might be worried about the data breach problems of the potential compound. Moreover, they would like to not only hide the compound structure but submit the compounds to view the calculating results.

​

So, I considered how to hide the compound structure before and after the calculation and if the structure has been removed, how to know what the compound is.

​

Therefore, I designed the function for scientists to hide the compound structure and, meanwhile, name it with a unique code so that they could find the compound with the code.

Hiding structure.png
process_05
bottom of page