Designing Isomers

September 8, 2017
Company & Technology

The overall design of Isomers needed to feel like a learning tool rather than a commercial game. Compare, for example, the design of Connections against the design of Isomers. Both operate on the same underlying game mechanisms, but have very different designs because of their intended purposes. Connections is meant to be a puzzle game, so it hides the underlying chemistry concepts. The design is inspired by outer space, with twinkling stars and atmospheric backgrounds. There’s a story here: as you play and solve each puzzle, you help your character find their way home.

The exercises in Isomers operate similarly to the puzzles in Connections - but here, the design looks and feels different. Isomers is a straightforward learning tool for students to practice the isomers of saturated hydrocarbons. Instead of connecting stars, we’ve stripped away the glitz and sparkle but left the substance: connecting carbons to form isomers.  Since it’s a learning tool, Isomers has a clean, basic design that emphasizes readability and easy viewing. We don’t want anything to distract the student from being able to learn and experience the creation of Isomer structures.

Screenshot of Connections (Left) & Isomers (Right) gameplay.

The Juice

Alchemie uses plenty of blue and green hues in our designs - this is our company’s comfort zone. I wanted to take a step away from these colors and try something new with the Isomer logo, while creating a consistent feel with the rest of our product suite. I did of research to back up my changes and better inform my use of color. I already knew that a warm color scheme would be a good choice: warm colors are used when you want to create an energetic and positive atmosphere. Our current app icon colors follow a cool color scheme, and the use of a new, warm color would help invigorate our icons.

Orange is a color that you can see commonly in Education apps because it is associated with vigor and liveliness. Alchemie had not yet used this color anywhere in its branding. Not only would the use of orange make the app feel lively, but it also complemented our current Icon colors: Deep Purple, Light Blue, Blueish Green, and Dark Blue. I also added the gradient to icon color to help with weight or balance issues.

The Color is only half of the icon. I had the image in mind before I started - it needed to be an Isomer structure and luckily many of these shapes are very appealing. I tested quite a few including pentane, hexane, methylpentane, and a few others, but none of these felt quite right. We decided on the isomer structure for C8, or octane, in one of its various forms. This design is eye-catching and has a balanced weight without being completely symmetrical. Initially, I had the lines much thinner, but eventually fattened them up for a bolder look. In order to create a more friendly-feeling app, rounding out sharp edges can be beneficial. We don't want Isomers to intimidate; it should be a welcoming and warm tool for students and teachers to use. Once we started to make assets within the game round and chubbier we decided to update the logo based as well.

Isomers early design doc research and concepts.

Isomer themes

We decided that Isomers should have varying color schemes. The initial idea was to have the original Isomers, a Color blind friendly style and also a Teacher friendly theme, but in the end we decided to add a couple more theme options for some user customization. The user can also choose a high contrast theme or the Alchemie theme which features some of our more common colors.

With Isomers, we set out to create a learning tool to meet the needs of students learning isomers. From a design perspective, this meant striking a balance among clean, functional, visually appealing, and lively elements - from our bold orange color scheme to our satisfyingly balanced icon logo.

Early color theme concepts for Isomers.

Download links for Isomers (iOS and Android) are here. 

Related Posts