Insulary

About

Insulary is a prototype glucose monitoring app primarily for people with Type 1 Diabetes. It would connect to a continuous glucose monitor on the user. After a competitive analysis of similar apps, I designed the prototype in Figma to map out the functionality.

I created all the branding, designed all the screens, wrote and conducted the user testing, applied the findings to the final prototype, and presented my design to peers and faculty.

The big difference between Insulary and other glucose apps is that Insulary allows user-input carb-to-insulin ratios, meaning the app can perform calculations for you, as well as track the effectiveness of the different ratios.

Competitive Analysis

I conducted a competitive analysis to understand the design patterns of glucose monitoring apps, as well as to identify areas where mine could improve.

Commonalities I found with similar apps were the layout of the home page, as well as the navigation.

Some of the strengths I found useful in creating my design were the consolidation of events found in MySugr and FreeStyle, as well as the actionable predictions provided by Levels.

Weaknesses I found that I wanted to stay away from included overly-categorical event categories, paywalls, long onboarding processes, and limited to no functionality without a connected sensor.

User Flows

Before sketching the screens, I looked at the major tasks users would have to accomplish and created user flows for each. This allowed me to see where the user is making decisions, which are places where communication needs to be especially strong. This also allowed me to see where I could streamline certain flows compared to the competitors.

Wireframe Sketches

While sketching out the wireframes, I referenced a lot of the apps I had examined in my competitive analysis.

The most important information, the glucose reading, was always first in the hierarchy, closely followed by the trend arrow.

The most successful designs kept the homepage minimal, so I included only the current reading, graph, and data summary. It was important to have just the most important information on the homepage.

The rest of the information I sorted into “History”, “Profile”, “Connections”, and “Settings”. I wanted to keep the tab count low to avoid overwhelming users with information.

Brand Identity

I wanted the branding of the app to feel clean, but not clinical. I wanted it to feel modern and sleek, so I took a lot of inspiration from Apple’s recent Liquid Glass style.

I chose clean typefaces to reflect the tone of the app. Sans-serif typefaces feel modern and professional, which is important for building users’ trust in a medical app.

It was also important that I established a clear hierarchy with type. I wanted numbers to be easily seen, since most of the time, a user is only opening the app to quickly check a number.

I made the primary color a soft blue for a few reasons. For one, blue creates a feeling of calm and security. For another, blue is the color of T1D (the symbol is a blue ring).

Green needed to feel soft, like the blue, since it should instantly signify to the user that everything is good. For most users, this is the primary accent color they will see.

Something I wanted the app to do is universally change based on the glucose reading. So rather than just changing in one place, the accent color changes everywhere it is used. This allows the user to be aware of their numbers more generally, without having to reference the reading.

For the high reading, which is non-urgent but still needs correcting, I used a bright yellow. It stands out, but doesn’t command as much attention as the red, which is used for low readings.

User Research

My user research consisted of a total of ten tasks within the app and six follow-up questions about the experience. The tasks had the users finding and reporting data found in various places, so I could understand how seamless it was to locate different pieces of information.

I conducted my user research remotely with people who ranged from being familiar with T1D all the way to people who live with it. I needed the users to at least be familiar in order for the testing to yield usable results.

One of the most significant findings I received was that the naming of the tabs was confusing. This is why I changed the name of the tab “History” to “Data”, to better communicate what information could be found on the page.

Another statistic I found was that tasks 1-5 were 29.4% more difficult than tasks 6-10. This told me that the app would benefit from an onboarding process, though it is relatively quick to pick up.

I also learned that people will intuit that “Settings” can be found under “Profile”. This was good news because it meant I could avoid cluttering the bottom bar with another tab.

From the questions about the experience, I learned a lot about where users felt improvements could be made. For example, many users stated that they would like to see more graphical representations of data.

Final Screens

In total, I created nine screens and twenty windows for the prototype. I divided the information displayed based on type and organized it on the page based on importance.

As mentioned, the homescreen is kept minimal; only the most-needed information is displayed on it. Pictured is also an example of how the homescreen appears when glucose is low.

One of the other most important tabs is the data tab. This is where all of the long-term statistics can be found. This is also where a more comprehensive report of the data can be ordered as a PDF or printed.

The connections tab shows all of the devices and people connected to the app. From there, you can determine what data is being shared with each. You can also access the long-term report here, so it can be easily shared.

The profile tab contains non-sensitive settings not protected by a password, like the main settings page (which is accessed through this tab). It also contains a list of all connections.

As mentioned, the settings tab contains more sensitive settings dealing mostly with insulin ratios and managing alerts.

Notes on the Prototype

Press “L” to simulate low glucose

Press “H” to simulate high glucose

Press “N” to return to normal

Press “C” to simulate a sensor dying and needing replacement

You do not need to input any passwords