Breaking the Code of Proration

How might we onboard users and explain the cost of their fees for a non-standard start date to a subscription?

This was (in total) a month long process to design the ConnectED Mobile’s onboarding process. I was the sole designer on the team. This case study specifically examines how to explain a prorated cost for signing up in the middle of certain subscription cycles.

The Problem

A unique consideration arose due to how new subscriptions are handled at ConnectED. It was explained to me that the initial fees for opening a new phone line would be the price of a full cycle and the price of a partial cycle counted from the current date. The price for both the full cycle and partial cycle changes depending on which cycle you select.

I know, it’s a bit of a mind bender.

The main question I hoped to investigate and answer was: How do we clearly show prices and communicate the reason behind why the prices are what they are?

Initial Explorations

I first started this research process by approaching those near me that are on a phone plan with ConnectED! My hallmate, Marco, along with a few of his friends were on phone plans with ConnectED and I reached out to them for their thoughts on the reasoning for prices. I quickly realized that some sort of visual explanation paired with copy would be the best way to explain the idea.

Image for post
Image for post

This was my first attempt at the design. From playing around with the sketch, it became clear that simply showing the price did not solve the problem. However, having the price dynamically change depending on selections was helpful for users.

I started sketching out some visual explanations for the pricing along with trying some different copy options.

Image for post
Image for post
My first sketches!

This sort of calendar view mirrored the calendar from the subscription start date screen. The continuation of the calendar visual pattern helped draw connections between the selection and reason for the price shown. From here I started to refine the design by asking some ConnectED members what they thought about the clarity of the designs.

Revising!

After multiple revisions and feedback from the CEO of ConnectED, I arrived at this final design!

It utilizes the calendar diagram to explain the partial cycle and the price of one full cycles that the user would have to pay. This diagram would be dynamic depending on the start date the user selected and the cycle length. In this case, the user starts their plan on the 16th of April and selected the 3 Month Cycle. The diagram shows that they are paying for the 16th to the beginning of the next cycle (the 2nd of the next month), and 3 additional months.

Image for post
Image for post

This diagram is shown in a dropdown along with the copy explaining how the cost is calculated.

Reflections

Unfortunately, this was towards the end of my 3 month contract, and I never got to see it ship while I was with ConnectED. However, in future situations, I would definitely want to refine after the engineers started to apply things, and definitely communicate more with engineering to understand their capabilities regarding designs.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store