End-to-end design · User testing · Mobile App

Type U

An App to help newly diagnosed diabetes kid's families get better diabetes management education and reduce their burden to take care of their kids.
May 2022 - Present
UX research, UX/UI design, Branding, Data analysis
Miro, Figma, After Effects, Protopie,
-What I did
I am the sole designer in the team, worked with 1 PM and 2 software engineers. I led an end-to-end design process of the APP.
After launching the App, I conducted AARRR analysis and created success metrics for user activity in to support design improvement.
- 95% satisfaction rate.
- 98% success rate of insulin dosing counting
Our client is Children's Healthcare of Atlanta(CHOA), which is nationally ranked in 10 pediatric specialties. We worked with the doctors and diabetes educators in Diabetes Team.
Parents are overwhelmed when the kid is diagnosed with diabetes, and they are required to attend a two-day education on diabetes to ensure they can take care of the child while going back home.
- Problems stated by diabetes educator
I created an App which has digital verision of diabetes content, as long as orientation, diabetes resources, insulin calculalor and quiz.
Digital Content
with visuals and videos to help patients better understand. Also, the patients can search keywords which facilitates their review.
designed to help patients get to know about what education is and what the time schedule is so that they can have a clue of what to do next.
Insulin Calculator
is used to calculate insulin dose for food and insulin dose for high blood sugar, and is also used for patients to double check their calculating.
is designed to help educators check if the patients understand the content or not, and to provide support accordingly.
Diabetes Resources
designed to provide additional information, including App recommendation, food diary and communities.


User Research
- Interview with diabetes educators
We organized a meeting with 4 diabetes educators to have an indepth interview to know more details about the problems they are facing.
- Observation and interview with patients
I attended the class to conduct an observation and user interview at the hospital aiming to gain a better understanding of how patients and families use the educational materials and how they perform during diabetes education in the hospital.
Affinity Diagram for Patients
Affinity Diagram for Educators
Educators mentioned many Apps they would recommend to the patients and complained about their missing features and bad user experience. Therefore, I conducted a competitive analysis of these Apps, aiming to find their weakness and potential  design points.
Click here to see full competitive analysis.
Key Findings
- For Diabetes Educators
- For Patients
- For Materials


Based on the inteview and observation, I generalized 3 types of persona.
User Journey Map
I used a user journey map to recreate the whole process, which concludes 4 phases from being diagnosed with diabetes to discharging from the hospital and going home.


How might we design a digital tool to optimize the whole experience of diabetes education so that parents can get better educated about diabetes management?
💪 Goal
1️⃣ Help parents handle and digest the knowledge easily and soothe their emotions as well.

2️⃣ Facilitate educator to teach knowledge more clearly and easy to get feedback from parents
1. User doesn't need to log in and the App doesn't store user data.
2. The App should avoid containing temporary information such as educators' contact, blood sugar meter device information.
Based on the user journey map, I created a future user journey map to brainstorm design concepts for each phase and to design the experience as a whole.
Key Feature
Based on the user journey map, I created a future user journey map to brainstorm design concepts for each phase and to design the experience as a whole.
Based on the user journey map, I created a future user journey map to brainstorm design concepts for each phase and to design the experience as a whole.
I iterated 3 rounds of wireframes, aiming to create reasonable user flows and validate the information architecture and priority of the user needs.
Key findings and design decisions from the user test for wireframes
After wireframe V2, I conducted a user test using an online questionnaire and collected 11 responses in total.

1. Top 3 features are orientation, insulin calculator, and resource.The features in diabetes content such as bookmark and search need to be researched deeply.
➡️Design decisions: Focus on the design of the top 3 features, and conduct more user tests on other features as well.

2. Patients are excited about the digital handbook, and they are great to see the insulin calculator.
➡️Design decisions: Put real content for the handbook to figure out the best length of each chapter, and elaborate the design of the calculator for further user feedback.

3. Potential opportunities are adding information from educators and doctors.
➡️Design decisions: Communicate with the hospital to talk about the possibility of this feature.
Hi-Fi design
The wireframe created a validated framework for the App. During Hi-Fi design, I focused more on the details of the design, and how to use proper visuals to facilitate the using. I iterated 4 rounds of the Hi-Fi, and conducted 2 rounds of in-person user tests.
In-person task-based user test
After Hi-Fi V2, I conducted a user test with the clickable prototype in person. The user test is task-based and contained 4 tasks. The aim of the user test is to see how users perform when finding particular information in orientation and resources, searching content that has particular keywords, and calculating insulin giving particular carbs.
1. Can you tell me the schedule for the second day of orientation? Does it look like what you had on onset education?2. Can you find the email of your nurse, Jane, if you have an emergency?3. Can you go through chapter one about Diabetes Basic (5s), how would you find all content relates to the word ”insulin” ?(3s) Do you have a hard time finding it? In which situation are you going to use this function? what would you search for?4. Can you calculate insulin dose if you eat 60 g of carbs and your blood sugar level is 150, how much insulin should you take? Given the result, what do you do next? do you think a calculator is easy or hard to use?
Key findings and design decisions from the user test
After wireframe V2, I conducted a user test using an online questionnaire and collected 11 responses in total.

1. Patients understood the orientation and resources easily. For resources, they hoped to add more content about the meal plan.
➡️Design decisions: Communicate with a diabetes educator to discuss the content of the meal plan

2.Patient didn't use the sidebar on the home page which has a content list and bookmarks on the interface.
➡️Design decisions: Replace the sidebar on the home page with a hamburger on the top of the page.

3. The insulin calculator had two flaws. First, the target blood sugar for high blood sugar is changeable for each meal which is not a constant. Second, sometimes patients need to calculator only insulin for food or only insulin for high blood sugar which was not supported now.
➡️Design decisions: Change the target blood sugar from constant figure to user input; Change the design which supports insulin for food or insulin for high blood sugar only.

4. The design system and visual is not in accord with CHOA's design guide.
➡️Design decisions: Ask for a design guide from the hospital and redesign the visual design to accord with the design system.
See full report here.
In-person user test with patients using Hi-Fi 3.0
I created Hi-Fi V4 based on the user test. Then I used this version to conduct another round of user tests based on 2 tasks. This user test aims to validate the visual design of the App and retest the usability of the insulin calculator.
1. Imagine Your kid just diagnosed with diabetes, you were given this App to help you with the 2-day diabetes education. what first thing you will do? Can you tell me what content are you going to learn for the second day afternoon? Does this match your experience of orientation? Does the orientation easy to understand for u? Was there anything confusing for you when you go through it?
2. Read the chapter, can you tell me the reason why people get type 1 diabetes? how do you know the information from the chapter? What do you think of the illustration? do you feel it is easy to understand? do you prefer text or image?
3. Now imagine you are calculating insulin dose(give scenario). Can you calculate your insulin dose if you eat 60 g of carbs and your blood sugar level is 150, your target blood sugar is 100, and how much insulin should you take? giving the result, what do you do next? is there any confusion on this page? In what context do you use this?
See full report here.
Design changes
For Hi-Fi 4.0, there are three big design changes based on the user feedback
New Version Calculator
1. Support only calculate insulin for food or insulin for high blood sugar.
2. Target blood sugar is changeable by users
Visuals added in content
1. Illustrations that display important content are added.
2. Videos of instructions are added.
Added Food dairy
1. List of normal food cabs is added.
2. Food that does/don't raise blood sugar is added using visuals.
3. List of Free snacks is added using visuals.
See all versions here.
Participatory design-Logo and App name brainstrom
Recognizing all stakeholders had high expectations and had a passion for delivering more care and support for patients, I created a logo and App named brainstorm with them, aiming to involve all stakeholders to express their care by contributing to the design.
Final Logo
It was really great that we came up with a really good name, Type U, which was liked by everyone and fully delivered our team's care and passion. Along with that, I designed a logo that makes our great hope in visualized form.
Collaborate with programmers.
The main design job is finished, but I am still doing a part-time job for this project, aiming to assist developers to launch the perfect design of the project. To make the design more standard and programmable, I made a few changes based on communicating with developers.

1. Standardized the components
2. Created design to adapt small phone screen
3. Redesigned the flow of the quiz to support multi-choice questions
In the end, I want to quote what educators said to the patients at the orientation to express my sense of excitement and measurement of helping others people get better through this project!
"You can do this, and you’ll be incredibly proud to look back and see just how much you’ve learned and how far you’ve come in a short period of time!"