Cellscope is a startup that makes otoscope home kits that attach directly to your iPhone camera. This allows parents to send videos to their doctor to get their children's ear infections more quickly diagnosed.
I met and collaborated with Cellscope's lead UX designer, and I got to hear about common use cases and user scenarios surrounding the product. When we discussed the approach to creating a look and feel for the new app she repeatedly iterated that when your child is feeling unwell and you are trying to examine their ear with an otoscope, it is an inherently stressful situation. The design should reflect simplicity, soothing, and calm. This was one of the first explorations.
This is the second exploration, which I implemented the use of more candy like and kid-friendly colors. We imagined a scenario where the child might be scared of the phone and otoscope, and if the adult could show them a child friendly app, it might put the child at ease.
This was the third, slightly more experimental version.
After discussing with the UX designer, we agreed that the second exploration appealed to our user's sensibility the most. Previously we were more concerned about creating the right "feeling" rather than sticking to brand, but after more thought we realized that the app still had to feel within the same family, especially since the already established brand would be all over the phone case
This iteration tried to tone down the colors to be more within brand, but we felt that it lost its "pow" factor.
The UX designer also realized along with these initial explorations that she wanted to introduce a 3 step wizard, to show how easy and simple it would be to complete the process.
I spent some time combining the look and feel of exploration 1 with exploration 2, as well as explorations around the wizard. We discussed whether or not we wanted the instructional text to be more visually associated with the wizard or with the names below.
If you don't have a child already entered into the app, you are taken to this screen to enter important data such as name and number of times your child previously had an ear infection. The wireframes given to me were clearly using web UI patterns, so I suggested going with a more traditional ios7 menu pattern, making use of the native keyboards, date pickers, and action sheets.
Once you select a child to exam from the previous screen, you are taken to step 2, where you are asked to select which ear you plan on examining.
There was confusion on how to best present these options, especially when in a stressful situation it could be easy to get mixed up between which is the child's left or right ear (when, as you are facing them, your left is their right, and vice versa).
I suggested that instead of using a straight on image that we show the profile of the child's face, making it easier to match what you were seeing on the screen with what you were seeing in real life. If you swap the toggle, a the image of the child flips to face the other way.
After you've selected an ear to examine, you click through to start recording. We spent the most time iterating on this screen, because we knew that our users would be spending a lot of time here.
First we dealt with different ways to switch ears and how to show the messaging without taking up the camera view's real estate.
I also had to take into consideration about what the screen would look like after you've taken a few videos. We had to answer questions like:
1. How do you view your previous recordings?
2. How do you switch between ears?
3. How do we show how many videos you've taken for each ear?
4. Could we get away with just showing total videos?
In the end, we decided that on first view, we should keep the words "Start recording" and the wizard together and consistent to previous screens. The moment you start recording, the message and wizard disappears.
The toggle stays in the same area as the previous screen, and the button and toggle styles were replaced with more native looking buttons.
We also considered the record button interaction, modeling this after a combination of a rounded rectangle (a stop symbol) with undulating circles to indicate that something was recording at that moment.
We wanted to make sure that at any time during the wizard you could navigate to other parts of the app without being taken too out of the experience.
We knew that while using this app, the user might be stressed to and fumbling a small, squirmy child as well as their phone. We wanted to make the touch points wide and large, so we extended the menu to almost full width.
We designed many more screens, but here are a few of the screens together, to show how I tried to keep the look and feel consistent through out different screens.