Diabetes Check app

 

 

Team     Pegah Sargolzaei, Virendra Vidyarthee, Shubhangi Gupta, Sukhjeet Kaur     

 

Tools     Adobe XD, Adobe Photoshop, Adobe Illustrator

  • To help patients monitor their blood-sugar levels,

  • To provide the users with historical and analytical data related to long-term changes in their blood-sugar levels,

  • To enable the user to export their report to their physician in a comprehensible format.

  • To provide a great user experience while doing all this. 

Challenge

DiabetesCheck application is a mobile application that aims to help patients to establish regular routine in order to facilitate daily blood-sugar monitoring and improve their lifestyle by implementing a scheduled diet and exercise.

Solution

What       Diabetes check is a simple and intuitive application for diabetes patients                               in all ranges of ages. Diabetes Check app allows users to control their                                   blood sugar and change their lifestyle in order to have a healthy life.

 

When      December 2019

Why        Because a lot of the population suffers from diabetes. In 2017, 7.3% of                                  Canadians were diagnosed with diabetes (roughly 2.3 million people)                                    (Statistics Canada, 2017).

 

My Role        Conducting user interview

                                 Discovering pain points and gains (Research phase)

                                 Generating the empathy map

                                 Storyboarding

                                 Sketching wireframes

                                 Producing low-fidelity and high-fidelity wireframes   

 

 

Product

When the user clicks on the app will be taken to the welcome page, from there, the user could make an account or just log in with the username which has already made.

Next, the user should answer the basic questions to settle the profile 

1.png
2.png

Here is the Profile which is displayed after registration.

The user has the option to share your daily/weekly report to a doctor or friends.

In addition, the user would be able to add their medicine and set a reminder.

meal.png

The Diabetes Check app facilitates the way to monitor your daily diet, and be more conscious about your lifestyle by scanning your daily meals and get the information to be aware of the number of carbs and all important factors in your meals.

In addition, the user would be able to search for a specific meal and save it into the app. 

exercise.png

To keep the diabetes patient more active and prevent immobility in order to keep the amount of blood-sugar under the control, this feature defined to make a plan for daily exercise and set a reminder to be on track.

Human-centered design

human-centered-design-02.png

To create an informed user experience, and get a deeper insight into user behaviors, needs, and motivations through observation techniques, interviews, and feedback methodology in order to improve the usability of the product, we implemented the human-centered design process.

01. Empathize

3_edited.png

To understand the user and get a deeper insight into the problem area, my team conducted research, including observationinterview, to gather all the pain points and gains from a patient's perspective. Asking questions like:

What they do

What motivates or discourages users

What they want

How they think

Where do they experience frustration?

to establish common ground among team members and to understand and prioritize user needs, we created an empathy map.

 

 

 

 

Pain points:

  • They have to monitor their blood sugar with glucometers, do it several times, maybe every day. It is a   physically painful experience.

  • They find it cumbersome and difficult to keep a historical track of their blood sugar.

  • They do not follow a specific diet, but they look for a good dietary suggestion.

  • Have to visit a doctor very often.

I conducted two interviews with individuals between the ages of 45-65. Totally, we interviewed 6 participants from a wide range of ages and backgrounds from different countries and cultures.

3_edited.png

02.Define

Combining all our research and observe where our users’ problems exist. In pinpointing our users’ needs, begin to highlight opportunities for innovation.

Based on the interviews that have been done, we gathered loads of data to create a persona to synthesize the key behaviors, goals, and pain points of our target audiences.

Persona

Personality:                                    Interests:

Extrovert                                                Technology

Deep thinker                                          Social media

Compassionate                                     Mobile application

John Green

Bio:

 

Age: 40

Occupation: software developer

Status

Married

Location:

Toronto

  • John is a determined software developer in a leading company. He is a family-oriented guy who has a lot of responsibilities at work and at home as well. As he is getting older, he couldn't help but notice the changes in his body due to his unhealthy lifestyle. Now he feels the need to adopt a digital application in order to keep track of his health and also, getting dietary suggestions.

  • Gain:

        To follow a strict diet plan and cut down on unhealthy eating and               drinking habits,

       Maintain a healthy and active lifestyle,

       To keep his diabetes in control and prioritizing his health

  • Challenges

       Keeping diabetes in check and maintaining blood sugar level every         day,

       Committing to a specific diet and following it every day,

       Busy schedules disrupting his treatment,

       Unexplained weight-loss, varying blood pressure, high Cholesterol,

       Reminding himself to take prescribed medication every day.

The information was unexpectedly enlightening to get a deeper insight into the problem area and help us to narrow it to specific areas which are more considerable.

People, as always are a symbol of courage and determination and with time can even overcome something that doesn’t let them eat what they want. 

How might we...help John to keep track of his health

and manage diabetes on his own?

 

Brainstorming a range of crazy, creative ideas that address the unmet user needs to be identified in the define phase.

Based on our "How might we..." statement, we came up with a lot of ideas for potential features in our solution. Some of the ideas were good, some were okay and others were not feasible.

We then grouped and prioritized the ideas on the basis of importance and feasibility.

03.Ideate

Ideas:

Prioritization grid:

Big Question- App or Wearable?

  • After all the brainstorming and big ideas, we decided to go with a mobile application since recording the readings on a wearable like a watch could be difficult as the screen is small.

  • Also keeping the records and reading the dietary suggestions would be difficult.

  • Moreover, as everyone has cell phones, a mobile application would be more accessible

  • Furthermore, as our targeted users are 40-65 years old not all of them are going to be familiar with wearables and might have difficulty operating. 

Sketches:

  • Individual sketches allowed us to try out  multiple UI ideas and choose the best out of the lot

  • We gathered all our sketches together and decided as a team which ones had the best way of navigation and presentation of the UI elements and features.

3.jpg
5.jpg
8.jpg
7.jpg
9.jpg
11.jpg
12.jpg
14.jpg
16.jpg
17.jpg
19.jpg
20.jpg
18.jpg
13.jpg
2.jpg
21.jpg
6.jpg

Feedback from paper prototyping:

  • The user liked the minimalistic design on the home page.  It’s pretty simple and not cluttered,

  • The user could easily follow through the paper prototype,

  • Overall, the user didn’t struggle much with our paper prototype. He liked the idea of integrating all the features into one. So, we are moving forward with this concept by doing a few modifications,

  • Moving forward,  we are going to turn our paper prototypes into low fidelity wireframes and gather feedback for the same,

  • Subsequently, move on to high fidelity wireframes.

 

Building real, tactile representations for a subset of our ideas. The goal of this phase was to understand what components of our ideas work, and which do not. In this phase, we began to weigh the impact vs. feasibility of our ideas through feedback on our prototypes.

Building real, tactile representations for a subset of our ideas. The goal of this phase was to understand what components of our ideas work, and which do not. In this phase, we began to weigh the impact vs. feasibility of our ideas through feedback on our prototypes.

04.Prototype

Now, with the first version of usability testing on paper prototyping, We did the low fidelity prototyping and test it out with our potential users.

Purpose:

The purpose of the “Diabetes Check app” usability test is to collect feedback about how users use the app to log in their blood sugar, keeping a track of their medication, fitness, and food. Also, how they can share the logs with the doctor. We also wanted to know what problems they may encounter using the app and what improvements they would like to see to make it easier to use the app.

Onboarding – 10.png
Onboarding – 9.png
Onboarding – 10.png
Onboarding – 11.png
Onboarding – 11.png
Home_page_–_1.png
Export – 1.png
Profile – 3.png
Profile – 2.png
Onboarding – 8.png
Meals 1 – 1.png
Meals 2 – 3.png
Meals 2 – 2.png
Exercise 2 – 1.png
Exercise – 1.png
Export – 1.png
Exercise 3 – 1.png
Exercise 4 – 1.png

Objectives:

  • The general look and feel of the app: Do the user understand the app and is able to use it without getting confused,

  • The procedure of logging the blood sugar,

  • Ease of sharing it with the doctor,

  • Recording and saving the blood sugar readings for the last 3 months,

  • Setting Reminders: Do users understand how the reminders work in the app and how they will be used,

  • Also, what all reminders can be added? 

  •  Personalized Diet Plan: Do users understand how to use the diet plan according to their food habits and liking,

   

  •  Feedback: Which aspects do users like and which aspects do they dislike? 

 

High-fidelity wireframes

With our findings from the Lo-Fi prototypes, we refined our UI and applied the following things to make the high fidelity wireframes. Refinement is a trend observed after every step.

  • Better navigation.

  • Responsive UI elements.

  • More detailed screens.

  • More emphasis on user-friendly language.

  • We decided to with a very simple and warm color tone- we used these colors so that it does not interfere with other colors with the in-app media. Also, it is unobtrusive.

  • Detailed dietary suggestions.

Getting notification to remind the patients to do their activity, take their medicine.

Facilitating the experience of users in being navigated into a specific action.

To be connected with their physicians and send their reports in an urgent situation.

To calculate the carbs in your meals and keep a healthy lifestyle and get information about nutritional value.