Science Helper

UX, UI, Animation
Experiential, Illustration
Experiential, Illustration

Making high school chemistry lessons simple, fun, and easy to practice

hero_v1

⁠— 2016

Traditional text-based methods of education fail many science students. Science Helper is a gamified and interactive educational app that allows users to explore a broad range of scientific topics. Through 3D manipulation and gamified lessons, students are given an enhanced learning experience that allows them to visually and spatially grasp difficult science topics.

screen_1_v1
comps-2_v2
Core feature
Experiential, Illustration
Experiential, Illustration

Rotate 3D atoms

Users can manipulate and rotate atoms in 360 degrees, allowing them a better spatial understanding of the orbital levels, orbital shapes, and electron movements.

3D_v1
electron_v1
Core feature
Experiential, Illustration
Experiential, Illustration

Electron mini-game

To build atoms, users must bounce electrons into the appropriate orbitals. The repetition of this action reinforces knowledge learned and the added element of skill creates a more engaging learning exercise.

comps-3_v2
comps-4_v2
comps-5_v2
Research
Experiential, Illustration
Experiential, Illustration

Enhancing the learning experience

I began the research process by looking at other science education app currently available. The majority appeared to be minimally interactive, 2-dimensional, and primarily information. Those that were making use of 3D objects were of poor graphic quality. I turned researching popular and successful app trends that I felt could improve on the weaknesses of the current science education app options.

3d-interaction_v1

3D interaction

Improve student understanding of spatial relationships and movement

gamification_v1

Gamification

Motivate users to complete lessons and enhances learning with play

progressive-disclosure_v1

Progressive disclosure

Solves the problem of prerequesite knowledge

Information architecture

work-flow_v4

User flow

use-case_v4
Sketches
Experiential, Illustration
Experiential, Illustration

Sketching interaction models

To facilitate retention of information, I wanted to create very physical interactions for the user. I initially began with the idea of having the user drag each electron into the orbital one by one, however, I realized that this would quickly become a tedious and frustrating barrier. I instead came to a solution where the user selects an electron and bounces it into the correct orbital. By requiring a small level of skill, I was able to make the interaction more competitive, playful, and engaging.

Mood board
Experiential, Illustration
Experiential, Illustration

Immersive & futuristic

To highlight the 3D objects and emphasize space and dimension, I chose dark gradient backgrounds with depth.  I also selected bright accent colors in high contrast of the dark backgrounds in order to convey a spacey, futuristic aesthetic.

mood_wide_v1
Wireframes
Experiential, Illustration
Experiential, Illustration

Guiding the user step-by-step

The steps of each lesson are displayed linearly and sequentially, allowing me to dictate clear learning objectives and ensure that users come away with these specific desired outcomes. This gave me more control over the user's education while also preventing the user from being overwhelmed with information.

big-image_v1
ipad-mockup_v1

More projects

iconmonstr-instagram-11-32
iconmonstr-linkedin-3-32
iconmonstr-vimeo-1-32

kelly.a.hurlburt@gmail.com

© Copyright 2019