My Kidney Guide
Teaching teens and young adults with CKD self-management skills and strategies.
Background
As adolescents transition into adulthood they experience opportunities and challenges of the increasing independence that comes with it. For those with chronic medical conditions, such as chronic kidney disease (CKD), this transition brings the additional challenges of taking responsibility for the management of their condition.
Adhering to the medical treatment and daily management of their condition is difficult for many in this position; challenges such as a lack of information or misinformation being two contributors to low adherence. Additionally, as the progression of CKD can be relatively symptom-free, following medical treatments may not seem necessary to patients who don’t experience negative side effects of not adhering to these plans. These challenges can have detrimental affects on these individual’s health.
Project overview
My Kidney Guide is a SBIR Phase 2 targeting adolescents aged 13-25 designed to improve treatment adherence. Building off the work of the Phase 1 prototype, 3C Institute developed and pilot tested a self-paced e-learning program that takes a developmentally appropriate approach to teaching users about their CKD, important self-management skills, and coping strategies. In order to ensure the program’s efficacy, 3C partnered with teens, parents, and medical providers to evaluate the program and provide feedback throughout the development process.
My role
The My Kidney Guide program is built on 3C Institute’s proprietary software platform DeLP (Dynamic e-Learning Platform). DeLP is highly customizable and includes features for didactic instruction through video, audio, and interactive exercises that allow the user to practice skills and test their knowledge.
On this project, I worked closely with the project team to use all of the flexibility of the DeLP platform to develop the My Kidney Guide branding and visual identity, create engaging video and animated content, a breadth of interactive exercises, and mini-games to support learning. I worked on the UX/UI of the course by developing wireframes and mockups for the student dashboard, course player (the area where the course content will be displayed), and resource center flow. Lastly, I developed supplemental resources for the course on WordPress pages that are unlocked and accessed via the course resource center.
2018 - Present
Role
Visual Identity/Branding
Illustration
Instructional Design
Storyboarding
Animation/Motion Graphics
UX/UI
WordPress
Tools
Photoshop
Illustrator
After Effects
Adobe XD
Animate
Proof HQ
Team
Dr. Deb Childress – Co-Principal Investigator
Dr. Maria Ferris – Co-Principal Investigator
Suzanne Messina – Content/Editorial
Steve Grothmann – Project Manager
Kelly Fish – Creative Director
Tamica Phillips – Design
Wes Sommer – Video
Morgan Huegel – Front End Development
Chris Hehman – Solution Architect
Edie Lindley – Project Manager
Randi Ingram – Research
Audience
The content, visuals, and user experience for My Kidney Guide was developed primarily for teens and young adults aged 13-25, however there were other audiences we wanted to be able to address: parents and healthcare providers.
Teens
Due to their condition, teens often experience cognitive impairments that can affect how they learn. The content and experience of this program was crafted to be developmentally appropriate through the use of accessible language, easy to follow didactic presentation, opportunities to practice their understanding, and strategies that are clear and actionable.
It was important to create visually appealing video and animation content, interactive experiences, and a gamified user experience not just for the purpose of making the program friendly and relatable, but also to make sure teens could approach the content without feeling like it was authoritative.
Parents
After being primarily responsible for managing their child’s health, parents are presented with the realization that they need to start taking a back seat to allow their child to take responsibility for managing their condition. My Kidney Guide serves to provide parents and guardians tools to support their child in developing needed skills to successfully transition into adulthood.
Medical team
Pediatric medical providers will be the likely purchasers of this program, using it as a tool to increase treatment adherence in their patients.
Providers will be able to use My Kidney Guide during appointments, watching and reviewing the content with their patients, or asking patients to work through the program while they wait for their doctor or between appointments. Data collected in the course will be accessible to the healthcare team to allow providers to easily monitor their patient’s progress.
Production Process
Visual identity development
Building off the guide concept, I developed the visual identity to be reminiscent of outdoor adventures and scouting. Badges were designed to represent the content of each module and resources. The dashboard, resource center, video, and many interactive exercises were also designed with scout and exploration elements, such as Trail Maps to help students choose difficulty of self-management skills they’d like to try.
Logo
Styleguide
Visual assets
Course graphics
After establishing the visual direction for the course, the next stages were production of the course content including storyboards, motion graphics, live video, and interactive exercise templates.
Art notes and storyboards
Prior to creating the storyboards, I reviewed the scripts developed by content and SME’s. As I reviewed each script I would make “art notes” or written plans for how I would create the storyboards, including the graphics for the video and motion graphics, identifying the interactive exercises and what templates would need to be created for them, and noting where live action segments would appear.
Once the art notes were completed, I would begin work on the storyboards which would be created by lessons within each module. These storyboards show a linear progression through the course, presenting video content and interactive exercises as they would be experienced by the user.
When the storyboards are completed I present them to the rest of the project team via ProofHQ. This is where the editing process primarily occurs, with team members noting areas that need edits and myself flagging, addressing, and re-presenting the material.
Motion graphics
Once the team has had a chance to make their comments and edits have been resolved, production begin on the video content. We used voice actors to capture most of the audio content for the motion graphics. These were produced primary in After Effects. Once completed, these would also be posted on ProofHQ for feedback.
Other video content
For role plays and other live action segments, we filmed these using actors and other in-house talent.
Interactive exercises
The My Kidney Guide program takes advantage of DeLP’s many interactive features including drag & drops, branching menus, list menus, and knowledge checks. I created a template and design assets for each exercise that the course builders would use to build the interactive in the program.
UX/UI
How does the student access the course and it’s supplemental materials? The DeLP platform allows for flexibility in the user experience design of the user dashboard and resource center. However, for this project the team wanted to push the boundaries of what the platform could do at the time.
User dashboard
The user dashboard is the primary location where students will navigate the course. The project team went through several iterations of how gamified we wanted the dashboard to be, at one point including a user pet that could be customized based on progress through the course. However this was dropped due to the concern of this feature feeling too young for the target audience.
The final dashboard includes badges to serve as visual representations for each module, completion badges, and the Guidebook. As the user completes lessons, resources in the Guidebook are unlocked, to which the user is alerted via the dashboard.
Course player
Once the user entered a lesson they would be taken to the course player, or the area where the videos, interactives, and other content would be displayed. I developed several directions for the colors and patterns to incorporate the established visual identity into the course player.
Resource center
DeLP also includes the Resource Center; an additional area in the program that includes additional materials useful to the user, such as module overviews, useful strategies, external websites, and supplemental video content.
In My Kidney Guide, the resource center was initially designed as a llama farm. Each llama would represent areas of focus for the available resources such as medical tips or kidney friendly recipes. However, the llama farm was dropped due to this feeling too young for the audience.
The resource center was then re-conceptualized as the Guidebook. The Guidebook would include 6 different resource types organized with unique badges and names. As the user progressed through the course completing lessons, resources in the Guidebook would be unlocked and available to view. The user is able to view the new resource notification via the dashboard, then navigate to the Guidebook where they can access the new materials.
Resource web pages
With the understanding that most teens would be accessing this course via their mobile device, the team considered how best to present the supplemental materials. Many resources in the Guidebook were brief summaries of strategies or video content that could be easily displayed in a modal.
However, for more lengthy materials, like the module summaries, these needed more real estate than the modal could comfortably handle on a phone screen.
The project team narrowed down to 2 directions: PDFs or WordPress pages. Each had their own benefits and challenges that the team weighed when considering which direction we wanted to go.
PDFs
In DeLP, PDFs are made to be dynamic populating the document with the users responses, such as showing what level of self-management they chose for the trail map interactive. However, they are not responsive to to different devices without additional support from the web development team. A way around this would be creating 2 versions of each pdf: one for print and one for mobile display, though this significantly increases the art effort. There is also the challenge of how the system would know to display the mobile version of the pdf vs the print first version. If just one print first version is designed, the user would have to pinch and drag on their phone to be able to read the materials.
A question the team also pose is “how likely is a teen to print out the resources?”.
WordPress
WordPress pages can be created by just myself without the need to involve a web developer. I am easily able to create them in a way that they are responsive to mobile, tablet, and desktop. WordPress pages can also be saved as a PDF from the page, though not as purposefully designed had it been PDF first. The drawbacks of WordPress is that the user has to have an internet connection to access the page and it would not be dynamic to user responses in the course. The WordPress pages would not communicate with the DeLP platform so there would be no way for user’s unique responses to be populated on the webpage.
Considering both options, the team decided to use WordPress for the supplemental resources due to its responsive design, straightforward development and ability to be saved as a PDF if needed.
Current status
My Kidney Guide is currently recruiting for the Phase 2 study.