Learn Diabetes
Time frame
10 Months2022-2023
Digital Lab
Brand Design,
UI, UX,
illustrationDesigner
Eugene Park
Jenny Cai
Project IntroductionLearn Diabetes is an e-learning and healthcare support platform aimed at improving pediatric diabetes care in BC by providing online lessons to children who have recently been diagnosed with Type 1 diabetes.
UX RESEARCH & IDEATION
Target UsersPatients(teenagers and children and their parents) with a recent diagnosis of Type 1 diabetes.
Challenges & Opportunity
We have identified two significant challenges facing diabetes patients and developed a plan to address them. The first challenge is the overwhelming amount of information to learn, and the second is the need for ongoing support
Problem Statement
- How may we deliver digestible learning modules so that learners are not overwhelmed by the amount of information?
- How may we give users rewards their study so that they can make what they learn their habit?
- How may we help users to come back and make better learning schedule?
- How may we encompass a wide range of interactive learning styles so that learners with shortened attention spans and reduced ability to focus stay engaged?
Secondary Research
Before creating Learn Diabetes, we conducted secondary research, competitive analysis. In particular, we studied whether there are existing sites similar to Diabetes and, if not, how healthcare e-learning platforms are structured. Based on this research, we identified which elements should be added and which are unnecessary, allowing us to determine the product MVP.
Solution
With the determined MVP in mind, we have come to the following conclusion.
- It contains learning modules providing families, children and teenage patients with an overview of diabetes.
- It contains interactive study modules and short animations to help children and teenagers learn difficult concept easy.
- It also offers an extended resource for further education on the day-to-day management of diabetes and personalized health recommendations, so patients can make strong lifestyle choices. (for the LD version2)
BRAND IDENTITY DESIGN
BrandingTo kick off the project, I began by designing a basic brand identity that included a logo renewal, typography, and a color system.
Character and illustration
We collaborate with the Digital Lab’s media team resulted in the creation of captivating and distinct characters, as well as dynamic animations, which have become integral design components of the entire application.
Information Architecture
User Flow
Before starting the overall UX/UI design, we created a user flow to confirm the overall process.
illustration
Creating an illustration style that carries the brand identity is essential to ensure a consistent visual language throughout the website. To achieve this, we began by analyzing the brand’s existing design elements, such as the color palette, typography, and logo. This allowed us to develop an illustration style that would complement and enhance the brand identity.
The visual identity should tell a story about your brand. Think about the message you want to convey and how your visual elements can help communicate it.
HI-FIDELITY WIREFRAMES
Dashboard
As a study aid, we have carefully designed a dashboard that includes all the essential features necessary for effective studying. The dashboard provides users with information on their study progress, a warm greeting message, the ability to create a personalized study plan, and a collection of badges that can be earned as rewards for achieving study milestones.
Badges
We have developed a badge system to reward users for their continuous learning efforts. This system comprises a total of nine badges that users can earn progressively, one by one.
Each badge represents a significant milestone in the user’s learning journey and serves as a tangible symbol of their dedication and achievement. By unlocking these badges, users can track their progress, stay motivated, and feel a sense of accomplishme
Cources & Modules
To enhance the learning experience and make it more manageable for our users, we have designed two different course hierarchies. The primary hierarchy is called a “track” and consists of multiple courses, each covering a specific lessons.
Each course, in turn, comprises several lessons that build upon each other to provide a comprehensive understanding of the subject matter. By organizing our courses in this way, we aim to provide users with a clear and structured learning path that they can follow at their own pace.
Additionally, we believe that breaking down the material into smaller, more digestible chunks will help users retain information better and apply it more effectively in real-world contexts
Cources & Modules
To enhance the learning experience and make it more manageable for our users, we have designed two different course hierarchies. The primary hierarchy is called a “track” and consists of multiple courses, each covering a specific lessons.
Each course, in turn, comprises several lessons that build upon each other to provide a comprehensive understanding of the subject matter. By organizing our courses in this way, we aim to provide users with a clear and structured learning path that they can follow at their own pace.
Additionally, we believe that breaking down the material into smaller, more digestible chunks will help users retain information better and apply it more effectively in real-world contexts
Hi-Fidelity Wireframes
Here is the hi-fidelity wireframes for the entire Diabetes platforms except learning modules.
Interactive Learning Modules
Our Interactive Learning Modules feature a diverse range of activities designed to enhance the learning experience and promote active engagement. These activities include quizzes, calculations, interactive charts, flipbooks, and additional resources.
Quizzes help users test their understanding of key concepts and reinforce learning, while calculation activities provide hands-on practice in applying theoretical knowledge to real-world scenarios. Interactive charts offer dynamic visualizations that help users explore complex data and gain new insights, while flipbooks provide a fun and interactive way to navigate through the course material.
By incorporating a variety of interactive activities and resources, we aim to create a rich and engaging learning experience that appeals to a broad range of learning styles and preferences.”
Interactive Learning Modules
Here are the lo-fi wireframes and hi-fidelity wireframes for the entire learning modules, excluded platform hi-fi wireframes.
Design System
Design system & Style Guide
Additionally, we created a consistent and systematic design style guide. This style guide improved communication with the development team and provided the design team with the opportunity to refine the design system with greater attention to detail.
Conclusion & Reflection
Our e-learning and media content for the Diabetes Transformation Project (DTP) is designed to empower children and caregivers as they adapt to and learn about their diabetes diagnoses.
By providing up-to-date, engaging, and practical information, our content will help users better understand their condition, manage their symptoms, and improve their overall health outcomes.
Our team is committed to creating content that is accessible, inclusive, and user-friendly, and we strive to ensure that all of our materials are evidence-based and grounded in the latest research. Through the DTP, we aim to make a meaningful difference in the lives of those affected by diabetes and contribute to the ongoing efforts to transform diabetes care and management.