Smart Sparrow is a small company focused on educational
software.
I was brought onboard to help 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 looked dated and
had a limited, somewhat unintuitive implementation,
built on Microsoft Silverlight.
The solution was a web-based interface built from ground-up,
in which students were provided with a digital experience
of chemistry labs that allow for sandbox behavior.
Designed for tablets & desktop.
During research, many similar existing experiences
still bore the aesthetic of the era they were created
in—in other words, they felt outdated.
I've researched many accessible online
chemistry labs to understand that production of such
tools is a rarity. I felt privileged to be called to
this task.
After exploring various approaches, we determined
that a balance between illustrative and realistic
styles would create a polished experience while
minimizing potential misunderstandings.
Since students would later apply their digital
learning in a real lab setting, visual accuracy was
crucial—ensuring they recognized exactly what to
expect when working with actual equipment.
For the interaction model, I drew inspiration from the
most intuitive experiences of my childhood—those designed
for the widest possible audience. The closest analogy
was the interaction mechanics of 90s Lucasfilm games,
where users selected objects from their inventory and
combined them to solve puzzles. This approach translated
seamlessly to touch interfaces, making complex actions
feel natural and engaging.
I’ve always echoed the mantra
"Ship early, Iterate often,"
a philosophy rooted in the very Lucasfilm games studio
that inspired me for this project.
With nearly fifty tools still to be built—ranging in
complexity—the workspace had to be modular, evoking
the feel of a real lab where up to twenty tools might
need to be displayed side by side for a single
experiment. This required a flexible positioning grid
system that allowed for intuitive navigation.
Prototyping was essential to defining these
functions early, ensuring an interactive framework
that could evolve through iteration.
The early prototype prioritized broad interaction models
over fine details, keeping the tile system visible to
establish foundational mechanics before refining the
visuals.
One of the first major considerations was the level of
detail required for tool assets. While we initially
aimed for SVG-based illustrations due to their
scalability and efficiency, the team preferred a more
realistic visual style. SVGs excel at clean lines and
logos but struggle with high-detail, shaded graphics.
Pushing their capabilities risked performance issues,
particularly on lower-spec student laptops.
Early implementation tests confirmed this concern,
leading us to start with PNGs. We left the door open
for an SVG transition down the line but only if
further testing proved it viable without compromising
performance.
Designing glassware presented unique challenges, as it
required maintaining a consistent scale—one that shifted
depending on the density of tools in each lab—while
ensuring liquid levels were as accurately observable
as they would be in a real-life setting.
Another consideration was visibility: the glassware
needed to stand out against the background while still
resembling the familiar school lab environments
students were used to.
The level of detail required for the tools made
Sketch an unviable option. Its limitations in handling
highly detailed graphics, along with its inability
to export color-accurate assets, necessitated a shift
to more specialized tools.
Beyond glassware, each tool had distinct functionality,
required polished CSS animations, and had to
integrate seamlessly into the broader system.
Fortunately, many of these functions overlapped
across multiple labs, allowing me to pivot from
generalized interactive prototypes to lab-specific
implementations, refining usability and accuracy with
each iteration.
Cells on Oculus Rift
One particularly exciting project, though brief, was an
Oculus Rift-powered experience that let users navigate
inside a cell, identifying its various parts using
motion controllers. In just a few weeks, we built an
immersive, educational tool that blended cutting-edge
VR with interactive learning.
My role focused on designing the menu UI and crafting
the in-game controllers to ensure an intuitive and
seamless experience. Somewhere out there, there’s a photo
of Mark Zuckerberg showcasing it on stage—unfortunately,
I lost my copy. Still, it’s a fun reminder of the impact
and visibility of the project.
In Conclusion...
The Smart Sparrow Online Chem Labs were completed in late December.
The fulfillment I gained from work that went beyond pure commercialism was far more rewarding than my previous roles. Knowing that my efforts helped students access information more easily—even grasp concepts that might have otherwise been challenging—made every moment feel like time well spent.