Contents
The Process
Competitive Analysis
Inspiration Boards
Sketching & Wireframes
Iterations
Style Guide
The Result
Whats Next
GlucoTrakker
Meet GlucoTrakker, your go-to app for diabetic blood glucose monitoring – it even tracks your mood! Why? Because emotions play a role in your blood glucose levels. All you need is a sensor for precise monitoring.
Year
2022
Project Length
6 weeks
Tools
Figma
Links
Case Study
The Process
Wanting more
I have been a Type 1 diabetic for 19 years, Dexcom G6 user for 3 years. The app's okay; it only tells you the bare minimum. The users need more—carbs, emotions, and exercise integration. I want to make managing diabetes a holistic experience again.
Competitive Analysis
Improved methods to track BG
Before diving into design, I connected with the Type 1 Diabetic community on Reddit, asking real questions. Their insights fueled my project, sparking ideas for activity-driven insulin adjustments, prioritizing accessibility for all, and dreaming of a unified health data hub. As I experimented with colors, I kept the human touch in mind, ensuring every hue was not just vibrant but also color-blind safe.
Dexcom G6
Strengths
Functional
Color-Blind Safe
Easy to understand
Weaknesses
Barebone Design
Misleading share icon
Sugarmate
Strengths
Clean Design
Includes journals and notification features
Show's the user what cause a high and low BG
Weaknesses
Only available on apple devices
Not optimized for smaller screen devices
Contour Next
Strengths
Creative graph design
Food input along with image
Weaknesses
Some icons are too big
Inspiration Boards
The Inspiration
Following extensive research, I started crafting diverse inspiration boards tailored to suit the new app.
Color Pop Board
In my initial moodboard, I aimed for a clean design with a hint of color. I added pops of soft, muted colors to create intrigue without distracting the user. Combining these hues with a white/eggshell base gives the interface a warm and gentle overall feel. This color scheme was also the best way I could include fun pops of color without risking the loss of accessibility.
Vibrant Flow Board
Unlike the first moodboard, I aim for boldness in this one without overwhelming the user. I envision vibrant colors speaking for themselves, exploring unconventional yet colorblind-safe backgrounds. The goal is to infuse fun into viewing blood glucose readings, aiming for user excitement each time they open the app.
Sketches and Wireframes
Desining th
Initially I designed a natural theme inspired by Garden State, and and stayed in this state for a while. I tried exploring different ways the layout could be done.
Iterations
Which one, is the one
Throughout my iteration process, I struggled a lot on making this accessible. It was hard to do so with the colors that I had chosen, but I made changes along the way to make it work.
Iteration 1
I kept the green theme for a natural touch, but tried asymmetry and a sleek look.
Iteration 2
I changed the layout to make it more futuristic and modern similar my dark ideaboard.
Iteration 3
I kept the green theme for a natural touch, but tried asymmetry and a sleek look.
Style Guide
Style Guide
I really want the user to feel like they could trust the app they were using. Blue’s are often associated with trust, so I decided to make that my primary color and stemmed from that. - make this more general
Poppins
Light
The quick brown fox jumps over the lazy dog
Regular
The quick brown fox jumps over the lazy dog
Semi-Bold
The quick brown fox jumps over the lazy dog
Bold
The quick brown fox jumps over the lazy dog
00102E
R0 G16 B46
318FE8
R49 G143 B232
4A98E1
R74 G152 B225
66A4DE
R102 G164 B222
FFFFFF
R255 G255 B255
The Result
Fun and Secure
After a lot of iterating I had come to the conclusion that the geometry and natural theme, did not mesh well. Instead, I went full force wth the geometric dark theme.
What’s Next
Making it better
While I achieved the goal I had, making a physical drivers license physical, with focus on medical information. There are still several elements that still needs improving!
Adding more dimension to each screen
Open UI animation for button presses
Background pattern