Mol Chemistry App

Mobile app iphone android UI/UX Design Interaction design Education chemistry Games science educational games

Mol is a mobile app created by Substrate Interactive that helps students learn organic chemistry. My goal for the role of lead designer was to keep the UI minimal so the focus would be on the molecular visualization and the user's interaction with the molecules.

Sketches

When I joined the project, Mol was already in development. I started the redesign (see before images) by creating lots of thumbnail sketches of screens, UI + gameplay elements, several variations of the more important screens, and the updated logo, icons, molecular visualization, etc. Our plan was to design a new version complete with 4-5 exercises within 3 months.

Wireframes

The next step was developing a rough prototype using Sketch.

Rebrand

Alongside the architectural overhaul, we needed a brand refresh to modernize the look. I utilized Google's Material Design resource to help with primary and secondary color selection. I wanted the colors to be clean, yet fun and funky with an air of future science.

...maybe also a little bit 80's.
(⌐■_■)

Many of the "before" components I redesigned, but I thought the logo had potential. I ended up using the original font, with the exception of changing the "L" in Mol to a custom uppercase letter.

The "O" of Mol represents an oxygen atom with 2 valence electrons.

Fonts: Arciform and Soleil

I wanted the icons to capture the essence of a retro nuclear fallout shelter while being more modern, each one clearly communicating the subject of its exercise and subtly increasing in complexity as the exercises became more advanced.

After the look and feel of the new brand was established, the rough prototype was polished into a high-res prototype.

Updated high-res prototype screens in Sketch.

Interactions

Once the prototype had been iterated to our satisfaction, I went to work on interaction design.

Early "Correct" to "Level-up" transition

My process involved copying assets from Sketch into layers in Illustrator, then importing the layers as a composition in After Effects and animating them.