Post Purchase Checkout on Mobile Web

Mobile web experience for purchasing add-ons after plan upgrade

Timeline 5 weeks

Team1 product manager,
1 engineering intern,
1 data scientist

Tools Figma
Figjam
Dropbox Paper

DisciplineVisual design
Growth design

BackgroundWhat is an post-purchase checkout?
The post purchase checkout page appears after the purchase is completed. It informs the user that the purchase has been made while upselling add-ons.

You’re using Dropbox (free)

You’re low on storage

You choose a plan upgrade

Checkout

Post purchase checkout

ChallengesWithout a well designed mobile web experience, add-on purchase rate on mobile web is only 1.33%
With new add-ons launching, we aimed to optimize the mobile web to help users easily learn about and purchase add-ons while completing their JTBDs.

Existing mobile web experience

Solution
Post purchase should be informative, add-on purchase decision should be clear.

Card layouts ideation through sketches

The project started with research and a review of previous experiments. Using insights and data from this research, I then began sketching the card design.

The add-on card consists of 5 pieces of information: the add-on name, price per month, a description of the add-on, a CTA, and a feature list.

Information hierarchy and readability
The content and information hierarchy are crucial elements of this card’s design. Exploring the plain text helped clarify the priority of each element, guiding decisions on emphasizing the tagline and segmenting the description from the features.

Using a tagline to create urgency
The tagline builds a sense of urgency for users quickly scanning the card. Titles like “Extended Version History” could feel like jargon to users unfamiliar with the feature, so I aimed for more accessible language. Additionally, placing the CTA helps break up the text and keeps key information visible above the fold on mobile devices.

Adding delight with illustrations
I wanted to add illustrations to make the card more engaging, using visual metaphors to hint at each add-on’s features. However, the illustrations either took up too much space when enlarged or appeared pixelated and cluttered when reduced, especially with multiple stacked cards. Ideally, we’d have simplified illustrations suited for smaller surfaces like mobile. For now, though, I've chosen a different approach.

Using expressive icons to simply the card
To strike a balance between illustrations and standard icons, I used distinct colors to represent each add-on type alongside its icon—for instance, rust for Extended Version History. This approach keeps the card as concise and straightforward as the add-ons themselves.

Can an icon describe the add-on?I initially used unfilled icons with colored backgrounds to represent each add-on. After experimenting with various background shapes, I decided on using colored filled icons. These icons effectively differentiate each add-on type without occupying too much space in the eyebrow text.

Simplifying content with a Content DesignerIn collaboration with a Content Designer, we simplified the card content. We felt the original tagline didn’t resonate with users who use Dropbox for work rather than for personal memories. Additionally, there was too much text, which seemed excessive for an add-on meant to be straightforward. In this new design, everything on the card is visible above the fold on all devices in portrait mode, with a slight preview of the add-on below.

Celebratory while informative moment after checkout

Using the loading page to inform and celebrate plan purchaseI envisioned using the loading page to celebrate and inform users about what’s next in the Post Purchase Checkout. Here are some early explorations. After discussing with product and engineering partners, we realized that incorporating the success message into the loading screen might not be feasible. Due to latency and device variations, some users might miss the message entirely.

Using a banner to informAfter meeting with product and engineering, I needed to find a way to fit both the congratulatory and informative messages on the post purchase checkout screen for mobile. The card design and escape hatches already occupy most of the screen, so I chose a short, simple success banner. This banner celebrates the Dropbox upgrade and confirms the payment’s success.

Results and learnings
Since my internship, this project has shipped resulting in directionally positive revenue results and an overall best post-purchase experience

I believe this was a great first project at Dropbox. I had the opportunity to collaborate cross-functionally with various designers and product managers working on similar experiments. I was fortunate that my direct team included both a Brand Designer and a Content Designer, making it easy to consult with them throughout the design process. This project and internship helped me become comfortable presenting my work for critique early and often. I also gained valuable insights from navigating technical constraints, which encouraged collaboration with my design mentor and product manager to explore new approaches.