Healthcare worker calendar calculator case study.

Business Partner

EMDixon-Roche Designs

Product

A web-app and chrome-extension where nurses can copy and paste the patient follow-up date range directly into patients’ electronic health records.

My Role

End-to-end UX/UI Design, Product Design, Front and Backend Web Development..

The Opportunity

After hearing a nurse complain about a repetitive and time-consuming process, I interviewed other nurses about the same pain points. They said they hated having to look up the date range for patient follow-up injections of Depo-Provera using a printed or digital PDF from 1999. This PDF was sometimes laminated, sometimes not, and sometimes had to be looked up on the computer.

Shared laminated calendar printout

Nurses had numerous patients throughout the day, and they said it was annoying to be always looking for the PDF or online. Each time they looked up dates throughout the day, the process felt frustrating and inefficient. They could not believe an app or website did not already exist to solve this, and the app that did exist did not satisfy their needs.

I saw the potential to create a product with an immediate value proposition for an existing client base–a web-based calculator to replace the PDF.

Competitive Research

I discovered two competing products:

  1. The original PDF from Pharmacia & Upjohn Company, creators of Depo-Provera.
  2. The “Depo calendar” app available on the Apple Store.

Analysis of Competitor #1: The Original PDF

The perpetual calendar PDF created by Pharmacia & Upjohn Company is a two-sided printout of a table with a line for each date of the year with the corresponding date range. It is the most widespread method currently used by nurses.

Pros

Cons

Analysis of Competitor #2: The iPhone app

The “Depo calendar” app had a 3.3 out of 4-star rating over five years.

The user input the injection date and received the corresponding date for their follow-up appointment.

"Depo calendar" in Apple Store

Pros

Cons

User Research

None of the nurses I spoke with had tried the Depo calendar app.

Analysis of the feedback from local nurses showed a universal consensus. They needed a simple calculator where they entered the injection date and received the date range in a particular format they could copy and paste into their patients' forms.

User Objectives

The end users’ goals were to:

  1. Input the date of the injection.
  2. Receive a date range for the follow-up appointment.
  3. Add the date range directly into the patient’s electronic health record.

Although the nurses liked the idea of an app-based solution, they really needed a way to access the calculator while they were on their computer.

By researching how nurses were looking up and saving the date range, a couple of solutions immediately became apparent.

Ideation led me to conclude that two solutions would best solve their problem:

  1. A web-app.
  2. A Google Chrome extension.

The Chrome extension idea came from what browsers the nurses and their peers used. Although everyone I spoke to used Google Chrome, it was unreasonable to extrapolate this to the entire user population. Hence, the need for an additional cross-platform web app.

As a healthcare product, I also had to ascertain whether there would be any potential HIPPA issues. Since no patient data was stored or entered, only generic dates, I concluded that the calculator didn’t have any HIPPA hurdles.

Designer Objectives

Four main areas of improvement would boost the product’s chance of gaining widespread adoption:

  1. Increase access.
  2. Decrease date search time.
  3. Enable copying and pasting dates into patient health records.
  4. Simplify UI.

Product Solution

A mobile-optimized web app and Chrome extension where nurses could copy and paste follow-up date ranges directly into patients’ electronic health records using their computer browser.

Brand Design

Leveraging my scientific illustration experience with The Smithsonian Institute (example illustrations), I first created the logo to inform the rest of the brand. The two main words associated with the calculator are "injection" and "date." Lucky for me, these are two visual elements: a hypodermic needle and a calendar.

My two competitors did not have clear branding. It was a clear opportunity for my product to stand out. By branding my product and therefore giving it an identity, it would have cross-platform recognition.

I created the logo first, informing the rest of the design brand. The two main words associated with the calculator are "injection" and "date." Luckily for me, these are two visual elements: a hypodermic needle and a calendar.

The main design requirement was "simple," but I felt a close second was "approachable." I made sure the needle looked as friendly as possible and used a calendar representation. During the design iteration, I saw a neat opportunity for the injection drop to represent the day of the injection.

Logo design iterations

UX Design

A nurse volunteered a mockup of their product design vision.

Using the mockup as a jumping-off point, I distilled out the design essentials.

Everything needed to be immediately viewable and accessible on one screen with the least amount of information and words possible while still achieving the user end-goals.

To achieve the user goal of getting a date range, the on-screen information needed to have:

  1. Injection date.
  2. Next injection date range.

UI Design

The UI needed to be simple. I created a mood board based on simple user interfaces and calm colors.

Moodboard created in Pinterest

Starting with a mobile-first design in grayscale, I then added the chosen color scheme, extrapolating to desktop design.

UI design iterations

Low-Fidelity Prototype Development

To create the calculator, I needed to know what the calculation would be and how to perform it.

The date-range calculation was as follows:

January & February


Date Range

=

Date of injection + (11 weeks + 1 day)

+

Date of injection + (13 weeks)

Rest of Year


Date Range

=

Date of injection + (11 weeks)

+

Date of injection + (13 weeks)

jQuery UI API displayed the calendar and Moment.js API handled date calculations.

Once I had a low-fidelity prototype, I shared it with my test group to validate the product concept before styling.

High-Fidelity Prototype

To make sure the user could copy and paste the date range in one step, I made the layout responsive where the date range went on one line once there was enough screen space to do so.

The title bar looked crammed on a wider screen, so that also got put into one line on the desktop.

Alpha User Testing and Feedback

The UX feedback was favorable. However, there was one feature suggestion and one development issue.

Text from nurse

If the user is looking up multiple dates in one sitting, they need a reset button for the injection date. Otherwise, they start to waste time.

User testing occurred in 2020, a leap year, and I had not accounted for February 29th. During my QA and research, I discovered that both of my competitors' products did not account for it either. This meant that my calculator would be the only 100% accurate product.

Leap years are part of the Moment.js API, so it would be possible to correct. Below is the corrected calculation:

January & February of leap years


Date Range

=

Date of injection + (11 weeks + 1 day)

+

Date of injection + (13 weeks)

Rest of Year & non-leap years


Date Range

=

Date of injection + (11 weeks)

+

Date of injection + (13 weeks)

Beta User Testing

The nurses at the local hospital beta tested it for a month. There was only one problem. The original PDF created by the pharmaceutical company did not account for leap years and was wrong by one day depending on the month and year. But, since Pharmacia and Upjohn Company, an established company, created it, the nurses assumed it was right, and my calculator was wrong.

I created a document to give the user confidence in my calculator, showing full calendar years, screenshots from Pharmacia and Upjohn Company's PDF table, and screenshots from my chrome-extension. The document shows the week count on a real calendar, giving the user confidence.

User confidence PDF of full calendar years from 2020 to 2024 showing week numbers, comparing Pharmacia & Upjohn Company dates to my calculator dates

Product Release and Outcome

Initially, end users were healthcare workers at a local hospital to determine when their patients needed to have a follow-up Depo-Provera birth control injection appointment. In four and a half months and all through word-of-mouth marketing, both the web-app and chrome-extension each had 250+ returning weekly visitors.

Depo-Provera perpetual calendar calculator Google Web Store analytics

Depo-Provera perpetual calendar calculator Google Analytics

As of March 2021, 250 healthcare workers used it daily internationally.

Depo-Provera perpetual calendar calculator