design-that-matters-logo-512x312.jpg

Overview: Otter is a newborn conductive warmer designed specifically to allow rural hospitals with limited resources and staff to successfully treat premature and low birthweight newborns who are especially vulnerable to hypothermia. Unlike the incubators and radiant warmers a rural hospital might receive as donations or through a government purchase, the Otter Warmer provides effective newborn warming that is “easy to use right and hard to use wrong”-- in other words the device eliminates the most common sources of product failure. I worked as part of the design and venture team to work on the product and business model.

Keywords: research, user interviews, prototyping, CAD modeling, injection molding, alarm sound design, medical device interface design, business model design, IEC and ISO standards compliance

Timeline: 4 months (August 2018 - December 2018)

Artboard.png
 

Process Overview

 

As per the home task brief, I approached this project with a critical eye, focusing on usability, information hierarchy, consistency, and visual aesthetics (prioritising each in that order). I conducted a few quick Wizard of Oz style user testing sessions to gauge the most important aspects on each screen and identify possible areas of confusion. Then I moved through to the process of methodically analysing each screen and identifying possible weak points. Based off of that information I created rough sketches to iterate off of for the final high fidelity mockups. 

This document will walk you through the entire process as laid out above. Hope you like it!

 

1. User Interviews

Potential users interviewed:

Group 5.png
 
 

2. Key Insights & Analysis

These are rough photos of the notes/scribbles that I wrote down while going through each individual screen.

 

3. Sketching & Iterating

While going through the notes from phase 2 and the individual screens I made some quick sketches of possible ways to address the issues brought up. Sometimes this meant rethinking the layout of the screen, other times it meant focusing on one specific element. This was a bit of a messy process but the idea was to try to get as many iterations/random thoughts down as possible and focus on iterating as opposed to refining.

 

4. High Fidelity Mockups

I attempted to address as many points as I could. I’ve also included the original screens in the following section for more effective comparison.

 

1 1 Entry point – Analytics

 

Focus Areas:

  1. Interactive line graph allows the user to look at their expenditure on a given day. The user can slide the little dot and line to select a specific day on the line graph.

  2. Standardising the way in which percentage expenditure on each category is visually displayed. In Redesign 1, starting the bar graph from the left allows the user to more easily gauge what 100% looks like, making visual more effective. In Redesign 2, the visualisation of the data matches the way it’s displayed around the rest of the app.

  3. Removing the text labels on the bottom nav bar lowers the information density and makes it easier for the user to focus on the rest of the content.

 

1 2 Entry point – Promo

 

Focus Areas:

  1. Changing the icon originally used to the sample notifications allows the user to get a better idea of what they are opting into at a glance. While the original icon does a better job of representing the word “controls” it does not really tell the user what enabling budgeting controls will look like on their end.

  2. Bolding the most important line in the block of text help the user to digest the information.

 

2 Setting up

Group 9.png
 

Focus Areas

  1. Bolding the word “monthly” makes it easier for the user to distinguish between the screens `used for setting the overall monthly budget and the category specific budgets. 

  2. The app is very clean and minimalist overall. The redesigned numbers keyboard allows this screen to maintain the same visual consistency and creates clear information hierarchy. The keyboard is no longer the heaviest element in the redesign as it should be secondary to the number the user is entering in terms of visual weight.

 

3 1 In use – Regular

 

Focus Areas (on top the elements from 1 1 Entry Point - Analytics)

  1. Users consistently ranked the portion of budget remaining as the most important element on this screen. By moving it wards the top, it becomes the most visually dominant asset on the screen, matching the user’s expectations.

  2. Removing the floating box that indicates the overall budget percentage allows for more breathing room on this screen, making it look less overwhelming.

  3. The “Edit” button on the top right corner still allows users to edit their budget and is now located in a position that many iPhone users expect.

 

3 3 In use – Failed

 

Focus Areas (on top the elements from 1 1 Entry Point - Analytics and 3 1 In Use - Regular)

  1. The new treatment of the logo creates more a more dramatic effect notifying the user that he/she has failed to meet the budget. This should do more to nudge the user to be more fiscally responsible for the upcoming month. 

 

2 1 Category – Active

Group 12.png
 

Focus Areas

  1. The background circle of the shopping icon is used to offer a quick visual representation of the percentage spent allowing for the user to gain an intuitive feel for the figure without needing to read the smaller text.

  2. The line graph from previous analytics screens carries over here to allow the user to quick navigate between different days by using the slide. The graph also offers an easily understandable representation of spending trends overall.

 

2 1 Category – Failed

Group 13.png
 

Focus Areas (on top the elements from 2 1 Category - Active)

  1. Similar to the overall failed budget analytics screen, the visual treatment of the icon serves to emphasize the “failed” aspect of this area of budgeting to more explicitly nudge the user towards spending less.

  2. Because the failure to meet the budget is already indicated in the main area, the card previously used to convey this information becomes redundant. The information on the card about the budget failure is the most important piece of information for the user and thus is made the most dominant element in the redesign.


Some Final Thoughts

Overall this was the first project that I worked on completely independently and on a really tight timeline. I think it became really clear early on that I would have to make a lot of decisions based off of my gut and intuition rather than data or extensive user research. While this is definitely not my preferred way to function, it also forced me to rely more heavily on the theory and experience I’ve been able to build up so far. Overall I am happy with what I came up with given the time crunch but it definitely also is not my best work. If anything, this experience taught me definitively that I do much better work in situations where I have more information about the users (whether through interviews, testing, or raw data).