Designing KiteTail’s Checkout ‘Thank You’ Page

When we began thinking about the design of KiteTail’s ‘Thank you’ page, we had 2 primary goals in mind:

  1. We wanted the user to feel confident that their purchase was successfully made.
  2. We wanted to provide a clear next step for the user after the ‘Thank You’ page.

Many iterations went into the making of KiteTail’s ‘Thank You’ page. We introduced ideas, then removed those ideas, only to bring them back after reevaluating them.

It took awhile to kick off this design. Like many design tasks, the ‘Thank You’ page involved much time spent staring blankly into the air thinking about how exactly it should look. Although I would like to think that this is a necessary step of any design task, I would be lying to myself if I didn’t admit that it is just a poor excuse for procrastination.

In order to make headway on this task, I thought it would be best to simply get some ideas out on the Sketch Artboard knowing they would not be sticking around for very long.

Before this first iteration was attempted, we had already decided on a few requirements that we felt needed to be included in the design of the ‘Thank you’ page:

  1. It needed to fit within the width of the card that the checkout form is on.
  2. It needed to include a link to the product whether it is downloadable files or a webhook product.
  3. It needed a method for the user to generate a custom invoice.
  4. It needed social media sharing links.

Below is my first attempt at the design:

First attempt

At this point, it became clear that this page also needed to include a few payment details. We felt that this would accomplish an important detail that we originally overlooked: it would act as a digital receipt for the user and, ultimately, it would make the user feel more confident that their purchase has effectively been made.

We also felt that the social media share buttons were a little too prominent so we reduced them to just the icons.

Second attempt

With the payment details now in place, we felt that our ‘Thank You’ page was beginning to feel much more like a confirmation of the purchase. With that said, we couldn’t help but feel that the payment details seemed a little heavy on the overall design. Those labels on the left felt a little unnecessary as it was quite obvious what the items on the right were. That lead us in the direction of our next iteration seen below.

Third attempt

Ok, that cleans things up a bit. However, that header section still felt incomplete; just plain, boring text. We thought some imagery could be used to indicate success:

Fourth attempt

Great! This is really starting to come together.

We also repositioned the "download files" button to be below the payment information. We felt this order made more sense as it provides all of the purchase information before the user exits the page through one of the actions.

Although the illustration in the header provided the impact we were looking for, the header was beginning to appear a bit heavy. By left aligning the text and putting the illustration on the right, we were able to reduce the height while still keeping the card balanced.

Fifth attempt

For the sake of curiosity, we toyed with the idea of left aligning all of the content on the card. Although this concept presented some interesting ideas, it didn’t live past this iteration.

Sixth attempt

After many long debates, we reconsidered the style of the social media share buttons. Ultimately, we just felt these were more actionable. We wanted to ensure that they appeared as share buttons and not just links to the product's social media sites.

Another problem we identified at this point was that we thought the download button lacked focus on the overall design of the card. It just sort of attached itself to whatever it was close to and didn’t really feel like its own section. We thought by surrounding the download button with useful information that it would not only provide more confidence to the user, but it would also add height to that section, giving it the focus we were looking for.

Seventh attempt

Something still felt off but I couldn’t figure out what it was. At this point I gave Adam a call and he quickly identified that the full width text blocks were making the card appear busy. He suggested constraining the text. That was it! I added 40 pixels of space on each side and this one change really cleaned up the entire appearance of the card.

Eighth attempt

Although I have outlined 8 iterations in this post, there were actually many, many more smaller iterations that occurred in-between some of the ones shared above. Who knows, maybe it will see many more before it is in the live product.

There are a few key takeaways that stood out when reflecting on this design task:

  1. Just get to work — Start getting ideas out early even if they’re bad. In the beginning it is all about quantity over quality.
  2. Keep everything — You never know what ideas are worth reevaluating later on in the process.
  3. Get constant feedback — You’ll be surprised what a fresh pair of eyes can see when you’ve been staring at a design for too long.