Mobile app for caregivers
*Due to an NDA, details on this project are limited.
Role UX/UI Designer
ScopeRevision Sketches, Wireframing, Information Architecture, Prototyping, UI Design, User Testing, High Fidelity Mock Ups
ToolsFigma, Miro
Duration5 weeks
The Problem
Caregivers who spend time daily taking care of or coordinating care for people with a degenerative health can experience feelings of discouragement, the challenges of changing relationship dynamics, tracking responsibilities all while struggling to tend to their personal mental and physical health.
The Solution
CARE is a mobile app that will help caregivers manage care for their care recipient as well as to track personal data on their own health. CARE also helps users find educational resources and provides a space for users to connect with others and gain inspiration, to help reduce feelings of isolation.
My Role
I was brought on as a UX/UI Designer when the primary and secondary research, personas, information architecture, and wireframes had already been completed. My role was to fine tune the IA, create revision sketches and wireframes, write a usability testing script, establish a UI design system, and finally design a high fidelity prototype for developer hand off.
DISCOVERY PHASEReviewing Existing Research
My first day of this project consisted of reviewing the primary and secondary research the company had. They had landed on four different personas. All personas were ages 60+ and the key differences were where they ranged on the following:
Feeling supported by a community vs isolated
Focus on their personal needs vs needs of their care recipient
The company had an existing MVP in mind — a mobile app with five major features. Reviewing the provided HMW statements from the company helped me understand what the business goals were and pain points that users indicated.
Caregiver's Wellbeing : HMW enable caregivers to care for themselves quantitatively and qualitatively?
Care Recipient’s Health: HMW enable caregivers to track the health of the person they are caring for? (ex: observed behaviors, possible triggers, day, mood, diet, sleep etc.).
Social Community: HMW encourage positive interaction amongst caregivers on the platform?
Education on Dementia & Caregiving: HMW organize education content for easy searchability of relevant info?
Daily Inspiration/ Motivation: HMW positively orient caregivers everyday
Plan
There were some sketches and wireframes that the company had, so my team and I started commenting on areas in each red route that seemed confusing and that seemed to need some iteration. We assessed what we could do and mapped out a project plan, to ensure we could submit all deliverables on time, which we presented to upper management and other stakeholders.
Since I was on a team with three other product designers, we chose to split our focus and each take the lead on a specific feature of the mobile app. I took the lead on the community feature and building out the UI design language.
Identify the problems
The existing Community flow wireframes were a bit confusing in regards to the visual hierarchy. Navigation elements were not organized in an intuitive way and there needed to be more negative space. Also, the existing design did not address the HMW question: “HMW encourage positive interaction amongst caregivers on the platform?”
After doing crazy 8s for each of our flows, we then voted on areas that seemed to be the best revision sketches for our screens.
DESIGN & TESTRefine Wireframes
After landing on sketches, my team and I were able to vote on aspects within our design that seemed to best resolve previous design issues. We then moved on to creating wireframes that we could present
Mid Fidelity Design
These were the designs that would be used during the usability tests. It would be a clickable prototype without UI elements. Designs were in greyscale and most assets and fields were left blank.
Usability Testing
Users were procured by the Project Manager who had a list of caregivers. This time there would be 5 participants in the usability test. I wrote a script as well as tasks for users to complete.
Questions on sentiments:
How do you feel about sharing a bit about your interests in the beginning of the onboarding flow? What other information do you think would be helpful to share in order for you to be connected to the right people?
How comfortable do you feel turning on your location and privacy?
How do you perceive suggestions to connect with someone, especially if they are people that are similar to you? Is this helpful?
Questions on design aspects:
Is it clear when you get a message notification in the Community flow? Are you inclined to check it?
How do you feel about the differentiation between profile / account settings screen vs. public profile screen.
Findings
More research needs to be done in order to successfully implement the community aspect, as there are already well-established social outlets of support for caregivers.
Ideate and test the exact interactions users would be participating in on this social platform
“I’ve learned that in a large FB group you could have 8000 people but only 20 people are regular posters. But some of the posts could still be useful.“
I did go to the dementia-get-together group, but I felt overwhelmed and stopped going [because other caregivers would share more of painful stories that affected me negatively and would rather make me feel low].
Create trust with users by presenting them with the feature only in the next iteration
“My only concern is off-the-wall people: you should be screening for lone wolfs”
“Well it depends on how “big” it gets, I want privacy. I don’t feel comfortable with a public profile.”
Integrate established socialization methods in-app (convenience over everything)
“Memory cafe. They socialize with snacks. PLWD and caregivers socialize with each other in the event.”
“My support system is my faith, my 40-year best friend - my husband, Jill (caregiver coach) and her team.”
ESTABLISH UI LANGUAGEStyle guide
Since our product would be used by people over the age of 60, it was crucial to make sure the UX/UI would be accessible for users in that demographic such as: bigger fonts, less text per screen, more negative space, easy to identify CTA buttons, clear success states, and more simple UI elements such as horizontal scrolling over vertical scrolling.
I did more secondary research to understand the general sentiments users would have towards specific colors, contemporary UI design styles. It was important to meet WAG 2.0 standards — taking into consideration higher rates of color blindness and poorer vision. It was clear that we needed a high color contrast ratio and bigger text sizes to ensure legibility. From my research, I decided san serif typefaces were easier to read and I wanted to ensure that the typeface was not too narrow.
Moodboard evokes the keywords from the research:
Trustworthy
Caring
Guiding
Soothing
Efficient
Personalized
This moodboard captures the feeling of a new beginning. An inspiring, but stress-free journey. The warm colored images evoke a sense of care, growth and progression. The cooler toned images portrays soothing elements evokes confidence, calmness and inner peace.
The Noto font. It was similar to fonts well received like SF and helvetica, yet it had a slightly lighthearted element to it, which I hoped would evoke feelings that are a bit more uplifting.
The primary orange and blue colors were picked as they would still be visible to those with color blindness. Our design language complies with WAG 2.0 standards.
Orange - invigorating, confidence, courage, strength and cheerfulness
Blue - evokes trust, loyalty, dependability and inner strength
PROTOTYPE
Final mock up
FINAL THOUGHTSWhat I learned
Our deadline was pushed up a week so my team and I had to revisit our project plan, identify areas we could cut down and then communicate to stakeholders the altered timeline. Due to our limited timeline, the high fidelity design had to be handed off before we could implement all findings from the usability test.
I learned the importance of aligning expectations and navigating conversations in a tactful way. I’ve also learned I may need to compromise from the ideal solution when encountering real world constraints.
In the future
If I could do anything differently, I would spend one extra week doing primary research and establish an MVP, so we could have more supporting data to support our design. The information that we were provided from the user research did not seem sufficient. I would then take an extra week to create high fidelity designs implementing insights from the round of user testing with the clickable prototype.