Skip to main content

B2B Ed-Tech SaaS Product

Designed an end-to-end virtual lab for instructors struggling to teach experiments due to inefficient tools.

Year, 2019 world was hit hard by Covid. Altering the landscape of education. A pressing demand for virtual labs that could provide future doctors, nurses, and other healthcare professionals with the full range of knowledge and practical skills they need to succeed.

The Projects High Level Context

Create a software that effectively enables instructors to teach medical grad students the intricacies of practical medical concepts.

  • My Role

    Somehow, design a software from a Biology Lab Manuscript.

    UI and UX Design, Interaction Design, Design Systems

  • Team Structure

    Design Team: Rahul (me)
    Dr. Lang (Professor), Chaitnya (Bio Expert), Prajin (FE Dev), Ventak (BE Dev), Mohan (QA)

  • Project Timeline

    Sep, 2020 - Nov, 2021

Industry Wide Challenge : Students and instructors often struggle with complex software, which distracts them from the main objective: learning practical concepts.

How might we create a biology software that prioritizes concept learning over software complexity?

I kicked off this project by first understanding what an experiment is? I was given a list of 20 pdf manuscripts for this project, each detailing how an experiment is done in the actual physical labs.

So I started collaborating with two of my team members Dr. Lang and Chaitanya. Both of them are subject matter experts.

Primary users are Students and Professors.

I did two important things before designing anything.

1. Find similar products, do a benchmark, make a list of improvements that can be adopted to my product.

2. Find Information Patterns in the experiment manuscripts, and create an IA that can support the development of the product.

Part 1: Benchmarking Existing Market Products

Labster, BioDigital Human, PhET Interactive Simulations, McGraw-Hill Connect, Pearson Mastering Biology, Carolina Biological Supply Company, Edmentum, ExploreLearning Gizmos, Hands-On Labs, Smart Science Education Inc.

Image description
  • The Good

    • All of these experiments are information rich.
    • These include core concepts
    • Peer Reviewed.
  • The Bad

    • Each experiment is unique, Hence the Screen and Layout Keeps changing
    • Lack of guidance, assumes instructor supervision for experiments.
    • No Assesment can be done at all
  • The Ugly

    • No Accessibility
    • Uses Flash or old image based approach
    • Loading times and error management are lacking.

Part 2: Finding Important, Reusable Information Patterns within the manuscript

After reviewing 10+ experiments we found that almost all the experiment share the same flow. Procedure is the only step which differs from experiment to experiment.

Image description
How these experiments are performed in the Real World?
  • Step 1

    Introduction:

    This stage is about getting a basic understanding of concepts

  • Step 2

    Preparartion - Material, or Equipent:

    Students are required to setup the prequisites to perform the procedre.

  • Step 3

    Procedure:

    Students follow process to Perform the experiment in this stage.

  • Step 4

    Results and Observation:

    Students submits their findings and observations to the faculty.

Content Type: All the steps can include multiple pages, may include images, videos, tables, rich formated text.

Image description

A Generic Student Flow can be created, that's the goal.

Note: It was noticed that not all the experimets will have All four steps.

How might we ensure consistent UI and common interactions throughout the product, rendering it seamlessly integrated and virtually invisible to the user?

Experiments can't be made consitent, because they are unique - Hmmmm...

I remined myself, that I am not trying to make the experiemnt consistent, but the tool we use to conduct it. Hence there is a slight possibility.

  • Unified layout framework.
  • Standardize navigation.
  • Uniform progress tracking.
  • Consistent interaction with materials.
  • Uniform feedback mechanism.
  • Guidelines for content presentation.
  • Standardized error handling.

Standard layout Options

While designing, looking at the content, I grdually was able to reduce the screen variants. I arrived at 4 options.

Simplifing screen variations for quicker tool mastery. This reduces the congntive load.

procees

Layout 1. Wide layout

procees

Layout 2. Drawer layout

procees

Layout 3. Sidebar layout

procees

Layout 4. Modals

Designing Screen Parts

Fixed Topbar

My focus was on taking advantage of the top bar to show all the necessary information to the user in seconds.

What is the most important information for a student?

procees

Designing Screen Parts

Fixed Bottom Navigation Bar

The Navigation is the most important part of all to achive consistent interaction. It was also the most challenging to design.

The navigation should be intuitive, it should always tell the user how much progress they have made, they should be able to go back and forth. It should also clearly inform user if a step if Optional. There should only be one Primary Action Button.

Hence the bottom bar displays the current step name, sub-steps, and a context-aware action button.

procees

Designing Screen Parts

Simplifying access to find Materials, Apparatus, Tasks, and Answers.

Implementing a drawer or shelf-type feature to conveniently store materials, apparatus, tasks, and answers for each experiment enhances findability and usability.

procees

Designing Screen Parts

Experiment Canvas

This is the area where the student will spend most of their time, so it has to be as simple and informative as possible. The main area displays reading materials, videos, and instructions. Students can perform the procedure in this part of the layout.

procees

Oops! I made a mistake

What happens if a student makes a mistake?

Mistakes are an important part of learning. Some mistakes can be fixed, while for others, one has to start over.

There are two types of mistakes: reversible and irreversible.

Reversible Mistake:

If a student forgets to add a required solution into the test tube or adds less than the required amount, it can still be fixed. Hence, we only warn the student.

Irreversible Mistake:

If a student adds the wrong solution or exceeds the required amount, it cannot be fixed. In such cases, the student must start over.

More details hidden

For More Indepth Review of this case study, let us connect on a Google Meet

You can find my contact details at bottom of the page.

Image description

If you are from planet Earth,

I am Reachable