ssparrow-header.png
 

Smart Sparrow is a small company focused on educational software.

I had landed a contract specifically to help them build a new version of their online chemistry labs, to be used by Arizona State and Oregon State Universities for the online portion of their curriculum. The respective universities' online chem labs had a whaft of last-gen graphics and implementation, wasn't intuitive enough to just start working without getting through the overly verbose instructions and were built in Microsoft Silverlight. Most other products on the market were so outdated that there were many opportunities for simplification in the name of intuitive interaction.

A 2018 product like that needed to be done from the ground up with mobile-touch interfaces in mind; the goal was to have it run well on tablets as well as desktop computers - phone optimization was out of scope.

 
 Final design with multiple rows with varying zoom to maximize workspace without breaking perspective.

Final design with multiple rows with varying zoom to maximize workspace without breaking perspective.

 

It was important to defy the interaction and visual style early on. I've researched many accessible online chemistry labs to see what's out there and how we can step it up from there.  After a few different try-outs, it was decided that a style between illustrative and realistic would make the experience look polished and there'd be the fewest opportunities for the students to misunderstand, as they will be expected to follow up with their digital experiences in an actual lab with real equipment. They had to know what to look for, so most things had to be very accurate.

 1993's Sam & Max: Hit the Road

1993's Sam & Max: Hit the Road

As far as interaction, I alluded to the simplest, most intuitive interaction models that are accessible to the widest general audience.

The closest analog I could draw to interacting between different objects were 90's Lucasfilm games, where users would pick objects out of their inventory and combine them as necessary to move the plot of the game along. This interaction model was not unlike that employed in modern touch interfaces.

 
 Tools in final scale. Click on image to view Tool Breakdown PDF.

Tools in final scale. Click on image to view Tool Breakdown PDF.

Initially it was important to test out the interaction before delving deep into everything else. There were about fifty tools that had yet to be built in various forms and complexities. The workspace had to be modular and remind the user of an actual lab, with as many as twenty or more tools that pertained to a single lab, to be displayed side-by-side. This also necessitated a positioning grid system the user could easily navigate. All this had to come together as an interactive prototype as quickly as possible to define the functions.

 
028-Titration-FunnelHL.png

 

The early prototype had the tile system visible and focused on the experience in broad strokes rather than trying to specify the minute details. What became important was the amount of detail in the tool assets. Initially the main web developer wanted to draw all the tools in SVG, but the team preferred a more realistic visual style, which would've made drawing realistic tools a chug for slower machines and downright impossible to pull off in their desired visual fidelity. From the first asset implementation attempts, it was agreed-upon that we'd start with PNGs and potentially convert to SVG if we deem it worth the extra development time after testing viability more rigorously: the target devices were small student laptops.

 

 
 Despite a clean style, we had to solve the issue of the glassware interacting with the background inconsistently.

Despite a clean style, we had to solve the issue of the glassware interacting with the background inconsistently.

Glassware was tricky by itself as it required a consistent scale (which shifted based on how dense the tools were going to be in each lab) as well as liquid levels observable to a similar level of accuracy to a real-life lab. Another problem was the glassware standing out against the background which had to remind users of an environment like they might see at their schools.

 

The amount of detail necessary to the tools made it unviable to simply adhere to using Sketch, as it is unsuited for such detailed graphics, not to mention the inability of the software to export color-accurate assets.

 

Apart from glassware, each tool had unique functions, required polished css animations and had to mesh perfectly with everything else. Fortunately most of the functions were unique to several labs, so I quickly shifted from generalized interactive prototypes to 

specific labs.

 

Below is a small selection of interactive prototypes that dealt with specific tools or interactions:

Interactive Prototypes

 
 

CSS Animation Codepens

 
 

Cells on Oculus Rift

controllers.jpg

Another interesting project lasting a mere couple of weeks was a Oculus Rift powered experience that allowed users to travel inside cells and identify all the different parts with the aid of the controllers. I was tasked with coming up with the menu UI as well as with designing the in-game controllers.

questscreen.jpg
 

Conclusion

The Smart Sparrow Online Chem Labs were completed in late December.

The sense of accomplishment from work that transcends commercialism was far more fulfilling than my previous engagements. Knowing that students may have a better chance at accessing information, even understanding things they'd have had a much harder time understanding adds up to time well spent.