Fertility Center App+CMS
Streamlining notification process for clinic staff and providing patients easy access to information and services
Project
Custom product design project for a confidential client of Spark Technologies Inc.
My Contribution
UX Design
Information Architecture
Stakeholder Interview
Team
1 Project Manager
1 Frontend Developer
1 Backend Developer
2 App Developer
Timeline
Nov – Dec 2021 (6 weeks)
Project Goal:
Improving patient outreach and information access
Our client was a fertility center supporting infertile parents. They aimed to improve communication with patients, who were contacted manually for appointment updates, payment reminders, and schedule changes. To streamline communication and provide easy access to information, the project aimed to develop a mobile app and its content management system (CMS) for real-time, transparent interactions between the clinic and patients.
Design Overview:
Streamlining notification process and provide easy access to information and services
The CMS design streamlined notifications for clinic staff, while the mobile app provided patients with easy access to information and services, enhancing communication and efficiency at the fertility center.
In this project, I designed a mobile app and the CMS end-to-end. I interviewed the stakeholders in the clinic, defined information architecture, and led the design of the whole system, including the design system and guideline.
CMS Design:
How might we send notifications for different scenarios efficiently?
User Architype:
The Busy Clinic Staff
The clinic staff had to call each patient individually to provide notifications for various situations, which was very time-consuming. To streamline this process, we decided to enable them to send preset notifications directly through the CMS.
User Research:
Identifying the Common Scenarios for Sending Notifications
Through stakeholder interview, we identified several scenarios that the staff need to notify the patients:
1. Appointment Management
Appointment order often deviates from registration numbers due to unforeseen circumstances. This leads to inaccurate wait time estimates for patients and requires staff to manually call each patient when it’s their turn.
2. Payment Reminder
Despite reminders from the clinic’s staff about the annual embryo preservation fee, patients often forget to pay. Staff members had to make individual phone calls to remind patients, which was time-consuming and inefficient.
3. Blood Draw Schedule Changes
Occasionally, the clinic needs to alter the blood draw schedule due to unforeseen circumstances. In such cases, they must promptly notify all patients scheduled for blood draws.
4. Other
The clinic occasionally needs to notify patients about temporary changes in hours, special events, or other matters. These notifications are irregular and their content varies each time.
Design Solution:
Reducing the Staff’s Effort in Notifying Patients
After identifying common scenarios for sending notifications, I mapped out user flows for each to find patterns and spot differences. I learned that filtering recipients was key to efficiency, and using preset messages could save time on typing.
1. Quick Switch Between Each Scenario
Instead of manually filter recipients from the full patient list each time, I put quick links for each common scenarios in the side menu to streamline the process.
2. Notification Management
Clinic staff can send notifications by selecting recipients, choosing a preset message or typing a custom one, then clicking the “Send Notification” button. They can also view the notification history, check if recipients have read them, and filter unread notifications for easy resending.
Design Iteration:
Optimizing User Experience on Tablets
From the stakeholder interview, we learned that staff use tablets to manage online services, so we needed to ensure the onscreen keyboard wouldn’t block critical content.
During wireframing, I experimented with different layouts to maximize visible content when the keyboard appeared. Initially, the message area was fixed at the bottom of the page, which obscured the receiver list while typing. After several iterations, I moved both the receiver list and message area to the right sidebar, allowing more information to remain visible.
App Design:
How might we provide patients with easy access to various types of information and services?
User Architype:
Patients who Need Access to Various Types of Information and Services
Patients need timely information, efficient appointment management, and easy access to their medical data. Specifically, they need to:
- View and manage appointment information
- Find clinic information
- Access their examination reports
- Check real-time appointment status
- Stay updated with news and announcements
- Access their past notifications
Design Solution:
Clear & Intuitive Access to Different Information
Making Appointments
Users can make appointments through the app. If they make appointments through phone or the clinic’s website, their appointment information would also be displayed in the app.
Appointment Information
Users can check the information of their appointments or cancel appointments through the app. Before going to the appointment, they can also track the real-time queue status.
Clinic Information
Users can find the information about clinic locations, doctors, and visiting hours.
News & Announcements
Users can be updated with the latest news and announcements of the fertility center on the app.
Examination Report
Users can access to their examination report through the app easily.
Notification List
Users can read the messages in the notification list.
Design Approach:
Aligning Features with User Needs Through Visual Communication
To clearly understand user needs and priorities, I created a functional map to outline essential features and analyze tasks. This diagram facilitated discussions with the project manager about key functions, content, and data sources.
Next, I developed a simple UI flow to clarify user journeys and content mapping. The flowchart helped verify content with the client, while the project manager used it to discuss data sources with the app developers.
Finally, I created wireframes to refine the information hierarchy and layout, ensuring a user-friendly experience that aligns with the project’s objectives.
