CircuAid
A step toward convenient living for diabetes patients with a glucose tracking app
A case study for school
Role: Product Designer
Responsibilities: UX design, visual design, user research, competitive analysis, user flow, information architecture, wireframing, and prototyping.
Tools: Procreate, Illustrator, and Adobe XD
About
CircuAid is a mobile application for tracking blood sugar levels in diabetic patients. Users can use this app to…
Track glucose levels at any given time
Retain historical data for progress checking
Set reminders
Add notes to each record
Connect with your doctor via instant messenger
Schedule a doctor visit
Problem Statement
There are many things to remember in a day and it is hard as you get older. It’s even harder to remember certain routines that you’re not used to, and my dad is the perfect example of that. He often forgets to take his medications and take a blood sugar test. As a result, he feels drowsy and nauseous when his blood sugar is high or low.
Top Use Cases
Diabetes Research
To understand the topic better, I want to know more about the different stages of diabetes, what are the symptoms, and what kind of preventions that diabetes patients need to do on a daily basis.
Competitive Analysis
Before creating any designs, I want to look at the design and usability of other apps. What is working and what is not working. What are the similarities and differences, and their design approach to solutions. What I have noticed is that there is no glucose tracking app that offers a feature to help patients get connected to their doctors. I want to create a digital platform that breaks the technology barriers for seniors, allows patients to feel confident in their health, and minimize the extra steps to get help.
Persona
Through research, the personas are created for possible target customers. Since there are 3 types of patients with diabetes, it’s good to know what their frustrations and existing problems are in dealing with diabetes. This also helps me narrow down who is most likely to use the app.
User Journey
CircuAid is designed to serve different patients with high glucose levels. Given Type 2 diabetes is the most common, these patients need to check their glucose levels and take medications regularly. As a result, John is the perfect fit to use the app.
Information Architecture
Now that I know who I am designing for, the foundation of the interactions can lay out how users will interact with the application. This determines the user flow that John might take to achieve his goals.
Wireframes
Before determining the look and feel of the app, the next step is to sketch out the vision of the app based on the information architecture. This depicts specific features under each phase of the app and the hierarchy in functionalities.
Low Fidelity Mock
I made a low fidelity mock using the wireframes as a blueprint to draw out the flow of the app.
Mid Fidelity Mock
It is important to determine the exact proportions, features and contents before applying branding elements to the app. I made a few changes and added more screens from the low fidelity mock as I went through the process of converting.
Branding Guidelines
High Fidelity Mock
Some changes are made after reviewing the usability and converting them into high-fidelity designs with appropriate use of branding language. A few more screens are added such as the reveal of the 2-week breakdown of glucose trends and the feature to edit or delete reminders.
Important Screens
Down below is the breakdown of important screens and features that CircuAid has to offer.
