Feed Me

Tracking nutrition, sleep, diapers and medicine use of your newborn.

Keywords:

UX design

Visual design

Animations

App development

Copywriting

iOS

Commissioned by:

Noodlewerk

Design

This project is part of my activities at Noodlewerk Apps and started in the Fuzzy Front End of design, ending with the delivery of an ‘App Store ready’ mobile application.

Feed Me is a tool for parents of a newborn child to easily track nutrition, sleep, diapers and medicine use to get a grip on, set goals for and make sense of the daily care for their child.

During this project I completed about 95% of the work on my own. This meant that I was not only responsible for the UX design and Visual Design (including animations), but I also developed the app with its cloud-backend and wrote the textual communication.

Curious how it works? You can download the app from the App Store.

How this project came about

During this project I entirely redesigned and rebuilt an app Michiel Boertjes had built for keeping track of the nutrition of his daughter. At first the app was meant for personal use, but later he decided to also place it in the App Store as a product of Noodlewerk Apps.

The app became quite popular and with its popularity came the the (inevitable) bug reports and requests for additional features. But there was also a bigger problem looming: the backend, built in a platform called Parse, would soon stop working because Parse was shutting down. So the big question at that moment was: Are we shutting down Feed Me or are we rebuilding the app from scratch and continuing?

We decided to base our decision on whether we could find a suitable replacement for Parse. After a quick evaluation we found a potential replacement for Parse in an Apple service named: CloudKit. So, that meant work had to be done!

Process

Inspiration from Feed Me 1.0

It was clear that three features of the old Feed Me should be maintained in the new design:

With my new design the intention was not to create something entirely new. I wanted to keep and enhance the best features of the old app and maintain its core identity.

Design goal

As a foundation during my entire process I captured the essence of what I think Feed Me should be and I specified the character and tone of the new design in the following design goal:

A tool for parents to get a grip on, set goals for and make sense of the current situation in order to give them the feeling of confidence and pride about how they care for their child.

Competitor research

I conducted a specified competitive product research to discover with what kind of features I could expand Feed Me and to determine an effective way of communicating to the target user of Feed Me: the concerned parent.

I started this research by identifying two main different types of apps:

For a more indepth analysis I picked three competitive products: one power user app, one guiding app and one a that is a bit in between. To communicate my findings in an (for others) informative an attractive way, I combined them in an infographic.

This analysis combined with the inspiration from Feed Me 1.0 allowed me to conclude the following implications for the design:

UX design

For the UX design I performed iterations using a variety of prototyping tools such as pen and paper, illustrator/ Sketch and Framer.js.

One of the most challenging aspects, that I have spent a lot of time on, is how to add more features to the main screen without cluttering the user interface. To achieve this, I created a clear hierarchy in the main view for different elements:

  1. The navigation bar is the top level and determines the content. Here the user sees which child is now selected for tracking nutrition, sleep, diapers and medicine use.
  2. The middle section shows the current state. Here the user sees all the entries chronologically as well as day totals.
  3. The tabbar in the bottom of the screen is the starting point for creating new entries.

For each of these three levels a careful balance between conventional and unconventional UI elements has been established. New interactions are based on known conventions, in order to establish an easy learning curve and to prevent the perception of unexpected app behaviour by the user.

An example is the aforementioned tabbar in the bottom of the screen. It is a conventionally recognizable part of the UI for users as a starting point, but, instead of navigating to a new screen, tapping one of the tabbar buttons pops up the custom ‘keyboard’.

Visual design and textual communication

Choices for the visual design were made alongside the creation of the UX design. Because there’s already a lot going on on the main screen, I opted for a non-distracting neutral style to create calmness and clarity. The soft but diverse pastel colours were chosen because they are not necessarily feminine or masculine, but still baby-themed.

The way the colours are used also communicates and strengthens the UX design. A variation of messages in text, images and animations in the same visual style are also used to inform and guide the user.

Building the app

Up until I started with Feed Me I had never built an entire application from scratch. Sure, I had worked on applications, but never before have I been responsible for the creation of an entire app from start to finish. It required me to familiarize myself with determining a Minimal Viable Product (MVP) together with the order of building the features, while also keeping the bigger picture in mind by creating proper classes and other objects and planning the app architecture.

By doing so I developed my own system for app architecture based on Protocol Oriented Coordinators by Niels van Hoorn. I will make this available in the future when I have made it presentable.

What’s next?

At the time that I am writing this my design is at a beta-stage. This means that it will be distributed amongst first time testers through Apple’s service called TestFlight. We hope that this will give us enough insights to finalise the first version of the redesign of Feed Me.

At this point already two major features are planned that we want to implement in the near future:

Feed Me

Tracking nutrition, sleep, diapers and medicine use of your newborn.

coordinating flows with protocols

A way to provide structure to your code.

Headphones

3D-printed headphone enbodiment.

Diem

A smart house that cares for you.

200th anniversary of the Dutch government

Applications for iPads in an interactive exposition.

Snapture!

Making digital data tangible.

From Hats To Heels

Personal branding by creating a website

Gloombot

A robot that is just gloomy, nothing more...

Ode to Dieter Rams

a DIY Bluetooth speaker.

1-2-Chair

1 design, 2 chairs.