BioLabs

Laureate
The laboratory experience
Virtualized.

Overview:

OneCampus® by Laureate empowers students from around the globe to connect and learn in a virtual environment. After years of shipping chemistry lab kits around the world, Laureate envisioned creating a virtual lab that emulates a real life lab experiment — teaching students the scientific method and boosting user engagement.

Practices:

  • Information Architecture
  • User Experience Design
  • Web & User Experience
  • Web Applications
  • Web Development

The Challenge

Shipping physical lab equipment is costly and inefficient. The challenge for Laureate and Fifteen Four was applying design and user experience to creating an authentic lab experience in an online setting.

The Solution

We focused on designing an experience that would look and behave like a real experiment. This involved understanding the rules of the lab and implementing error handling that would keep students on track.

The Results

We developed an intuitive user experience that keeps track of students’ progress through a series of related BioLabs. Augmented with narration, each lab guides the user while allowing them to make mistakes and recover from those mistakes. The app helps students learn scientific method by making hypotheses, setting controls, and visualizing chemical reactions.

How we did it:
User Experience

It all started in the lab — quite literally. Fifteen Four and Laureate subject matter experts worked together to complete real lab experiments with real components. (Think test tubes, test strips, and heat blocks) from Laureate’s course curriculum.

We learned how each lab works and took that real world information into account as we developed Wireframes and User Journeys, making sure to strike a balance between the idealized digital experience and a realistic lab experience (even with all of the tediousness and sensitivity of a real lab experiment).

How we did it:
Hi-Fidelity

Moving into design, we created two distinct visual approaches: one flat and iconic, the other embracing realism. Although super flat graphics have been all the rage for several years now, realism won. As a collaborative team, we all believed that mirroring the lab experience down to the visual look and feel would benefit the user more, especially since the core users are adult learners and college students from around the world.

How we did it:
React + Redux

Our framework of choice? React.js. Architected by Facebook, React is a natural choice for building user interfaces that need to maintain state and respond to user interactions with seamless updates.

Our secret weapon? Redux.js,  a predictable state container for Javascript apps. By including Redux on top of React, we were able to centralize all of the complex app states into one object from which the entire interface was rendered from the top down. This greatly increased performance and helped keep the final code concise and re-usable.

Outcome

A beautiful, intuitive web app that makes learning about lab procedures and results real for the user and increases efficiency for Laureate OneCampus®.

Share with your friends!

More projects

Need a solution?

Let's Get Started

Contact us