Caregiver App Case Study

Project Overview

A UI/UX design team is creating an app for caregivers to help provide better care and understanding of ailments for their patients. In this project, the design team creates four pages: the patient portal, community, notes, and medication tracking pages. These four pages represent the minimum viable product that is essential for the foundation of the mobile app. It showcases the necessary tools that a caregiver needs to manage, understand, and care for their patients.

Timeline

Week 1: Analysis of previous user research and conduct competitive analysis
Week 2: Userflows, sketches, and guerrilla usability testing
Week 3: Style guide and designing high fidelity mockups
Week 4: Complete high fidelity mockups, conduct usability testing, and iterate

My Role

Design the medication page. Other tasks involved heuristics, userflows, sketching, mockups, prototyping, usability testing, and presentation.

Week 1 – User Research and Competitive Analysis

In this project, the stakeholder previously had a UI/UX design team that conducted user research and designed wireframes. The stakeholder addressed that they wanted to have an entirely new design and high fidelity mockup in 4 weeks for the current UI/UX design team. Therefore, the UI/UX design team and I decided to use the previous user research and conduct new competitive analyses in order to have time to build a high fidelity mockup.

Previous user research

A survey was conducted to identify the target audience for the potential product. Twenty-nine participants from both the United States and Canada answered the survey and revealed the following findings:

1. 31% were 25-34 years old.
2. 37.9% were 50-64 years old.
3. As a caregiver, 100% of the participants classified themselves as someone who is taking care of a family or loved one.

Major findings from the previous research:
1. Participants, as caregivers, worry about how their decisions could affect their patients
2. Interested in finding courses or a community that could support them become better caregivers
3. Want to better understand their patients’ vitals

Persona and empathy map

The empathy map and persona were also created by the previous UI/UX design team working with our stakeholder.

In terms of managing medication, our prospective users wanted to:
1. Better understand the medication they are giving their patients
2. Have a tool to keep track of all the medication that their patients have
3. Be reminded about when their patients need to take their medication

Heuristics

Based on the empathy maps and persona, I wanted to look at three elements from competitors to help create designs that would allow the users to better understand medication information, management, and reminders:

1. User control and freedom
2. Recognition rather than recall
3. Recognize, diagnose, recover

A few common findings from my heuristics include the lack of pictures, or icons, being used to help users recognize medicines quicker, and the inconsistent use of UI elements to help users fix their mistakes when inputting data.

Minimum Viable Product

Patient portal, community page, medication tracker, and notes page.

Week 2 – Userflows and Sketches

With my heuristics in mind, I started creating a userflow that focused on how a user could view a list of medication for a specific patient and add a medication with a corresponding reminder.

Userflow

Sketches

Due to our time constraint, the team decided to sketch our individual pages, move directly into creating our style guide and designing our high fidelity mockups.

Week 3 – Style Guide and Begin High Fidelity Mockups

Week 4 - Prototyping

View prototype Watch video

Week 4: High Fidelity Usability Testing and Iterations

In order to make sure my high fidelity mockup of the medication page was optimal, I tested my mockup with three participants. Based on the participants’ feedback, some adjustments could be made to help notify the users about what medication was added and help users learn how to access other features.

Add a notification that tells the user a new specific medication has been added.

Add a delayed animation to let users know how to edit an entry.

Specify the reason for medication by replacing the word "medication" with the actual medicine entered.

Lessons Learned

As I wrap up my last design project as a UI/UX design student, this industry design project allowed me to work with a real client and design team under a real timeline of four weeks. I learned that building multiple pages for a product with a team required a lot of coordination, organization, and communication. Designing and creating the pages was one task, but finding consistency in the UI, diction, and the overall aesthetic of the product was a difficult aspect of the product design. Nonetheless, the team communicated closely with our stakeholder, and they felt that they were given a clear direction in order to pursue their entrepreneurial endeavors regarding the development of the app for caregivers. This experience would always be a reminder that UI/UX design requires proper communication between the team and stakeholder, so that a clear understanding of the developing product is envisioned.