Improving Quality of Life for Diabetics

Floor is a web tool that guides diabetes patients on their path to a healthier life style.

Being a part of Nedap (Healthcare), Floor (which is a friendly sounding Dutch girls name) is an online platform that is all about improving the quality of life for diabetics. The platform is built around the science backed approach of splitting up larger goals into smaller steps. Besides this intrinsic motivation Floor lets its users keep in touch with practitioners and mentors for guidance.

“It is an absolute joy to work with such a talented team. Even when you don't know exactly what you want, Yummygum transforms your rough ideas into a wonderful design.”

Stefan Vermaas - Product Owner at Floor

The magic of emotional design

Floor as a platform had been in beta before we were involved and had been designed in-house. However, the Floor team had a clear vision and wanted us to create an experience that would match this vision perfectly.

 

After a couple of valuable meetings we all came to the conclusion Floor needed two things in particular: a User Experience that would drive Floors users to complete steps & goals and the magic of emotion design.

User centered design

Just like for any of our projects we had to understand Floor as a platform and its users inside-out. More than ever we looked at finding the right approach and tone of voice that would make users at ease yet not feel like patients.

 

We identified two personas we'd keep in mind while defining user goals and user flows. On one side of user spectrum we would design for diabetics. Practitioners/mentors however would have very different product goals.

Tone of voice

We created a Mood board and a Style board, in order to find the right tone of voice. A tone of voice that would match Floor's psychology-based approach towards behavioral change among its users. The mood & style we landed on can be described as: not belittling, joyful, approachable and simple.

moodboard-styleboard
  • Coral Red

    The Floor team had already been using red as main brand color. We proposed a tweaked red hue that leaned ever so slightly towards purple to make it appear fresher. This Coral Red was used whenever the system would 'say' something.

  • Maya Blue

    After a few fruitful internal team discussions about choosing either Coral Red or Maya Blue for call-to-action buttons, we landed on Maya Blue. This decisions was made due the Maya Blue's upright, fresh and unthreatening nature.

  • Toothpaste Turquoise

    One of our favorite additions to the color palette was Toothpaste Turquoise, a fresh hue that had plenty of hue contrast compared to Maya Blue. We chose to both use the color for chat related UI, as well as a category color for 'Steps'.

  • Mango

    Another fresh addition to the palette was Mango. We introduced Mango to make Floor feel warmer as a whole. The color was used as 'Goals' category color, neutral skin color for the illustrations, and of course for the smiley Likert Scale.

  • Porcelein

    Like any palette that's put together to accomodate a spacious and approachable User Interface, Floor's palette needed a light accent color. Porcelein would play the main role in unobtrusive illustration scenes, and containers within the UI.

  • Cello

    We wanted the copy to stand out and have plenty of contrast to grab a user's attention. Cello had the right contrast and saturation for te job. Applied to copy set in the Rubik typeface the copy feels confident yet motivating.

Behind the scenes

Working on Floor has been an amazing exerience. Creating a platform that helps people obtain a healthier lifestyle was incredibly rewarding an motivating. Have a look at some shots of our process.

wireframes made for floor

Friendly and joyful

In order to create an online environment for Floor users that would be encouraging and unthreatening we designed all elements to look friendly and joyful. To achieve this look we used larger border radii and form elements styled more conventionally. This would make the User Interface less ambigious to the target audience.

Gaining new users

In between working on the web application, Floor was ready to get rolled out amongst a larger audience. The Floor team gave us a carte blanche to come up with a great experience and content hierarchy for the website.

After laying down a solid foundation we moved on to turn our webpage wireframes into polished designs. Needless to say the website design was fully up to par with the Floor web app.

A screen for floor

Familiarity through illustrations

From the initial client meetings we knew illustrations would play a major part. The main objective of using human like character illustrations was to create a sense of familiarity and to make the User Interface more accessible.

 

We created illustrations environments that would aspire users to get accustomed to health beneficial habits. By using a fictional skin tone and by veiling facial features we created a set of recognizable yet inclusive illustrations.

“Every single time they surprise you with their beautiful and sophisticated solutions.”

Stefan Vermaas - Product Owner at Floor

Sign up for Floor!

Although Floor is constantly being polished to meet its user's needs, we are incredibly proud of the results. If you are, or know anyone who is, a type II diabetic we can wholeheartedly recommend signing up for Floor. For now Floor is available in the Netherlands. Don't let that hold you back from taking a look at the website.