SUBSTRATE CASE STUDY 

CASE STUDY 

Phase II: Level-Up Your Chemistry

Better Learning Through Chemistry

Mol, the Organic Chemistry prototype I redesigned and helped develop over the course of several months with a team from Iowa State, went on to receive a Phase II grant award from the NIH. The project spun from a small prototype into a full-blown company with plans for commercialization. I joined the newly formed Substrate as Head of Design in August of 2019.

With Substrate, our product goals remained similar to those we had with Mol, but this time, we wanted to go bigger - Starting with Organic Chemistry and scaling to additional courses as more funds became available to us. The Substrate vision: We wanted to be the leader in interactive simulation of natural phenomena that enables diverse experiences across gaming, learning, and other contexts. 

You can find more background on how Substrate came to be and how we identified a need for our product in the Mol Chemistry case study.

Below: Early molecular visualization style exploration for Substrate (done in Figma)

blank

Design Goals

We had the opportunity to recruit Texas A&M University (TAMU) to partner with us in the development of the Substrate app. Initial user interviews were done over the course of a week in College Station, Texas, with organic chemistry students and instructors from TAMU providing key insights to help us better understand how to design and deliver the best educational experience.

We interviewed 7 students enrolled in Organic Chemistry I courses at TAMU. We also spent a day getting to know and interviewing instructors in the Department of Chemistry.  With the aim to commercialize, I developed higher level design goals based on user needs from Mol and our TAMU user interview feedback that would be critical for our success in developing a product relevant to our primary audience. Our primary audience consisted of any student enrolled in a college-level Organic Chemistry I course. We identified a secondary audience in college-level Organic Chemistry educators. 

 

Below: Images from the Molecular visualization A/B test survey given to TAMU students and professors. Click the left or right arrows or hover over the image and click the left or right arrow keys on your keyboard to see the images.

Understanding
users

Our target users are college students enrolled in Organic Chemistry I courses, putting them primarily between the ages of 17-21. Most are on track to develop careers in science, medicine, or education. Reviewing information from user interviews, we developed a list of user needs and their corresponding goals.


User need
– intuitive exercises that maximize learning potential and correspond to course material
– ability to use anywhere

Goal: design a mobile app for iOS and Android with a total of 5 exercises, focusing on molecular interaction (source: PubChem database), covering fundamental organic chemistry concepts that reinforce understanding and are tailored to different learning styles

User need
– interaction with molecules three-dimensionally and ability to switch between 3D/2D visualization
– requisite information to help solve problems (atom ID key, definitions, etc)

Goal: create simple, intuitive, and engaging UI that makes use of interaction design to convey meaning; should enable switching between different visualization modes and include all relevant information to solve problems within each exercise

User need
– ability to sync content with course dashboard

Goal: develop a dashboard that displays user progress for each exercise, with functionality to connect to social media or course software

User need
– content that retains user interest and encourages exploration; integrated tutorials

Goal: create intuitive tutorials that help you learn as you play; include sandbox component where users can search for molecules and explore their structures/ properties; create a list of achievements users can unlock as they advance

The results of our research helped us finalize some stylistic decisions in our molecular UI library. We also were able to validate many of our assumptions with product strategy. Here are the top design goals we developed, along with the user insights that informed them.

Design Goal: 
-elevate educational content and stimulate different styles of play and exploration through the use of a gamification system (à la Duolingo) and a clean user interface to differentiate from existing products

User insight
– most of our target audience were relatively tech savvy and between the ages of 18-22
– the top-valued features they identified in a chemistry app were effectiveness, reliability, and engagement 


Design Goal: 
-craft a design system with clear wrong answer feedback and easy visualization of 2D and 3D molecules, never overloading the user with too much information at once

User insight
– the primary pain point we identified with the existing apps that students were using (OWLv2, Cengage, YouTube, Khan Academy, ALEKS) was a lack of clear feedback on their answer submissions, or no feedback/quiz system at all, and a clunky user interface
– gen Z has a shorter attention span than other age groups (somewhere between 8-12 seconds) 


Design Goal: 
-develop a fun, clever brand to resonate with our primary audience while still remaining professional and relatable to professors

User insight
– most students we interviewed were using apps such as Instagram, SnapChat, and Reddit regularly
– professors' top priority is accuracy of chemistry content and product efficacy


Understanding
users

Our target users are college students enrolled in Organic Chemistry I courses, putting them primarily between the ages of 17-21. Most are on track to develop careers in science, medicine, or education. Reviewing information from user interviews, we developed a list of user needs and their corresponding goals.


User need
– intuitive exercises that maximize learning potential and correspond to course material
– ability to use anywhere

Goal: design a mobile app for iOS and Android with a total of 5 exercises, focusing on molecular interaction (source: PubChem database), covering fundamental organic chemistry concepts that reinforce understanding and are tailored to different learning styles

User need
– interaction with molecules three-dimensionally and ability to switch between 3D/2D visualization
– requisite information to help solve problems (atom ID key, definitions, etc)

Goal: create simple, intuitive, and engaging UI that makes use of interaction design to convey meaning; should enable switching between different visualization modes and include all relevant information to solve problems within each exercise

User need
– ability to sync content with course dashboard

Goal: develop a dashboard that displays user progress for each exercise, with functionality to connect to social media or course software

User need
– content that retains user interest and encourages exploration; integrated tutorials

Goal: create intuitive tutorials that help you learn as you play; include sandbox component where users can search for molecules and explore their structures/ properties; create a list of achievements users can unlock as they advance

 "We wanted to be the leader in interactive simulation of natural phenomena that enables diverse experiences across gaming, learning, and other contexts."

 

blank
blank
blank

Designing a
Chemistry Visualization System

Some of the most rewarding feedback we received with Mol was that the molecular visualization was beautiful and easy to interact with. I wanted to maintain that momentum, but take it a step further, with Substrate.

With Mol, we were able to utilize the PubChem database to import chemistry data and apply a style to it. Because of potential technical issues in scaling our user base, our engineering team advised us to use a different approach with Substrate. We decided on an approach that would use mol files, the file format that ChemDraw uses to display its chemical structures, and a script in Unity to apply our own style to the structure data being imported.

Using the generative user research data from our trip to Texas A&M as well as design intuition, I created a set of structures and coalesced it into the signature molecular style of Substrate.

Instead of using the CPK color system, I decided to create one from scratch. Another priority was to design for accessibility, allowing color blind or visually impaired users to feel comfortable using Substrate, as well. These color palettes were tested using Coblis, an online colorblind simulator.

Using ChemDraw and Marvin Sketch basic structure representations as a template, I created a 2D Style Guide and UI Kit using prefabs in Unity. 


Below: A section from the 2D Molecular Visualization Style Guide.

Design & Development

NanoString has on-site laboratories where I was able to observe users of the nCounter systems.

I spoke with lab researchers and engineers to better understand their workflows and how they interacted with the instruments.


Key takeaways:

  • most users were between the ages of 26-44;
    wanted to spend less time on the machine

  • changing reagents & opening the cartridge drawer
    were most common tasks

  • lab researchers always wore gloves when interacting with the instrument

  • need clear and easy way to download their data files

 

StyleGuideTop
StyleGuide_Center
StyleGuide_Bottom



The prefab system was created using a North-South-East-West labelling schema, and was designed to be a placeholder to aid in manually creating and displaying structures until our importer was fully developed. After we developed our baseline 2D chemistry visualization system, it was easy to apply the styles to the importer's automated system. 


Below: 1) A screenshot of development in Unity; Early atom and bond prefab hierarchy/structure. The atom and bond prefabs were the smallest units, and compounding them created larger chemical structures (imagine a lot of clicking). We stayed with this process briefly until the importer was created. I narrowly averted Carpal Tunnel Syndrome. 2) A screenshot of the importer that automated the process and applied the style from the style guide to the mol files (we were very proud and relieved when our engineering team successfully implemented it). 

Unity_NSEWprefabAtoms
ChemImporter



Our 3D visualization needed to complement and remain cohesive enough visually with our 2D system that it was easy to make a connection between the 2D and 3D representation of a given structure. I created a 3D structure in Cinema4D as a style guide for one of our artists, who also worked with us on Mol, to use to create a shader system in Unity. 

Once the shader system was in place, our engineering team was able to create a 3D importer script that could be toggled on or off so users could switch between 2D and 3D views - directly in the exercise. 

We also created a series of 3D molecular orbitals as part of a lesson module on Hybridization, a somewhat difficult topic to visualize in Organic Chemistry. These were similarly first created in Cinema4D and then brought into Unity.


Below: 1) 3D visualization guide for Unity shader creation 2) Screenshot of an early prototype of working 3D visualization in Unity. (thank you, engineering)

3Dcompounds_diffuse
3Dimporter





The combination of Figma + Unity was a great pipeline for designing and implementing a solid chemistry visualization style to set a strong foundation for our next big feat - Educational content development and exercise design.



blank

Designing Educational Content

Some of the most rewarding feedback we received with Mol was that the molecular visualization was beautiful and easy to interact with. I wanted to maintain that momentum, but take it a step further, with Substrate.

With Mol, we were able to utilize the PubChem database to import chemistry data and apply a style to it. Because of potential technical issues in scaling our user base, our engineering team advised us to use a different approach with Substrate. We decided on an approach that would use mol files, the file format that ChemDraw uses to display its chemical structures, and a script in Unity to apply our own style to the structure data being imported.

Using the generative user research data from our trip to Texas A&M as well as design intuition, I created a set of structures and coalesced it into the signature molecular style of Substrate.

Instead of using the CPK color system, I decided to create one from scratch. Another priority was to design for accessibility, allowing color blind or visually impaired users to feel comfortable using Substrate, as well. These color palettes were tested using Coblis, an online colorblind simulator.

Using ChemDraw and Marvin Sketch basic structure representations as a template, I created a 2D Style Guide and UI Kit using prefabs in Unity. 


Below: A section from the 2D Molecular Visualization Style Guide.

Design & Development

NanoString has on-site laboratories where I was able to observe users of the nCounter systems.

I spoke with lab researchers and engineers to better understand their workflows and how they interacted with the instruments.


Key takeaways:

  • most users were between the ages of 26-44;
    wanted to spend less time on the machine

  • changing reagents & opening the cartridge drawer
    were most common tasks

  • lab researchers always wore gloves when interacting with the instrument

  • need clear and easy way to download their data files

 

Default image

Designing Educational Content

Knowing that a goal of ours was to create a minimalistic yet effective means to deliver the educational content, I took what was already designed during Mol and made it even simpler. For our minimum viable product, based on strong feedback from professors, we were aiming to create at least one learning exercise for each of the following topics, or chapters, that are currently covered in college O Chem curriculae: 

  • Lewis Structures
  • Hybridization
  • Acid/Base Equilibrium
  • Resonance (Arrow pushing)
  • Alkanes
  • Cycloalkanes
  • Stereochemistry
  • Drawing


The way we approached the educational content as a team was to have our Organic Chemist create problem sets, get TAMU professors to review and sign off on them, and from there I would design the user experience, interface, and flow of each set of problems to constitute what we referred to simply as an "exercise." To remain lean while appealing to professors and students, we decided to develop one exercise per chapter in the list above.

After some trial and error with our first exercise, Lewis Structures, we discussed the best way to move forward in designing each exercise by templatizing our monthly release schedule. Analyzing the trends in problems we encountered after development two exercises, we were able to iterate and hone our process.. One of the insights we came across was that prioritizing content testing before UX testing did not do us any favors. We switched to a leaner process by first creating and finessing the whole experience for just one problem per exercise ahead of putting in all of the questions and then trying to wrangle the user experience after the fact. We increased our development output by roughly 40% in doing so. 

During the latter half of our development cycle, we eventually realized that planning too far in advance while we were nascently problem solving and iterating our approach to everything we did was not to our benefit as a lean startup. We met every two weeks to plan two weeks in advance, and outside of that, we kept our schedule fairly fluid.


Below: Monthly release design schedule

Design & Development

NanoString has on-site laboratories where I was able to observe users of the nCounter systems.

I spoke with lab researchers and engineers to better understand their workflows and how they interacted with the instruments.


Key takeaways:

  • most users were between the ages of 26-44;
    wanted to spend less time on the machine

  • changing reagents & opening the cartridge drawer
    were most common tasks

  • lab researchers always wore gloves when interacting with the instrument

  • need clear and easy way to download their data files

 

Screen Shot 2020-08-31 at 12.08.55 PM


Myself, our chemist, and occasionally our CEO used Miro to conduct whiteboarding sessions together and elevate our problem-solving skills. 

Below: Whiteboarding sessions for Drawing and Stereochemistry (the 2nd one was grokable.. to us)

Whiteboard_Drawing
Whiteboard_Stereochem


From there, I did pencil sketches of key frames in flows. Depending on the exercise and the potential to develop it in different ways, I might have created 2-3 concepts that were functionally unique.  

Below: Sketch for one potential In-App Purchase flow. We ended up doing something slightly different.

InAppPurchase_sketch


After a team review where we aired out our ideas and settled on a direction, I developed first-pass prototypes using Figma.
 

Below: A screen recording of the Figma prototype used in our Drawing tool UXR sessions

Gamification – Achievements

We kept it simple with progress bars, achievements, and a plan to implement leaderboards further in development. Partnering with a game designer, we created an achievements-based rewards system to help incentivize players with differing abilities in Organic Chemistry.

If a player didn't have a strong knowledge of O Chem but was motivated to spend more time playing, they could get achievements for finishing all of the problems in a given section. 

Some players would no doubt have an easier time with the chemistry content, so we designed achievements to reward them on speed and consecutive right answers. Below are the achievements and instructions in how to achieve them.

Design & Development

NanoString has on-site laboratories where I was able to observe users of the nCounter systems.

I spoke with lab researchers and engineers to better understand their workflows and how they interacted with the instruments.


Key takeaways:

  • most users were between the ages of 26-44;
    wanted to spend less time on the machine

  • changing reagents & opening the cartridge drawer
    were most common tasks

  • lab researchers always wore gloves when interacting with the instrument

  • need clear and easy way to download their data files

 

Screen Shot 2022-03-02 at 12.39.44 PM

Below are screen recordings of the way the achievements screen in the Dashboard function and how an achievement looks upon getting it within the gameplay experience. Also shown is the viewport within Figma as the achievements were implemented.

Design & Development

NanoString has on-site laboratories where I was able to observe users of the nCounter systems.

I spoke with lab researchers and engineers to better understand their workflows and how they interacted with the instruments.


Key takeaways:

  • most users were between the ages of 26-44;
    wanted to spend less time on the machine

  • changing reagents & opening the cartridge drawer
    were most common tasks

  • lab researchers always wore gloves when interacting with the instrument

  • need clear and easy way to download their data files

 

AchievementsDescriptions_Figma
AchievementGet_Figma
Screen Shot 2022-03-02 at 12.47.53 PM

Final Product Demo

I'm really proud of how the design of Substrate came together. We hit most of our design goals, and we launched a product that could be scaled into something even more impactful than what we created. There's still a lot of potential with the IP, and we were able to create an instructionally designed set of deliverables for handing it off. Check this video to see Substrate in action:

Design & Development

NanoString has on-site laboratories where I was able to observe users of the nCounter systems.

I spoke with lab researchers and engineers to better understand their workflows and how they interacted with the instruments.


Key takeaways:

  • most users were between the ages of 26-44;
    wanted to spend less time on the machine

  • changing reagents & opening the cartridge drawer
    were most common tasks

  • lab researchers always wore gloves when interacting with the instrument

  • need clear and easy way to download their data files

 

Efficacy

So, exactly how well does Substrate work? Addressing how Substrate actually impacted student engagement and their ability to understand the material is still an ongoing process. Our team published a paper on the topic of Hybridization, titled Hybridization Gamified: A Mobile App for Learning About Hybridization. An excerpt from the peer-reviewed paper: 

Design & Development

NanoString has on-site laboratories where I was able to observe users of the nCounter systems.

I spoke with lab researchers and engineers to better understand their workflows and how they interacted with the instruments.


Key takeaways:

  • most users were between the ages of 26-44;
    wanted to spend less time on the machine

  • changing reagents & opening the cartridge drawer
    were most common tasks

  • lab researchers always wore gloves when interacting with the instrument

  • need clear and easy way to download their data files

 

 "The assessment showed that the Substrate hybridization exercises helped students gain a better understanding of hybridization. Students in the Substrate group not only performed better than the control group on the hybridization post-quiz, but they felt more confident about hybridization after using the app. Also, these students enjoyed the Substrate app enough to likely recommend it to a friend."

 

The results suggest that a well-designed chemistry app can be a useful tool to teach chemistry, especially hybridization.

Design & Development

NanoString has on-site laboratories where I was able to observe users of the nCounter systems.

I spoke with lab researchers and engineers to better understand their workflows and how they interacted with the instruments.


Key takeaways:

  • most users were between the ages of 26-44;
    wanted to spend less time on the machine

  • changing reagents & opening the cartridge drawer
    were most common tasks

  • lab researchers always wore gloves when interacting with the instrument

  • need clear and easy way to download their data files

 

Thanks for reading.

Design & Development

NanoString has on-site laboratories where I was able to observe users of the nCounter systems.

I spoke with lab researchers and engineers to better understand their workflows and how they interacted with the instruments.


Key takeaways:

  • most users were between the ages of 26-44;
    wanted to spend less time on the machine

  • changing reagents & opening the cartridge drawer
    were most common tasks

  • lab researchers always wore gloves when interacting with the instrument

  • need clear and easy way to download their data files

 

Find me on