03

Fertility Center CMS

How might we streamline patient communication for clinic staff?

My Contribution

Stakeholder Interviewing / User Flow / 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

Background:

Easier way to connect patients and the clinic

The client of this project was a fertility center, which helped infertile parents to have babies with their high-tech equipment, professional diagnosis, and kind care. In this project, we made a mobile app for the clinic’s patients and the app’s content management system (CMS) for the clinic.

Our goal was to build a closer connection between patients and the medical institution. We provided patients with a convenient way to make appointments and easy access to their examination reports. We also let the clinic communicate with its patients through customized notifications and health education blog posts.

Challenge 01

Let patients receive real-time messages while reducing the staff’s effort in notifying patients

User Needs A:

Patient's Needs

Appointment Queue

Since the appointment order may differ from the registration numbers, patients could not estimate the waiting time and had to waste a lot of time waiting at the clinic.

Payment Reminder

Even though the clinic’s staff will remind patients to pay the annual embryo preservation fee, they tend to forget it easily.

Design Solution A:

App Design: Real-time Notification

Real-time Notifications

Receive real-time notifications about the appointment time

Notification List

Read messages in the app if app notification is turned off

User Needs B:

Clinic Staff's Needs

Appointment Queue

The order of appointments may not follow the registration numbers because of unexpected situations, so the staff needed to call the next patient manually.

Payment Reminder

When reminding patients to pay the embryo preservation fee, the staff needed to make phone calls one by one, wasting a lot of time and effort.

Design Solution B:

CMS Design: Intuitive Notification Management

Notification Management

  1. Send notifications to the patients through the app individually or all together
  2. Customize the content of notifications according to different scenarios
  3. View the sending history and check if the receivers have read the notifications
    a. Filter the unread notifications and send them again directly

Preset Messages

Set frequently used messages beforehand to save time sending notifications

Challenge 02

Optimize layout for the notification management page on tablets

User Need:

Streamlined User Experience on tablets

During the interview with the client, we found that their staff used tablets to manage their online services. As a result, we had to ensure that when users type, the onscreen keyboard would not block the critical content on the page.

Design Solution:

Optimized Layout for Onscreen Keyboard

To ensure usability, I tried several layouts of the webpage to find the best way to show most of the important content when the onscreen keyboard appeared during wireframing.

Before

At first, the message area is fixed at the bottom of the page. However, when editing the message, users cannot see the receiver list since there is little space left.

After

After a few iterations, I decided to put the receiver list and the message area in the right sidebar. So when users type, they can see more information on the screen.

Design Proposal:

Finding the most Suitable Design Style for the Client

Mood Board

I used five keywords to define our clients’ image: professional, expecting, friendly, bright, and clear. Then I made a mood board to visualize these keywords.

Design Proposal

After defining the mood board, I proposed three versions of design styles and let the client choose their favorite one.

Takeaway:

Tips to Communicate with Clients Effectively

Functional Map of the app
UI Flow Chart

Communicate with Clients with UI Flows

After reviewing the sitemap with the project manager, I used functional maps to visualize the necessary functions for the project. However, the clients found it challenging to understand the solution’s structure through these diagrams. To address this, I created a flow chart by organizing the functional and informational text into phone-sized frames. This approach proved effective, as the client could better grasp the user flow with these frames. Additionally, presenting the items as plain text helped avoid distractions from the layout.

Understand the Client’s Concerns Beyond Their Needs

During discussions with the client, I found that their requirements sometimes came from the preferences of their higher-ups or workplace dynamics, rather than their direct needs. From this experience, I realized that understanding stakeholders’ thoughts behind their requirements is as important as understanding their behavior and needs during interviews.