Creating A Checkout Process for Lemonade: A Content Design Case Study

A step-by-step process breakdown

Photo by Firmbee.com on Unsplash

Let’s get right into it, cos why not?

First of all, a quick background into Lemonade, their mission, voice, and the goal with this project.

What’s Lemonade?

Lemonade is a social media company with a mission to “to give folks a refreshing social media experience that’s less toxic than certain mainstream competitors. They envision themselves becoming the most trustworthy source of news in the world. They like to keep things light, but have zero tolerance for hate speech, misinformation, and disinformation.”

Lemonade’s product voice

Lemonade describes their voice as:

1. Trustworthy: so they’re big on consistency, transparency, and ownership of errors and mistakes.
2. Lighthearted: they’re a social media company after all and they believe in maintaining the fun and keeping things light while still keeping users informed.
3. Inclusive: Lemonade is a global platform so they want their users from any part of the world and regardless of their abilities to feel welcome. So they prioritize accessibility and the use of plain language.

Task brief

This is an exact copy and paste of the project brief:

“Lemonade is launching a premium offering called Lemonade+ for $3.99/month. Subscribers get an ad-free experience and a special badge on their profile.

Lemonade needs your help with the checkout experience for this product. To subscribe, users need to provide their credit card info, billing address, and date of birth (this is because only people who are 18+ can subscribe). Users can also pay by gift card and apply discount codes.

Write copy for the Lemonade+ checkout form. Be sure to include a way for them to enter credit card info, a billing address, date of birth, gift cards, and discount codes. Include error messages for when info is missing or in the wrong format, as applicable.

You should also write copy for the success message people see when they complete their purchase.”

My Content Design/UX Writing Process

Competitive analysis:

The first thing I did after reading through this brief and understanding the goals and needs of the company was to do research aka competitive analysis into the checkout processes for other companies. Specifically those in the media industry.

I looked through Twitter Blue and The New York Times subscription.

I explored the whole experience noting things like tone and the positives I wanted in my design/copy. As well as the negatives as determined by either my experience or the ones that simply didn’t fit Lemonade’s style and voice.

Understand user behaviors

After performing a competitive analysis, the next step before I started writing and designing was to understand how users experience checkouts. This is basically, user research.

Some of the things I wanted to know included:

1. What could possibly cause a user to drop off during the checkout process?
2. What are some things research has shown users to dislike and also like at this stage?

To easily do this because I had no access to actual users and also because I had limited time, I used keyword research to perform my user research.

The linked post has more details on how to do that. But for this, I simply used Baymard Institute as my search engine since they have a lot of e-commerce related researches tested with actual users.

I searched “issues users face at checkout Baymard” and “Baymard checkout stats”. With these 2, I found useful insight into some experiences users had faced and which greatly affected them completing a checkout process or not.

One I noted was:

• 17% of US online shoppers have abandoned an order solely due to too long/complicated checkout process.

So I knew something to focus on was creating the simplest and as quick as possible flow for Lemonade’s users.

Design/writing stage

After going through Twitter Blue and The New York Time’s subscription checkout flows, I decided I preferred NYT’s and chose that as my guide for this task.

First thing I decided to take from NYT’s page was their layered drop down process where all 3 steps are on the same page so users know upfront how long it is.

I adopted the same 3 steps as them and titled mine

• Personal information
• Payment details
• Review & purchase

We’ll look at the content design of each section now.

Personal information

In my first design draft, this section had 4 fields, all required.

1. What’s your username?

Microcopy: (Example: @ LemonadeSupport)

2. Enter your account password

Microcopy: (This is to verify ownership of the account)

3. Confirm password

4. Date of birth

Microcopy: (Only users who are 18+ can subscribe to Lemonade+)

But in my final draft, I had only 3 fields, all required.

1. What’s your username?

Microcopy: (Example: @LemonadeSupport. Please include the @)

2. Enter your account password

Microcopy: (This is to verify ownership of the account)

3. Date of birth

Microcopy: (Only users who are 18+ can subscribe to Lemonade+)

Why?

• I removed the ‘confirm password’ field because I didn’t think it necessary in a checkout. In a signup flow, it makes perfect sense. But since the goal of the password in this instance is to verify ownership of account, entering it once is enough. If it’s incorrect, we can simply show them it is and give them an opportunity to try again or use ‘forgot password’. I couldn’t justify it as a security step so there wasn’t any use in elongating this section.
• In my final draft, I added an extra instruction to the username microcopy. Instead of only making it clear what their username was (cos sometimes I too get confused by which is my username/handle on Twitter), I added that they should include the @ sign when entering their username. This way we reduce the chances of users entering just their username and being shown an error message.

Extra things to note here are how I used microcopy with every field to help users understand why they were important.

In the final designs, all questions/requirements and their accompanying microcopy come before the field where users are expected to enter their answers. This is so those using a screen reader can get all the necessary information before they enter their answers.

Payment details

This section was a bit tricky for me and for this, usability tests will be useful in determining if my assumptions are right or not.

Again, just like NYT, I decided to split the payment process into 2 separate flows depending on their choice of payment.

• Credit or Debit card
• Gift cards

I did this not because NYT did it, but because I had an assumption — which I’m willing to test — that users signing up with a gift card are not fully ready to convert/buy. So entering their card details may be too much commitment for them at this stage.

Unlike those signing up for Lemonade+ with their cards, the gift card signups are most likely just trying out the subscription.

So I separated their payment flows making room for gift card subscribers to *optionally* enter their card details which won’t be charged till they agree to that. Their flow also had 2 required fields: the gift card details and their email address so we can keep up with them and nurture them into converting.

For this case study though, I’ll be sharing only the details of the Credit or Debit card flows.

In my 1st design draft, I had 4 fields/subsections. Of which the first 3 were compulsory.

1. Name: this form field had 2 sub fields titled (first name as written on your card) and (last name as written on your card).
2. Card details:

Microcopy: You card will be charged $3.99 monthly on the same date as when your subscription starts. A reminder mail will always be sent to you a week before so you can cancel anytime.

3. Billing address:

4. Do you have a discount code? You can use it here: This field was also optional as not every user has a discount code.

Microcopy in the form field: Enter discount code

My final design draft, had all same 4 fields/subsections as the 1st draft. But several things were different like microcopy and the sub fields.

1. Name: while in the 1st draft I had 2 spaces for a first and last name, my final draft has only 1 field with microcopy/title: Name (as written on your card).

I made this change because the experience I had while subscribing to NYT where they showed my Nigerian first and last names as invalid, reminded me of an article I had read a while ago about designing name fields.

In that article, the author states how diverse names are across continents and cultures. Some countries like Indonesia and parts of India have one name. For some, a first name could be their surname instead of their given name. Basically, names can be very complex. So when designing for an international product like Lemonade who also cares about inclusion, it’s always best to use a single name field.

Also, research by Baymard Institute has shown that users typically “think of their name as a single entity”. So it’s best to provide a single name field.

The microcopy to enter their name as is written on their card makes it easier too.

2. Card details:

For this I changed the last sentence in the microcopy so now it reads:

You card will be charged $3.99 monthly on the same date as when your subscription starts. A reminder email will always be sent to you a week before payment is due.

Instead of “a reminder mail will be sent to you a week before so you can cancel anytime”, I changed it to “a reminder email will be sent to you a week before payment is due.”

This way it’s clearer that reminders are via emails not mail. And also the focus is on the payment not cancellation. It’s more positive and not seeming like a nudge to cancel.

I did consider adding an extra sentence to tell/reassure users they can cancel anytime. But I left this out. This is another thing I’m willing to test on users to see if it makes a difference.

3. Billing address:

Where the 1st one was blank with no microcopy explaining the importance of this, I decided to add one so it’s clear why this is needed.

The microcopy here was important to me because this is one field that typically pisses me off while filling forms. I always wonder why it’s necessary seeing as the company won’t ever send me a physical mail.

So to make this field less frustrating and more reasonable to a user like me, I had to research what billing addresses are used for and why they mattered.

My research produced this microcopy:

This is the address registered to the card you’ve entered. We use this to verify you as the authorized owner of this card.

The microcopy does 2 things. One, it informs them what address to enter here so they’re not confused. And two, it explains why it’s necessary.

Another thing I added to the Billing address subsection were labeled fields titled ‘street address’, ‘city’, ‘country’, and ‘zip/postal code’.

I did this because while researching on billing addresses and issues related to this, I found that a common mistake users made when filling this was entering address in the wrong form field. So by clearly labeling each part of the field, we hope to reduce this occurrence.

4. Do you have a discount code? You can use it here: I didn’t change anything in this subsection.

Review & purchase

The final step in the checkout flow.

This step is vital to help users confirm every detail entered before they conclude their purchase. By doing this, we reduce complaints relating to incorrect details or accidental purchases.

There were not many changes done in this section so I’ll just share my final content design.

1. Microcopy explaining what this section is about:

Before we process your Lemonade+ purchase, please confirm that your details are correct.

2. A table/receipt showing the key details of their transaction:

• Lemonade username
• Name on card
• Purchase amount
• Discount
• Total amount to be charged to your account now

I contemplated changing ‘total amount to be charged to your account now’ to ‘total amount due’ but decided not to because I felt the first one is clearer and more transparent in defining what will happen. A win since transparency is a part of Lemonade’s values.

Both options can be tested though to find which works better.

3. Final details & CTA:

My goal here was to prepare users to make their purchase. To do this, I had to once more, be as transparent as possible with the users on what selecting the CTA meant for them.

By doing this, the goal is to reduce future complaints/confusions relating to their purchase.

Here’s what the final section reads:

If you aren’t satisfied with these details, you can still go back and edit them now.

If you’re satisfied with the details provided, the next step is to make your purchase.

• Selecting the “Purchase Lemonade+ Subscription” button means you will be charged $3.99 now for your first month.
• This subscription and monthly payment will continue till you decide to cancel it. Cancellation can be done anytime.

And then the CTA button.

In the end, this checkout flow had a total of 7 form fields. And according to a large-scale checkout usability testing done by Baymard Institute, they discovered that an ideal checkout flow consists of 7–8 form fields.

So, I’ll say I’m on the right track! What do you think?

This isn’t all the task as stated in the brief. I didn’t include the error messages and success message and my process for writing them. Maybe I’ll write a part 2.