CareCircle: Improving the way we provide care
What is CareCircle?
CareCircle is a connective communications app that works to improve the way information about a patient's chronic disease is shared with those they feel need to know the state of their health. This can be difficult because most users with a chronic disease can feel overwhelmed by the amount of information they need to track so it can be hard to tell the important people all that they need to know about themselves.
I adopted user-driven research to map out where people were having problems in this area and try to find some of the challenges that this idea would have, I then moved on to working with users that fit our demographic to narrow down what was most important for the app to function well for every use case.
I worked on all the User Research, Evaluation, UX/UI Design, and User Testing involved throughout the design process of CareCircle.
Phase 1: Beginning research
Starting out my idea was solely based on kidney disease patients and their needs. The secondary research led me to the realization that CKD (chronic kidney disease) patients had a lack of apps in the spaces concerning social connection, managing medications, and maintaining relationships with healthcare providers.
After performing initial research online I created a survey to gather more information. The majority of my responses concerned diseases other than CKD but shared the same problems I found in the beginning. So I adjusted my idea to include all chronic diseases instead of just CKD.
Phase 2: Interviews and synthesization
Starting off I found 5 users to interview from my surveys which consisted of 2 caregivers, 2 patients, and one person who was both a caregiver and a patient. These interviews led me to the following insights:
I used those insights to create an affinity map that divided the findings into the most basic categories: symptoms, tracking, communication, and medications. Tracking and Symptoms were by far the largest in the affinity map showing me a large pain point in how information the users generate is tracked followed by communication of that information to various individuals, namely: Patients, Doctors, Family members, and Pharmacists.
From this, I generated empathy maps and user personas to help drive the rest of my design process. The majority of our users will be an older demographic as chronic conditions will usually develop as people get older, younger people are not exempt from this but the numbers will be much lower, and will be more likely to be caretakers.
These empathy maps and user personas allow me to see what is important to the people in my user space and give me insight as to how they would feel about problems we uncover.
By looking at our empathy maps and comparing them to our personas, I asked myself what are the most important questions to answer? What are the things they want to be improved the most?
Eventually, I came up with the main three problem statements that we needed to answer.
1. How might we Improve the way our users track their symptoms and information?
2. How might we improve communications between users in a care group?
3. How might we promote the visibility of tracked information?
Phase 3: Starting design
After making the “how might we” questions we can finally start to put a physical design to this idea. I started off by generating some possible solutions to these questions like:
A simplified UI or version for tech-challenged users
Information tracked is shared with selected individuals
Profiles can be made with caregiver, patient, and care-team tags
Graph the information
Divided into filterable timescales (day/week/month/year)
Show older information as well as new
Putting myself into the mind of our personas I started making some user journeys and outlining the basic information architecture. Users were most interested in tracking information, visually checking that info, and sharing tracked information.
Taking into mind that a good majority of our users are older, the app also needed to be as simple as possible. To achieve this I worked out a very shallow information architecture that would accommodate the ability to get to any part of the app within 3-4 selections.
This allows for even technologically challenged individuals to have less of a problem finding the areas of the app they are looking for.
Phase 4: The Foundation and Wireframes
Now that I had the soul of the design I needed to give it a body. The red routes provided the skeleton, the important stuff that the app needed to have to function at all.
The red routes are:
Adding daily information
Adding/viewing care team members
Taking/adding a medication
Adding/viewing appointments
I took some basic outlines of a phone and started sketching. Once I had a few ideas on paper I chose this basic design with the feedback of two family members who fit within my user space. I liked this design because it worked towards the goal of being easy to use for technologically challenged individuals, by using large easy to understand icons, big text, and simple linear flow.
I took these sketches and used a web application called Pop! By Marvel, I made it into a showable working “prototype on paper”. The app now had some muscles to help it move around and function on top of the red routes skeleton.
Using this prototype I was able to conduct some usability tests and see what people thought of the initial idea. I met with 5 different users and assigned them some basic tasks designed to get them to navigate throughout all the areas of CareCircle so I could see how they interact with the app as a whole.
This usability test gave me a lot of insight as to what I could improve moving forward on the actual wireframes of the real thing.
My initial idea of having people select whether they were a patient or caregiver before login was confusing and didn't need to be there, instead could just be handled behind the scenes.
Medicine sliders having two sliders made them too confusing as to whether or not people had actively taken something or not.
Profiles in the app were hard to find and needed something to differentiate them like adding color to the names.
And basic changes to usability like making the entire profile widget a button to click on to access the profile
My users were otherwise very pleased with how straightforward and easy the user flows were laid out and felt the app was very easy to understand as to its use and purpose.
After knowing that users appreciate my user flows but that functionality and aesthetics needed tweaking I moved on to refining what everything in the app should look like and converting everything off my prototype on paper and into a proper design program like Figma.
Phase 5: UI design
We have a soul, skeleton, and even some muscles on the design to make it function now to give it that outer layer of skin to make it aesthetically pleasing. First, I had to ask what mood the app needed to have and how to get that across using only design and colors. I knew it needed a medical feel to it so I decided to start at the source and went to a hospital and took note of what I saw in the colors there to help choose what I needed for my mood board.
CareCircle needed to have an overall medical feel but also to promote a friendly atmosphere. So I used the basic colors that I found in most hospitals and chose a font that had an easy-to-read bold text and a friendly tone to it named Open Sans.
Further refining how CareCircle should look I made this style guide to help provide guidance and rules to how elements should look and function while designing the app. This was to help keep from straying too far from what I found was important to our users.
Phase 6: Prototype testing
These steps led to the creation of our first real prototype, CareCircle was finally more than just an idea.
The creation of these new wireframes allowed us to address the previous concerns that had come up in testing and add the mood and style that we wanted it to have. Now we could move on to testing using the new much more interactive wireframe and could get a much better idea as to what users thought of the app.
My first round of testing was performed with 5 more users and revealed many things I hadn't considered on my own. Mainly issues with the traversal of the app but also had some aesthetic tweaks around making certain portions of the app more clear as to their use. I took these usability issues, made a chart of their priority, and started adjusting the app to fix these issues.
The main problems were the traversal of the app and I still hadn't added enough color to the app to make it feel friendly enough and not just clinical in nature. There were also elements of the app that needed to be highlighted more or felt like they weren’t a clickable button. There were also a few minor fixes like making the back arrow easier to click and giving the icons on the home screen a revamp and some color.
After applying these fixes the app started looking a lot more like a final product.
I then did another round of testing and found that my users liked the new changes were well-liked and that they had fixed most of the previously found problems. The switch from daily, weekly and monthly information was still unclear however was easier to find than before. However, the new users found other issues that the previous users did not, such as questions about how the medication would handle multiple doses and confusion over what happens when the medication slider is marked as taken. When these issues were found I made a quick adjustment to show the count of the medications and planned to add a multiple-dose medication so I could showcase that use in further iterations.