A fertility center supporting infertile parents 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:
Identify 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:
Reduce the Staff’s Effort in Notifying Patients
1. Overview: Notification Management
Staff can send notifications to patients individually or all together.
Staff can select from preset messages or customize messages based on different scenarios.
Staff can view the sending history and check if the receivers have read the notifications. They can also filter the unread notifications and resend them.
2. Preset Messages
Staff are able to preset frequently used messages for common scenarios and customize them for special requirements to save time.
Design Iteration:
Optimize 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:
Access their past notifications
Check real-time appointment status
View and manage appointment information
Access their examination reports
Find clinic information
Stay updated with news and announcements
Design Solution:
Clear & Intuitive Access to Different Information
Notification List
Users can read the messages in the notification list.
Examination Report
Users can access to their examination report through the app easily.
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.
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.
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.