03

Fertility Center App+CMS

How might we streamline notification process for clinic staff and provide patients easy access to information and services?

My Contribution

Stakeholder Interview / Information Architecture / Product Design / UX Design / Design System

Project Type

Custom Project @ Spark Technologies Inc.

Team

1 Project Manager, 1 Frontend Developer, 1 Backend Developer, 2 App Developer

Timeline

6 weeks

Project Goal:

Improving Patient Outreach and Information Access

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.

Task analysis for each scenario
Design Solution:

Reduce the Staff’s Effort in Notifying Patients

1. Overview: Notification Management

  1. Staff can send notifications to patients individually or all together.
  2. Staff can select from preset messages or customize messages based on different scenarios.
  3. 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.