Diabetes is a chronic health condition that affects how your body turns food into energy. In the last two decades, the number of adults diagnosed with diabetes has doubled.
Simplifying diabetic life with an end to end app

GlucoGuru

Overview

The Challenge

Help users monitor and manage their diabetes.

Understanding how food, physical activity, and blood sugar levels interact is critical for controlling diabetes. It can be overwhelming to think about carb counts, insulin doses, A1C, glucose, glycemic index, blood pressure, weight and everything else. Over time, diabetes can cause serious health problems, such as heart disease, vision loss, and kidney disease if left unmonitored.

The Solution

Design an app that simplifies a life with diabetes.

Mobile apps can simplify tracking and learning to live a more controlled and comfortable life with diabetes.

These are the high level goals and objectives:
  • Design an app that allows users to monitor their day-to-day by logging entries, tracking goals and setting reminders.
  • Aggregate information from other apps and devices in order to have an overview of their health in one place.
  • Create an identifiable branding with logo to differentiate amongst  competitors.

The Process


My role: Product Designer
Tools: Figma, Photoshop, Miro
Timeline: 2.5 weeks (Dec 2020)

This project was completed as part of Designlab’s UX Academy program.

Empathize

Discovery & immersion

What do users really need in a self care app?

To better serve the users, I looked into mobile app development trends. Technology advancements, consumer demands, and a wide range of other factors evolved the industry over the years.
I dived deep into medical research to understand the different types of diabetes. Only once I understood the diabetic types and methods of treatments, I could understand the reasoning behind the existing diabetic care apps in competitor market research. Often, within the same company, they offered multiple tracking apps, each app serving a different purpose. Potentially, a diabetic user could have to utilize several apps, depending on their particular treatments.
Get in, get it done, and get out.
Interviews with three participants revealed that users utilized mobile apps to deal with everyday tasks. They liked when it was easy to get things done with apps directly and quickly. They disliked when entering data was tedious or didn't save a record to look back upon. When it became a bigger chore to upkeep than provided value, they dropped the habit.

Define

RESEARCH SYNTHESIS

Defining their psychological goals and needs

From the research we could see there were different types of diabetics with different ways of controlling their diabetes. Pinpointing their common needs and differences, I set up four user persona profiles for the four major types of diabetics that could be potential users for the app.
Many Type 1 diabetics were diabetic since childhood and wore CGM Continuous Glucose Monitoring systems in addition to insulin pumps to maintain their glucose levels at a safe and constant level. Some Type 2 diabetics and pre-diabetics were able to reverse their diagnosis through diligent behavioral changes of testing blood sugar levels, exercising and eating healthy or taking lowering blood sugar medication. Most gestational diabetics were no longer diabetic once they delivered the baby but had to maintain pricking their fingers for glucose level testing and logging their food intake four times a day.

In spite of their differences, their likely common problem?
I don’t want to be (more) sick.
I explored with a 5 Why's analysis to help get to the root cause of a diabetic’s problem and uncover blindspots, tease out assumptions, and ultimately help solve their problems
With the initial problem of helping diabetics see improvement,  I reversed the problem to focus on blockages that prevent diabetics from managing their illness, as horrible as that sounds! By looking at ways the problem could get worse, I was able to concentrate more on the user and their needs to identify solutions more easily.
I then took the identified solutions and put them on an impact/effort matrix. Imagining impact from the user's perspective, and imagining effort from a developer's and project manager's perspectives. This is also where partnerships and collaborations with other apps and devices would also prove pertinent on GlucoGuru's development.

Even though some features laid out in the high effort with low impact grid, to explore the project scope in an ideal, no-cost, exploratory way, I wanted to see how far the connections could and should go.
Redefining the problem space
Although there were different types of diabetes and different types of treatment, one thing that remained constant was that diabetes needed incessant monitoring. Everyday. Several times a day. Often more than one area of concern. This could lead to a very obtrusive experience.
How might I design an app to simplify a diabetic’s routine?
Secondary research revealed that diabetics were often frustrated by the confusing jumble of data they acquired with little knowledge about what to do next. The Primary research showed me that users enjoyed using apps when the app made life simplier for them. Empathy exercises gave insight that the users had to monitor their diabetes in order not to get more sick, and it was often a constant reminder of their illness.

ideate

Interaction Design

Formulation of an effortless user experience ...

An end to end application often starts with a tedious onboarding passage. Added to the constant persistant logging on potentially different apps, I imaged a diabetic’s daily routine to moniter their symptoms to be quite tedious. It would be dangerous for their health if they dropped their habit because they got too annoyed with the incessant logging.

... as simple as talking to a friend.

What if I designed a platform that was as easy as talking to a friend?  A companion that cheered the user on as they logged about their mundane routine? A smart AI chatbot that coached with intelligent feedback fed by user data? That connected the dots to take actionable steps and complete tasks on demand? I started formulating a minimal effort app that could support, provide insight and evolve with its user.
I mapped a taskflow showing a Bot guiding a new user through onboarding, then requesting permission to pull and share data from other apps and devices, which in turn could reveal enough data for the Bot to interpret and assist in tasks.
Then I built out the user flow thinking about the choices the user would be faced with while chatting with the Bot. Since a lot of the app was seemingly contingent on the amount of partnerships to integrate apps and devices, I needed to make sure I not only gave the user the option to share data, but also manually log data in seamlessly.
I then set up the site map, working off the previous research. I originally had imagined the Bot as a separate icon on the dashboard with a chat history and ask a question feature. But thinking back to the relationship the participants had with their apps from my interviews, I had to face the fact that they wanted to get in and get out. The novelty would quickly wear off and the users wouldn’t want to waste time chatting with a Bot.  I couldn’t have the correspondence with the Bot be the primary focus of the app.

The primary focus of the app should be logging in data for a clear record. To understand triggers, gain insight and predictions. The Bot should helpful and informative but also just be in the background and not a separate entity. Like an app. The Bot was the app.

Building an identifiable Bot personality
I wanted to identify our Bot's personality in order to write the copy for the app in a humanistic way and make it more engaging to interact with. I wrote out the Bot’s role and job title, created the job description for the position.
I chose a name, selected the sex and age, sketched a thumbnail biography, visualized, and then I took a Myers-Briggs Type Indicator test from his perspective to finally bring him to life. The results from the indicator test was spot on amazing what I had envisioned for our Bot!
Intelligent and warm, full of passion, genuine and caring. Motivates with infectious enthusiasm.
The app would be as it’s GuruBot. Helpful, dependable, cheerful and encouraging.
I playacted the interaction between the user and the GuruBot and fleshed out the verbiage on a script. I visualized the GuruBot guiding the user through the onboarding process and also a return sign in visit.
Once I had the scripts in place, I designed into them, exploring how best to display the data and actions available to the users.  I wanted to optimize functions of the phone, like speaking to Mies through the phone’s microphone. Swiping to minimize dashboard and screens that the user didn’t want to read. Utilizing the camera to take a snapshot record of food intake. Accessing their location to find closest grocery stores and restaurants to help place an order. Connecting the user and all their diabetic utilities in one app.
I then built out digital mid fidelity wireframes. I wanted to introduce the app as the chat frame already with the Bot, and not have an additional chat window within the app. Sort of like Apple's Siri. I explored how to display interaction with the Bot after signup and signin. Embedding it into the app background and as popup modules the user could swipe away.
I read up on the most usable "hot spots' for touch phones.  Originally, hot spots were towards the bottom corners of the screens where users thumbs could reach. But with the evolution of phone sizes, it's now closer towards the middle of the phone where the hand gripped the phone. With that in mind, I explored dashboard ideas on how to display GlucoGuru’s many categories.
I originally liked the arc design idea as it gave the most visual impact but unfortunately was not effective in relaying necessary text. The double stacks of icons seemed user friendly but was also so static and potentially hard to scan. The long row of icons were simple but impactful, and prioritizing the four main categories- glucose, diet, meds, and activity would be easy to create a hierarchy from top down.

Design

User interface design

Visualizing a touch and talk experience

Since we had already identified the brand's identity of Intelligent, Technology Advanced, Helpful, Friendly, and Trustworthy, I created a inspirational mood board with a color story on pinterest of neon gradients and rounded fonts to visualize our key words. A Rounded font for a Friendly feel. A green hue to evoke trust and calm in a traditional healthcare colorway. A soft neon gradient to display futuristic techiness.
I then moved into branding. Again, I wanted a logo to reflect the app's core identity. Something friendly, approachable, trustworthy and geeky. I played with the two G's and started by playing with some fonts, finally ended up with a mix of two fonts and vector'ed the serif end to match a bit more to create the branding for GlucoGuru.
From the research interviews, nine visual designs of trending apps were shown to the participants and asked which look they preferred for a health tracking app interface. All three selected a neumorphic design.
Their visual design choice of preference
I updated the digital wireframes with a version of neumorphic effect the participants had liked, while trying to keep it as legible as possible with deeper outlines and shadows since neumorphism has been criticized for readability. It ended up creating more of a skeuomorphic effect instead.
So I went back and softened the UI for a more true neumorphic design, added micro interactions of button presses, and prepared to A/B test the two designs in a high fidelity prototype usability test.
I then applied the Visual Design to create an animated prototype. Onboarding the app with an introduction to Mies as the Gurubot walks the user through entering in their diabetic type, current methods of treatment and integration of other apps.
Continuation of understanding how the app works with Gurubot's guidance on popup cards and introduction of Tap to Type and Hold to Speak functions.
I visualized a Blood Glucose entry with voice control option or touch control. Entry leads to a Glucose Forecast and swipe up card option available for those who want to continue further into the app's capability to connect the dots.
And finally a summary of history with an analysis and also a food log entry utilizing the phone's camera. Food entry has nutritional info and also has Tips and option to connect the dots by viewing recipes to favorite.

Prototype & Iteration

Evaluation of usability for long term mileage

I moderated an animated high fidelity usability test in person and remotely for three participants.

The goal was to determine if users could:
  • Successfully complete onboarding
  • Navigate and understand the features of the app
  • Log a glucose level and food intake entry and choose next steps.
  • Select an interface design
  • Enjoy the app enough to convert to become a user
Out of the two interface designs, two preferred the softer neomorphic look. They liked that it seemed newer and fresher and didn’t have an issue with any readability. One participant liked the borderline skeumorphic design instead as it popped out more to them.
"Whoa, that's cool." "Aww, he's cute!" Two participants were utterly charmed.
All three participants were able to complete the tasks, but not exactly how I had envisioned it. No one even attempted utilizing the voice control function, preferring to tap on the buttons instead. I had kept the dashboard empty at first entry, wanting to give the options of tap to type and hold to speak a chance to be prioritized and used, but it just wasn't intuitive enough at first sign in. Users also didn’t process that the app could help them through next steps such as adding ingredients of a recipe to their shopping cart, or ordering delivery. While they later appreciated the helpful purpose of the option, they considered logging an entry completing their needs already.
I mapped an affinity diagram to visually organize the participant's comments, and cluster my ideas and data so I could effectively develop solutions.
Iterate to reduce the learning curve
Onboarding- Introduce Mies as the GlucoGuru Bot. Clarify button outline. Add option to skip questions.
Dashboard- Get to the point faster. I did several iterations to explore how best to introduce the voice control and also prioritize the familiarity of the tap control to the forefront.
Voice Control- Reduce the learning curve. Add suggestions on how to request Mie's help on screen.

Wrap up

Next steps and Key Takeaways

Test, iterate and repeat.

Create a dark mode and work on responsive platforms including a watch interface. Test, iterate and repeat.

Key takeaways and learnings

It takes a lot of deeper research to really understand the landscape and the user's needs on unfamiliar territory. It's tempting to jump right in to design with surface briefings, but knowledge is key. Reading competitor app reviews to see where they had user frustrations, reading personal blogs on a target user's lifestyle really helped immerse me in a diabetic's day to day.

Another learning is that, even with the best intention in feature prioritization, it maybe too much for a user to comprehend and learn all at once. Making sure they have a strong fallback option that they are familiar and comfortable with is important.

Also something to try to avoid is feature creep. I had hoped to connect the dots for the user to have an all in one app platform. Rolling out bit by bit and testing what they needed next would be better for future growth.

A cross functional team would be essential in creating a product of magnitude. Marketing team to test and weigh in on Mie's personality. PM's and upper management to gain the collaborations with integration of other apps and devices. And of course, Developers to implement the design.

Thank you for reading!

A big thank you to all the participants and to my mentor, Chris Key, Head of Strategy at Rubber Duckers, for pushing me to flex my mind muscles deeper and further.  

Leave a note and say hi!  I'd love to hear from you!
Back Top
return to top
© 2022 LauraLau.Design