Category: Mobile Application, Website | Skills: Product Design, iOS Development

Colibri

Glucose Control

colibrigc.com

Colibri is an application for people with diabetes. It provides an easy way to track, review and analyze glucose readings, carbs and insulin. It also helps to identify the correct dose of insulin required to cover food based on the current glucose level.


The Colibri mission is create a better everyday life for people with diabetes by providing a user-friendly way to stay on top of what matters most.


Try beta version

Beta testers aren't charged for In-App purchase, and it will only be available during testing.

Challenge

Create a way to make life with diabetes easier.


For teens and young adults who is supposed to keep the disease under control by taking insulin injections.


Keeping in mind that it is often hard to know precisely how much insulin to take. The amount is based on many factors, including Food, Exercise, Stress, Emotions and general health.


I aim to provide a user-friendly interface to track the three main health parameters — Carbohydrates, Medications, and Glucose level. Also, find a way to choose a right insulin dosage.


I need to test an assumption that people are willing to spend more time on diabetes control in order to improve their health condition.


My role

It's my personal project. I did all work from coming with an idea to development and marketing. I aim to both help people and also improve my user research, coding and business skills while doing it.

Workflow

Research

Diabetes Type 1 is a chronic condition in which pancreas produces little or no insulin. A person with type 1 is supposed to keep the disease under control by taking insulin injections. The challenge with this treatment is that it’s often not possible to know precisely how much insulin to take. The amount is based on many factors, including: Food, Exercise, Stress, Emotions and general health.

Type 2 diabetes typically develops after age 35. Type 2 is tied to people who are overweight, with a sedentary lifestyle. In this case treatment focuses on a diet and exercises.

The majority of smartphone users are in the age of 18 to 44. The main part of the potential audience of the application will be young people with Diabetes Type 1.


Target Audience of Colibri App
The target audience of the app is teens and young adults who supposed to keep the disease under control by taking insulin injections

Sketching

The idea of an application can be implemented in many ways. Sketch allow to try out a multitude of ideas and iterate through them before settling on one.

In the first step I came up with multiple ideas, but they were not fully shaped. Some of the elements were incomplete or missing. The main thing was to consider different approaches and to decide which one is the most efficient in the context of my task and the various constraints of the project.


Sketch Colibri App
Sketches of ideas for displaying glucose readings

Step by step, I picked the ideas I like the most and proceeded to work on a more detailed work.


Sketch Colibri App
Detailed Sketch

Wireframes

I already have a general idea and I am thinking about a particular page functionality, or of the integral parts of interface components. I draw different page elements, going into detail, and then draw different possible positions of the page elements. However, this does not mean every single detail. Obvious things may just be noted.


Sketch Colibri App
First Wireframe of Colibri interface

UI Design

I use Sketch to work on design. I created artboard for each screen for my future app. Each Artboard represents a screen or an interaction within a screen.

As for the choice of colors and icons, the mobile user interface is designed by app functionality. I use color coding for separation of essential functions. The purple color is brand color, red for glucose, yellow for food (carbohydrates), blue for medications (insulin). When I need additional colors beyond those I’ve defined in my palette, I use shades and tints. I chose light background because light create the feeling of more airy and spacious screen and it’s easier to concentrate purely on the main elements.

The home screen featured daily glucose readings on one graph. The tab bar linked the user to the core functionality zones of the app: Diary of activities, Adding new value, Statistic. The design supported the icons with labels to make navigation clear for everyone.

Another point of the UI was custom icons that represent food, glucose, and insulin.


Sketch Colibri App
Design UI elements

Development

Once the screens were prepared, I created the Xcode project. I imported the screens and created segues and buttons. I tried interactive prototype and decided to make a couple of changes in design for faster development.

When the interactive prototype was ready and fit all the parameters, I changed screens to real UI elements with full functionality. I used all Xcode features include design, develop, and debug.


Colibri Xcode project

Product video


Main scenario of app usage
Colibri Website