Introducing Chrono Care: A personalized healthcare app designed for people with chronic illnesses

Dharanitharan
14 min readFeb 5, 2024

--

cover image

I’m super excited to present my case study on Chrono Care, a personalized healthcare app designed for individuals with chronic illnesses.

To set the context, let’s begin with the problem statement.

problem statement

The reason, I chose to work on this problem statement is

This domain was completely new to me, and the problem statement seemed like a great opportunity to showcase my UX and UI skills.

The main idea was to create a healthcare app specifically for individuals with chronic illnesses.

Unlike typical healthcare apps, this one would be custom-tailored to meet the unique needs of people dealing with chronic conditions.

Take a look at the final solution, I have came up with

video presentation of Chrono care.

Click here to see the prototype.

Chrono Care is your personalized healthcare app, crafted to fulfill the unique requirements of different chronic patients.

I wanted to make a one stop solution that takes care of everything a user needs. The idea is to enable users handle all their health-related tasks in one place.

features of chrono care

Let’s explore Chrono Care in more detail and understand how it works to cater to your healthcare needs.

Here’s how the app is made personalized to match the unique needs of users with different chronic illnesses.

onboarding 1
onboarding 2

The whole application gets personalized based on the onboarding details. The products showcased in pharmacy, the educational resources, all of them will be personalized based on the illness chosen.

The app caters to the specific needs of a wide range of users with different chronic illnesses by customizing its features accordingly.

This in turn leads to increase in user acquisition rate and Daily Active users.

Let’s take a look at the home screen of Chrono care.

Here’s how users can easily store, and access various types of medical documents involved in their medication journey.

upload documents screens.
record manager main screen.
Documents filtered using tags.

let’s closely examine the important elements and key decisions made in the Records Manager section.

The document is represented in a card like structure, let me explain the decisions taken on designing the card.

card explanation.

Another crucial aspect in this section is granting users the freedom to modify or delete records.

Recognizing that it’s humane to make mistakes, I’ve ensured that the app enables users to identify and recover from errors seamlessly.

edit or delete record.

When deleting a report, the app prompts a dialog box to the user for confirmation before proceeding.

This serves as an error prevention strategy, protecting users from accidentally deleting records.

Here is how users can track their medications.

When a user uploads a prescription, the app automatically analyses it, extracts details, and prepares the medication schedule.

Users can monitor their overall progress of multiple medications.

upload prescription.

Users can input data easily, without the need for manual analysis and entry of all medical details.

This leads to increase in Task success rate.

Now, let’s take a look at the main screen of the Medication Tracker section.

medication tracker home screen.

Medicines are sorted by time and change dynamically, making it easy for users to identify the right medicine to take at any given time.

dynamic update of timings

The app reminds when a medicine is about to run out, making it easy to reorder.

Med report and cross selling medicines.

The cross-selling feature directs users to the pharmacy section for ordering medicines, offering convenience for easy reordering.

This not only benefits users but also enhances business by increasing the order value within the application itself.

Each medicine is presented in a card-like structure, displaying all the necessary information that users' needs, to take a medicine.

Med card explanation

The cards have multiple use cases, I have covered various situations that the users might have while using the app.

Med card use cases.

Here is how users receive reminders for their scheduled medications.

The app takes full control of the screen and displays the reminder.

reminder of medicine.

I empathized with users and considered different user situations and came up with three options:

  • Take now” for immediate medication.
  • Snooze for 10 minutes” for users unable to take it immediately.
  • Skip” to provide users the freedom to cancel the medication if needed.
5-minute window.

The 5-minute window offers users flexibility, allowing them to take their time comfortably before medication.

If needed, it can be extended if needed, improving user flexibility and efficiency.

Let’s see how users can know more about their health condition and receive advice to improve their overall well-being.

Educational resources are categorized into two sections:

  • short clips
  • articles.
Education Section.

These clips, made by the app, showcase health-related content related to the user’s illness, offering tips on improving health through simple lifestyle choices.

Users find it easy to consume as it is short and trustworthy information.

It leads the users to engage more and increases the DAU’s.

Take a look at the personalized pharmacy tailored based on user’s chronic condition.

The medications recommended here are essential and widely used by patients with that specific chronic condition.

Exclusive pharmacy explanation.

The pharmacy is tailored for patients with specific chronic illnesses, emphasizing medicines related to the user’s entered condition for a personalized experience.

Exclusive pharmacy explanation.

Allowing users to cross-use documents stored in the Record Manager saves effort on manual multiple uploads, enhancing convenience for users.

This feature also boosts business by increasing user engagement, as users see it as a one-stop solution for managing everything in one place.

Here is how I re iterated on the Buy again feature after testing with users.

I added a ‘Buy Again’ section for users to conveniently reorder medicines that are running low.

Buy again feature after testing.

This makes it easy for users to recognize and reorder medicines with confidence.

Here is why I re iterated on the Add Record button in the record manager screen.

FAB change after testing.

During user testing, I noticed an issue where users were unable to add a new record. After observing multiple users, it became apparent that the Floating Action Button (FAB) with just an icon was not easily recognized.

To improve this, I redesigned the FAB in a more descriptive manner, making it easier for users to identify and utilize when adding new records.

Let’s explore some of the key decisions I made for Chrono Care.

Here’s how I took a unique approach by observing patterns from products outside my direct competitors.

shorts feature

Talking to users, I found people lack knowledge and awareness about their chronic illness and how to improve their health based on lifestyle choices.

I observed Competitors commonly educate users through blogs and articles, going deeper, I found that short, informative content works well for users and business.

I observed certified doctors on social media providing short yet informative content. I noticed people can easily grasp valuable information in a short period.

Building on these insights, I added a shorts-like feature to the app. It provides personalized content based on each user’s chronic illness.

It improves business by increasing the session length and user retention rate by making users spend more time and engage with the app.

Here’s how I empathized with users and introduced a non-conventional method to remind users of their medication.

Notify feature.

While working on the notify feature, I observed a common behavior among users when it comes to handling alarms.

Many mentioned that if they lack the motivation to get up when the alarm rings, they tend to turn it off and go back to sleep. Recognizing this pattern, I related it to my own situation.

I took an assumption that even if the app notifies the user to take the tablet, there is a possibility that the user might simply press the “taken” button without actually taking the medication.

To address this, I introduced a 5-minute window.

This allows users to get settled, take their time, consume the medication, and then update it in the app.

This ensures user commitment to medication, ensuring consistency and timely intake of medication without fail.

It would improve the business by increasing the task success rate in a more efficient way.

Here’s how I understood user requirements and tailored interactions to support them in effectively managing their medications.

In the course of medication, it’s common to either stop or adjust doses as needed.

edit and delete medication.

The edit feature enables users to modify timings and other medication details and delete if not needed.

Delete medication.

This ensures the User control and freedom by allowing users to take actions and providing an option to revert back to the original state.

It creates a safe zone and builds trust to the user.

Let’s explore the visual elements of Chrono Care in detail.

I created various components throughout the process and documented them in three categories.

  • Basic components
  • Molecular Components
  • Components with variants

Basic components are common visual elements that are used throughout the project.

basic components.

Molecular components and variants combine individual elements to create a unique design element.

molecular components.
Components with variants.

Let’s check out the different colors and text styles used in Chrono Care.

color styles.
text and effect styles.

Take a look at how my tool skills helped me create scalable and efficient elements in the project.

med card properties.

I used the tool’s component properties to design the medication card in a way that makes them easily modifiable.

This ensures that the cards are easily modifiable, contributing to an efficient and scalable overall design process.

Record card properties.

The card representing the uploaded document is designed for easy editing of all details, making it versatile for multiple use cases.

This contributes to a scalable and efficient process.

Here’s a sneak peek into the delightful chaos I created in the name of prototyping😅

Prototyping involved.

Here’s how I’ve designed for various use cases, catering to both new and existing users.

Use case 01: Home Screen for new and existing users.

use cases of home screen

For an existing user, the progress indicator section effectively presents all necessary information about the next medication.

It allows users to easily know the upcoming medication without the need for multiple clicks.

This builds user comfort and trust, contributing to higher user retention.

Use case 02: Uploading a new record.

In the Record Manager section, tags play an important role in categorizing documents, making them easily accessible.

Tags use case.

While users have the freedom to input their own customized tags, the app also recommends tags for user convenience.

Let’s deep dive into my design process in crafting Chrono Care.

To start with, the process was non-linear, involving multiple iterations in both decision-making and design.

Let me walk you through the work the work and key design decisions that shaped the product.

After getting my problem statement, I made an initial hypothesis based on some secondary research on looking to other existing healthcare products and learnt more about chronic illness and chronic patients.

This was the initial macro flow; I came up with

initial macro flow.

With initial hypotheses in hand, I started talking to people to learn more about chronic illness and how they cope with it.

My main focus was understanding the day-to-day experiences of individuals and with chronic conditions and their primary caretakers.

I made some initial preparations and prepared an interview questionnaire for speaking with users.

Interview questions.

These questions helped me to establish the context and helped to gather more insights, even though I had prepared my questionnaire, my interviews went with the flow of having a casual conversation.

user 01
user 02

These are some of the insights, I derived from the conversation I had with users.

I decided to prioritize among all the insights present based on my time and knowledge constraints.

I talked to 2 more users, but unfortunately, I couldn’t take any pictures.

Talking to users changed my entire perspective on the problem.

  • Hearing their personal stories of being primary caretakers, managing medical reports, and handling expenses provided valuable insights into the challenges they faced in their journey.
  • Their experiences significantly influenced my thinking. As someone with no prior experience in dealing with chronic illnesses, my understanding was initially limited to secondary sources.

Talking to users helped me understand the seriousness of the problem, leading to many eye-opening insights.

Let us look at how speaking with users changed my perspective and made me re iterate on the whole flow.

Here’s the iterated macro flow after talking to users.

final macro flow.

After establishing the macro flow, I delved into the micro details, putting myself in the user’s shoes.

I started noting down what the user does, thinks, and feels under each section of the macro flow.

journey mapping.

This way empathizing with users and documenting what would they thinks, feels and does, is popularly known as journey mapping.

Following that, I translated the insights into user stories.

User stories makes the insights more structured and helps determine on what to prioritize.

I did this process for each section in the macro flow, which got me a clear direction on how to proceed with designing the screens for the app.

Here’s how competitor apps played a pivotal role in shaping the design of Chrono Care.

In a sensitive domain like healthcare, it’s crucial to understand how competitors operate, not just from a business standpoint but also from a design perspective.

I began observing various direct competitors such as

  • Pharm Easy
  • Tata 1mg
  • Apollo 24/7
  • Flipkart Health+
  • Pillo

Indirect competitors like

  • YouTube
  • Instagram.
mood board

I began identifying patterns and understanding how competitor apps functioned for both new and existing users.

These observations served as valuable insights in building my product.

Here’s how paper wireframing helped me transition from ambiguity to clarity in the whole journey.

paper wireframes.

When I think of a screen or a flow, I jot down the essentials on paper and sketch the initial screens and iterate on it as needed.

After achieving clarity on paper, transitioning to digital screens becomes easier.

Despite encountering new things while making digital screens, this approach saved a lot of time and facilitates a smooth transition from ambiguity to clarity.

What’s next for Chrono Care

There were certain aspects I had to leave due to time and knowledge constraints.

Here are some key elements that would be considered in the next iterations:

  • Addressing Medical Emergencies: In one of the interviews, a user highlighted the challenges of booking an ambulance and the difficulties in finding one with the necessary facilities for the patient.
  • Managing Multiple Profiles: Another use case involves the need to manage multiple profiles. even though I initially planned for this, I wasn’t able to implement it due to time constraints.

Take a look at the key learnings I had throughout the process.

  1. Importance of getting clarity on paper:

Paper wireframing is a powerful method to move from ambiguity to clarity. In the initial stages, with a lot of ambiguity, I started putting ideas on paper, which helped me gain a clear understanding of my approach.

It’s simpler to iterate on paper than on a screen.

2. The impact of using a design system:

This is my first time using a design kit for a project, and the design system saved a lot of time and effort for many elements.

3. Impact of user interviews:

The user interviews were crucial in shaping Chrono Care. Before them, my understanding relied on facts and data from secondary research. However, engaging with users brought about a significant change in my perspective.

It enabled me to relate and empathize, ultimately providing deeper insights into their experiences.

4. Prioritizing what to Test:

User testing is crucial yet challenging. Through experience, I realized that we get answers only when we ask the right questions. It’s essential to prepare what to test and determine how many people to test with.

5. Acknowledging Technical Constraints:

I’ve also come to understand that it’s acceptable if something is not fully grasped by the user, as technical constraints may limit complete understanding.

In my case, I faced challenges in getting accurate feedback on tags because I couldn’t fully convey my imagination in Figma.

Thank you for taking the time to read my work, and I hope you found it engaging and informative. 💡

Also do let me know if anything could be improved, or just any general feedback for me is very much welcomed 📭. you can let me know by commenting 💬 or connect with me on LinkedIn

I would like to express my gratitude to my mentor, UX Anudeep for his guidance and support throughout this project.

I would also like to thank my friends and my amazing team for their unwavering support and being an integral part of this journey. 💜

--

--