Depo-Provera Perpetual Calendar Calculator

Allowing healthcare professionals to quickly calculate the date range for follow-up appointments.



My roles: Product Design | UI/UX | Front End Developer

The situation.

Angela’s a nurse. She has to administer the birth control shot Depo-Provera multiple times a day. Then she has to schedule a follow-up appointment based on the perpetual calendar for Depo-Provera.

The problem.

Angela has to look for the laminated printout she shares with colleagues or goes on Google images, taking up precious minutes she doesn’t have to spare.

The solution.

Angela and her colleagues have often used the phrase...

“How is there not already an app for this??”

Clearly, this is something that’s already been thought about. There needs to be a digital calculator allowing providers to input the date of the injection and immediately see the date-range of the follow-up appointment. Simple right?

Here’s the thing. It was. Very simple.

The vision.

Angela had been thinking about it for some time and sent me a sketch of what she had in mind.

Armed with this vision, notes from our call discussing the pain points of her current situation, and what the ideal outcome would be, I got busy.

One braindump later I had a plan.

The prototype.

Working out the date range was easy (well... I thought it was, we’ll come back to this).

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)

I settled on jQuery UI to display the calendar and Moment.js to handle date calculations.

After some playing around I had a prototype up and running.

I shared this with Angela and all seemed good so I moved on to the visual design.

The design.

A mood board helps me get over the blank canvas freeze, that feeling of “Where to even start??”.

And, once you've started, it acts as a little support buddy that’s there when you hit another wall–which you will.

A logo was neeed to give it an identity. The main components of this product are dates and injections.

I drew the first thing that came to mind. A masterpiece if I might be so bold.

A calendar is the most recognizable icon for dates. I am not against reinventing the wheel, but only if it's broken and at the bottom of a ditch.

Injections are symbols of fun right? Turns out a cute chunky needle with liquid gold and no blood in sight makes it a little more friendly.

Since this product was so simple I started with the mobile layout which I then extrapolated into a desktop design.

The design implementation remained relatively faithful except on desktop where I found that in reality having the date on the same line would allow the user to copy and paste the text into a form.

Go on and break me.

I felt relatively comfortable with the result and it was ready for testing. So off it went.

Soon after I got the following feedback.

Ok. A reset button would be easy enough to add.

Welp. The date calculations were correct explicitly for January and February of this year (2020). At not for any other date.

Why is this not working???

Remember when I said the date calculation was easy? Well, it was… kinda. And not? Confused? Yeah, I was too.

So… 2020 is a leap year…

That extra day I had accounted for in January and February was only relevant in a leap year. Sounds obvious in retrospect but it wasn’t at the time, I can assure you.

Below are the corrected calculations:

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)

Try me now. I dare you.

Angela tested it along with a few others. Everything seemed to be working fine so I built and published a Chrome extension version.

Beta Release.

Currently, a small group is testing over a few weeks.