Craft a new feature for a B2B2C mobile app to decrease time spent by long-term care nurses communicating with the primary family caregivers of elderly residents.
My Role
UX/UI Designer
Team
3 UX/UI Designers
1 Project Manager
Tools
Figma/FigJam
Slack
Google Suite
Timeline
Nov. 2023 - Jan. 2024
On average, nurses care for nearly 6-8 elderly residents at a time and communicating with their caregivers on a daily/weekly basis. This arduous process and the unique communication challenges that older adults pose to healthcare staff can delay nurses from completing their daily duties.
Based on S.I.T.'s current mobile app screens and provided user stories, my team and I were tasked to design high-fidelity screens for a new messaging feature called Daily Update.
I led my team to conduct a comprehensive competitive market analysis to identify potential competitors and examine how caregiving apps approach communication features. This allowed us to craft user flows that built upon the constraints of the new feature set by the client and improve user navigation throughout each screen.
From there, we designed user-friendly UI screens that implement interactive elements like emoji illustrations, checklists, and premade messages to facilitate faster communication.
As the team lead of this project, I scheduled our first meeting through Zoom so everyone could introduce themselves, discuss our understanding of the project brief and the provided user stories, and draft a questionnaire of inquiries regarding the Daily Update feature.
To better understand the feature we were designing, my team and I outlined questions regarding the client's business goals, potential competitors, and essential functions of the Daily Update feature.
Seniors in Transition's primary business goal is expanding its services to other cities within the U.S., namely healthcare facilities, as it seeks to gain more users.
Companies like Caremerge and Cliniconex are direct competitors that utilize similar messaging capabilities the client would like to see emulated into the new feature.
This iteration of the Daily Update feature will solely focus on the nurse's perspective as they're the only users authorized to input patient-related information.
The client requested illustrated emojis and premade/template text messages to be incorporated to streamline the communication process.
Although the client identified two direct competitors, my team and I were unable to access their platforms due to demo scheduling conflicts that overlapped with our deadlines. After discussing this challenge with the client, we agreed to broaden our competitive analysis to include five potential competitors within the caregiving and medical space. This allowed us to gain a deeper understanding of industry approaches to messaging features.
The majority of our rivals have limited their messaging functions to interactions among medical personnel only, or brief messages dispatched by staff to a resident's main caregiver for their awareness.
Typically, graphical elements, like icons and illustrations, are used for interactive buttons in recording patient health information.
The user interfaces of each app look outdated despite receiving timely updates as recent as a few weeks or months.
With the competitive market analysis completed, my team and I moved forward to turning the following user stories into comprehensive user flows:
As a user, I want to be able to access the messaging feature from within the app.
As a user, I want to send an update to a family member of a patient in my care. I want to be able to access predefined messages based on the emoji I select.
We collaborated with the client to determine six essential screens based on the existing architecture of the S.I.T. mobile app, competitor app screenshots collected during the Discovery phase, and the feature's product requirements. These screens were designed to guide users through initiating the process, entering patient information, and sending the Daily Update message.
With the six key screens identified, I designated two screens for each team member to construct low-fidelity wireframes in Figma. I assigned myself to craft the following two screens for the new feature:
Screen 1: Select a Patient's Mood and Reason(s) for Mood.
Screen 2: Log the Patient's Activities and Select a Premade/Custom Message.
I designed the screens with a modal design to allow users to quickly complete and send their updates. I initially assumed the feature's functionality wouldn't be too complex to display on a modal, deeming a full-screen design unnecessary.
Upon receiving feedback from my team, our project manager, and the client, I realized that my initial approach to these screens had several usability challenges:
The horizontal scrolling to view and select a mood emoji added unnecessary friction, making the process slower than intended.
Varying amounts of content and interactive elements would result in inconsistent modal sizing, causing the container to expand unpredictably across different steps.
The limited space for premade and custom messages reduced readability, as the anticipated text lacked adequate room and line spacing for clarity.
Initially, I assumed the feature’s functionality wasn’t complex enough to require a full-screen design, making a modal seem like a sufficient solution. However, this feedback helped me reconsider my approach.
Expanding the Modal to a Full-Page Experience
After receiving constructive feedback from my team members and researching modal UI design more, I elected to remove the modal design and expand the Daily Update screens to fit the device's frame.
Through this change, I was able to accomplish the following:
Vertically display mood emojis to reduce user scrolling, compared to the previous horizontal scroll that cut off 4 out of the 8 mood emojis.
Improve information architecture, visual placement, and spacing of interactive UI elements.
Maintain UI design consistency with the mobile app.
Before we crafted the style guide, we created 3 different versions of the first page of Daily Update feature for the client to choose to define the feature's design language. I instructed my team to iterate this page specifically because I assumed, based on our user flows, that users would interact with this page the most.
We focused on only iterating the interactive UI elements, such as the mood emojis and button fill colors, to avoid overhauling the app's established design, increasing the project's scope, and the development team's workload.
Why the Client Chose My Iteration
The new mood illustrations retained the expressive quality of the original emojis.
The colors were adjusted to align with the company's brand identity.
The illustrations are sourced from a commercially available, free emoji pack, ensuring legal and flexible use.
This decision was crucial due to challenges with the original assets, which were only available as PDFs, making edits difficult and risking quality loss.
To address this, I proposed replacing the originals with new emojis, giving the team versatile design assets for high-fidelity wireframes. The client valued my proactive approach and approved my iteration.
Once the client reviewed and approved the UI Iterations, the next step was to create a comprehensive style guide to outline S.I.T.'s branding and design principles. The client stated at the beginning of the project that this resource wasn't available, so we made extensive notes on the design language of the app and website to serve as a reference.
During my evaluation of the S.I.T. website and app, I identified two critical design inconsistencies:
The fill colors for both the CTA button's container and text failed to meet the AA and AAA contrast ratios.
The website and app used two different fonts, creating visual inconsistency across both platforms.
These issues were essential for my team and I to address as they violated accessibility best practices and could negatively impact the user experience.
Solutions Implemented
After discussing these concerns with the client, my team and I proposed solutions:
A darker teal fill color for the button container to achieve a 7:1 contrast ratio.
Applying the website's font, Quicksand, as the main font on both platforms and to be used for all text elements.
Following an additional round of refinements, the client approved our updates and allowed us to finalize the style guide and move forward.
With the brand guidelines finished, I led my team to finish transitioning the mid-fidelity wireframes into high-fidelity. During this process, we strictly followed the style guide to ensure that all screens were designed consistently and that the new UI elements reflected the newly refined color palette.
Before we delivered our work to the development team, my team and I crafted a developer handoff document that detailed the workflows, functions, and size and spacing specifications of each UI element in the high-fidelity wireframes.
This was done to add more context to each screen to help alleviate potential confusion the development team may experience during the building process.
Leading this project was a wonderful experience as the challenges I faced honed my leadership skills and refined how I communicate with stakeholders and manage project deliverables. While there's still more work to be done with the new Daily Update feature, I believe that our work here is a great first step at alleviating the exhaustive communication process between nurses and the families of their elderly patients.
Designing high-fidelity screens without access to users will always be a huge hurdle to overcome. For Seniors in Transition, this was especially daunting because possessing user data would've better elucidated the needs, goals, and frustrations of nurses responsible for monitoring multiple elderly patients.
Despite being devoid of those essential insights, I led my team to conduct secondary research and market analysis to better comprehend the caregiving industry. This effort allowed me to shape a fundamental basis for the Daily Update's messaging capabilities and further build upon it according to the client's expectations.
If I were to continue working on Seniors in Transition, then the next steps would be:
Create a high-fidelity prototype.
Conduct one round of moderated usability tests with 4-5 participants.
Redesign the UI according to key insights gathered from user feedback.
The Daily Update's current iteration would benefit from a focus group of employed nurses because their feedback would enlighten the feature's practicality and effectiveness in reducing the time spent communicating with their patients' family caregivers. I would highly stress the tests be moderated as the feedback gained from 1-on-1 interviews can help us further empathize with the nurses on their frustrations, goals, and needs as opposed to feedback given in unmoderated usability tests.
