Mobile app from idea to launch

Low Sugar is an application for diabetics. It allows tracking of three main health parameters — Carbohydrates, Medications and Glucose level.

Glucose level will appear on a graph and average values for the last week and month. It helps to know what to expect from A1C test at the doctor appointment and make better decisions for the future control of diabetes.

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.

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.

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

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.

Screen map

Screen map shows the sequence of screens and users events. In the process of working on a map of screens I added the missing screens. As a result I received illustrations required actions for each transition.

It helps on the design stage to take into account all the necessary functionality. It also saves time at the stage of a clean design. It will be necessary to draw only the basic UI elements of the interface and group them based on wireframes.

Colors

In interface I use color coding for separation of basic functions. Green color is brand color and it is responsible for history, 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 of shades and tints.

I avoid using gray colors without saturation. In real life, pure gray colors almost never exist. It will look more natural and familiar to users. 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.

Typography

Font on mobile device needs to be flexible. It should offer variety of weights, wide range of special symbols and it need to render very well in different screen sizes. I use the system font on iOS San Francisco. iOS automatically applies the most appropriate font variant based on the point size. It also switches fonts automatically as needed and respects accessibility settings.

Icons

I use icon to show that the element is interactive and to suggest what it does. Combining icons with a key color provide a clear call to action and invites users to tap it.

UI Design

I use Sketch to work on design. Sketch is a vector design tool entirely focused on user interface design. It’s a great app for design.

I created artboard for each screen for my future app. Each Artboard represents a screen or an interaction within a screen. As a result I have a design for all screens in one file.

Xcode development

Once the screens are prepared, I create Xcode project, import the screens and create segues and buttons. I tried interactive prototype and decided to make a couple changes in design for faster development.

When interactive prototype is ready and fits all the parameters it is time to change screens to real UI elements with full functionality. Xcode includes all the features to design, develop, and debug an app.

Launched version