Crafting the initial flow for a patient changing frequency

Initially, the question we asked with this flow was, how might we constrain it within a specific design pattern that already exists in our design system. The dialog modal seemed a good fit, because of vertical stack-ability, as well as being scalable on mobile web.

Entry point

Initial modal

Modal after selection

Entry point screen - end of flow

We iterated upon this by introducing meta-data onto the modal. This would communicate to the user, that the setting would not change their upcoming box’s shipment date. However, we would craft the intent of the copy in the action button to reflect the new frequency state, which we hypothesized would re-assure users of their action taken, while being informed that it would not immediately change their shipment date.

The first prototype here, assumes the simplest possible flow, and is structurally the same as the previously implemented feature. However, the modal doesn’t precisely communicate what the change in frequency is affecting. Since the setting simply communicated the old frequency (6 weeks in this case), users might not have been sure of the immediate effect.

Before design critique, I cleaned up the meta-data in terms of visual design, to ensure that we were using as little screen estate as possible, while still bringing emphasis.

We also iterated on copy for the modal, to be friendly, yet descriptive, as was used throughout our granular settings’ surface. Shipment Frequency, while describing the action well, did not mesh with the rest of our copy for settings at a similar granularity. For this reason, we changed it to “How often should we ship your box?”, with the psychological affordance that Curology is asking a friendly question, as opposed to a task about changing a password.

Friendlier, more brand aligned copy for modal header

Design critique board that I prepared to walk through initial explorations with the team in an informal group setting

Exploration 1

Dialog modal with single-select cells. Contextual anchor to shipping date.

Initially, I kept the design simple, showing contextual meta-data that showcases the shipping date for the user.

The intent here, was to provide the user context as to when their shipment was arriving, but also to scale as I asked our design team whether it’d be useful for users to change their most recent, upcoming box.

Exploration 2

Adding micro-copy under each option to provide user with additional context. We were essentially providing each option with corresponding meta-data. However, a question raised, was would the amount of text cause choice paralysis?

Exploration 3

A variation on our second exploration, but one that would automatically self select, as seen in products such as Hims / Dollar Shave club.

The second and third prototypes here were meant to foster discussion on potentially using micro-copy under each selection as metadata, testing out whether the removal of a CTA reduces friction. It also took the approach that users would be able to change the frequency of their next immediate box, if logically possible. However, feedback that we received centered on trying to keep the visual design of the modal itself as simple as possible, and one that should aim to “reduce” cognitive load, versus options that might induce some kind of choice paralysis (2nd and 3rd explorations).

Assumption to de-risk

Initially, after chatting with our CTO during critique, we went for an edge-case proof approach, keeping the logic as simple as possible.

This meant that our solution set was to only change cadence for boxes after a patients’ most recent upcoming box. (Therefore, we wouldn’t change when your next box is on its way, but would adjust the frequency after that box arrived).

The main challenge here, was communicating to the user and setting the expectation that they had indeed changed the frequency setting, even though the box affected would not be the upcoming one, but all subsequent packages afterward.

Did setting the frequency of the subsequent box set the right expectations for our patients versus the most recent upcoming box?

• Whilst we went ahead with the simple approach of the former for the first user test, we would be able to validate whether changing subscription frequency was setting the right expectations for users.
• We would also go ahead and ask for their expectation within the user test, to glean insight as to whether changing subsequent boxes or changing their most recent box, and which one is expected behavior on their end.

Visual design evolution of our dialog modal

Dialog modal after critique

Previous, generative exploration - one of the reasons why I always keep old explorations stashed away, rather than deleting them. Design is a generative endeavor a lot of the time.

The above exploration was an old, generative iteration that I had come up with, with the intent to clearly delineate between selection, and meta-data. When discussing the feature after critique, we realized that if users’ did want to change their initial shipment whilst changing frequency, there would need to be screen real estate for scalable copy. An example would be if a user wanted to change their frequency, and in the default case, it would be able to show their shipment date.

How about a user changing their frequency, but it being too late to change the frequency of their current box? It would accompany copy such as “This change only affects boxes shipped after Aug 20, 2020.” Would this scale well right below the modal header? Or is there a way to delineate meta-data and selection without an edge-case situation feeling crammed, and with visual breathing room.