Johnson & Johnson - The Eye

Concept Drawings

Initial concept sketches

Well to begin, you have to know what you're even trying to create. So for me, the first step was obvious. Figure out what each part of this eye looks like. We knew the entire app was going to revolve around this eye, so while we hashed out how we were going to interact with it, I began the process of figuring out what connects to what. Armed with a Netter's Anatomy book, some really great input from one of J&J's top Ophthalmologist I set out to create what ended up being one of ScrollMotions premiere Apps.


Section 1 - The Anatomy

The Anatomy Concept

Section 1 of the app was purely on the anatomy of the eye. What muscle is connect to what tissue, how the layers of your eye flow into each other, and which veins and arteries appear where. The first thing I thought about with the eye, is wanting to give the user the ability to feel like they are "peeling away" layers of the eye. Literally letting them peel away layers would probably be pretty gross, so I chose a swipe instead.

There is a combination of pre rendered and real time 3d imagery here. What we called the "Pretty" version of the eye, was a pre rendered sequence that the user could control so they could rotate the eye on one axis, and have popups that appear based on which part of the eye is facing the user. Tapping on the top right would allow the user to launch the "real time 3d" version of that layer, adding in the ability to pinch and zoom and rotate in any direction they wish, letting the user deep dive into that section of the eye.

Section 2 - Tear Film Interaction

Everyone blinks, right? Do you actually know how a blink works and what goes on? Is it more than just closing an opening your eyes? Technically the answers are yes, maybe, yes.

When you blink, tears are pulled over lens and sclera (the white part of your eye). These tears, which form a tear film of sorts, washes over your eye, lubricating, and removing debris from your eye and depositing it into your tear duct. Originally, this was scoped to show the difference in how your tears react to your eye when it has a contact in it, but was descoped for timing and pricing reasons. You'll see the initial sketches here, where as the user controls the blink, you would see the contact reacting accordingly. Not shown here, was also the ability to rotate the ipad and utilizing the accelerometer to see how a contact stays in your eye. This was later pulled out and put into the Johnson & Johnson TVCI app. 

Tear Film Interaction

Accommodation and Emmetropia

Section 3 - Hyperopia vs Myopia

This section was probably the most difficult to wrap our heads around. As it was explained to us, the concept of Hyperopia vs Myopia, (Nearsightedness vs Farsightedness), and how the physical structure of your eye changes, is something that Optometry students spend 6-8 months on learning. We had 1.

In a nut shell, Hyperopia, or farsightedness, results in a an eye in which the distance from the lens to your retina is shortened, giving people the ability to see far, but difficulty focusing on near objects. A myopic eye is the exact opposite. Elongated eye that sees near. In order to adjust for these faults your eye accommodates, and adjusts the focal power. In order to illustrate these, we broke this into two sections, one that shows how your eye accommodates when you objects are moved closer or further from your eye, (releasing and increasing tension in the ciliary body, thus changing the curvature in your lens). The other shows the physical change in your eye if you are Myopic or Hyperopic.

View the completed app

Jump over to the work section, or click on the image to view the results of this project.

View Completed Project

View Completed Project