Mysupnet

Keeping patients with chronic diseases engaged. Structuring patient support group operations.

Mysupnet’s logo is a ginkgo leaf. It symbolizes longevity & endurance in Japanese art.

My friend approached me in Oct 2018, right before I was finishing up my UX Design course, to help him out with the UI work for a product idea he had been working on for a couple of years. I agreed thinking it’ll be good practice for me while also being for a great cause. Little did I know that I’d be sucked into a full-fledged UX project that has been most satisfying till today.

The problem

Chronic diseases are lifelong medical conditions like heart disease, stroke, hypertension, diabetes, depression etc. which are typically progressive. They are the leading cause of death in the world but are often associated with a behavioural component, which can be modified by keeping the patients engaged. For this, the patients need to be active, collaborative participants in a support system.

How might we bring structure to support group operations and ensure patient engagement?

1. We needed a way to keep the patients engaged

A social feed in a closed community where members and posts are moderated by support group admins. Members can share real stories, daily experiences with meds and treatments, emotions, forgotten questions, goals and progress etc. in a safe space. The content would be relevant and relatable and not just advice from medical professionals.

2. We needed a way to counsel and guide members

New members will be assigned mentors who are also patients, but have lived with the disease for a longer period. A private 1-on-1 chat with the mentors assigned by the support group admins, carefully chosen for best fit. These mentors have been found to be more successful in bringing lifestyle changes with patients than medical professionals due to a phenomenon called culturally congruent coaching.

3. We needed a way for the support groups to send important notifications to members

A dedicated channel for the support groups can send event invites, reminders, notify about the latest research or new meds, surveys & feedback — a trusted source for members. Currently, it just gets lost in the large Whatsapp group chats.

We sat in a few support group meetings held by the Crohn’s & Colitis Society of Singapore and talked to the members. Here’s Ahmad — a representation of the edge case for who we designed our product, so that it can be more inclusive.

To take you through Ahmad’s journey during a flare-up typical of Crohn’s disease, and to summarise all the above problems, I made a storyboard. Who doesn't like stories eh?

To minimize the cognitive load on the members learning new systems (aka to flatten the learning curve), the social feed and chat features would just be dialled-down versions of Facebook and Whatsapp. I made low-fidelity versions of screens for the 3 solution features and we showcased them at one of their meetings to gather feedback. We had to send it out in a survey format as well because yknow, support group meetings attendance is very low.

Wireframes of the 3 main features — feed, chat, announcements; that were shown to gather feedback on initial impressions.

Here are their thoughts — delights & concerns, chunked into affinity groups.

Cool. Mostly well-received. Keeping in mind the delights and concerns, I continued adding more screens to make an interactive prototype and tested its usability with 4 patients and 1 support group representative. The test participants were given the prototype on my phone to play with and asked to carry out tasks given by me without any guidance.

Test tasks for the usability study
Test observations and action items

I proceeded to make high-fidelity prototypes, both for the mobile app for the patients, and the backend module for the support group admins. Special care was taken to ensure accessibility guidelines were met since the platform is designed to be scalable to other diseases as well. We assume that a substantial proportion of the elderly has difficulties in the areas of vision, language, comprehension, motor control, and/or lack of familiarity with current digital behaviours.

  1. Wherever possible, don't rely on colour alone to indicate a difference. Font styles, motion, icons etc. can be used to convey information as well.
  2. Icons will always be accompanied by labels.
  3. Large font sizes and contrast ratios while filling forms.
  4. Bottom sheets instead of dropdown lists and pop-ups. This requires a lesser interaction effort.
  5. Large target areas for buttons.
  6. An interactive onboarding tutorial highlighting core features. No matter how intuitive I think my design is, there will still be someone who needs it.

And here is a fun tool to help you find out what people are searching most on the internet about a specific item. I used it to populate the FAQs and Disease resources with meaningful items.

My friend likes blue, yellow, and green. The rest was up to me. Here are the user flow diagram, site-maps and some key screens from the high-fidelity prototype:

User Flow
Simplified site-maps for front-end app and back-end web platform
1. Home — Feed 2. Event page 3. Chat with patient advocate 4. Disease resources 5. Menu overlay

The backend web-module for the support group admins was also designed similarly but with way less rigour. The testing was done with just 2 people and they found the filter function unexpected and delightful. Here are a few key screens:

1. Members database with filter overlay
2. Assigning mentors
3. Events creation & management

This is currently under development. And it will be piloted with none other than the Crohn’s and Colitis Society of Singapore. I found this idea of having a copy doc very helpful, especially when it will be scaled to include other diseases and support groups.

We didn't have any engineering input during the ideation and design phase. We just assumed since it is basically a dialled-down Facebook and Whatsapp, it should be easily doable. But it would have been helpful to know the ease of implementation for all the features. Also, it would be good for engineers to know the rationale behind each design element. This would come in handy when they have to decide on an alternative for times when they cant implement a specified element.

P.S. One of the initial ideas was to have a tinder-like swipe UI to match patients with advocates. Needless to say, the half-life of this idea was shorter than that of Francium. Did you know anything about Francium? Now you do. You’re welcome.