Designing a Better Shopping Experience for Tumblr

With more people promoting products on Tumblr than ever, there’s a growing opportunity to make purchasing experiences on Tumblr better. Tumblr users are promoting a wide range of products — original artworks, photographic prints, used and handmade items; the list goes on — using Tumblr tags like #for sale, #selling, #buying to get discovered, increase brand awareness and drive sales.

Popular tags used to promote the sale of items on Tumblr

And though Tumblr is beginning to offer native buy buttons on the feed, people actively looking to purchase products may drop off when they’re led to sites outside of Tumblr to complete their purchases, especially on mobile. What if we could design a seamless transaction experience that’s quick, easy, and doesn’t break the experience of browsing the feed? What if the buy button could allow users to complete purchases within Tumblr?

External links are discouraging purchase completions

Users are using hyperlinks to promote their products
Native buy buttons are leading users away from Tumblr, too

Too many actions are happening outside of Tumblr

Currently, items for purchase displayed in the feed cannot be purchased directly. Buy buttons lead users to external sites that can take a while to load and aren’t optimized, increasing the chance that people will drop off. Directing users to external sites also removes and disconnects them from the feed browsing experience. Making purchases from the feed, especially on mobile, should feel convenient, easy and hopefully even fun.

Users are left stranded at the end of the purchase flow on an external site

How can we improve the buying experience?

A proposal for a native purchasing experience on Tumblr

Though a lot of product assumptions need to be made to propose a solution for native purchases on Tumblr, I decided to focus on the following design goals to align with the greater product vision of driving sales via the feed and increasing engagements on mobile:

1 — Make purchases without leaving Tumblr
2 — Make seamless transactions
3 — Allow users to continue where they left off after completing purchases

Analyzing Current UI

Breaking down Tumblr share similar elements

Sketching for Insights

Mapping Out a Better Experience

Flow wireframes (click to see detailed view)

When designing checkout forms, it’s best to minimize the pain of filling out so many fields. It’s important to illuminate a path to completion and ensure consistent communication. To provide natural breaks in the flow, I broke down the section to: Shipping , Payment, and a Review of the total amount, followed by swipe-to-pay. It indicates progress at key points and throughout each fields to prevent from errors and confusions by highlighting the input field in green after it’s been filled out correctly.

The payment and shipping information is saved in the database so that returning users could easily make transactions with a quick swipe.

Prototyping with Increased Fidelity

Bringing the Experience to Life

Re-imagined Native Purchases on Tumblr

1 — Making transactions directly from a blog post

CTA to buy radiates outwards from original position of the button that helps users visualize the results of their actions that creates visual connections from the feed to the transaction form. Image of the product remains in the background behind the transaction form to give context throughout the process.

2 — Swipe to pay

Implementing a delightful animation to communicate progress and convey success is consistent with tumblr’s playful animations seen on mobile and desktop. Users are led back to the dashboard after the confirmation, so they can continue to browse seamlessly.

A Review of the Improved Experience

With this new interaction, Tumblr users can now complete the entire purchase flow within Tumblr and have a better browsing experience. While this new interaction can be the next big move for Tumblr, this stage of the process is just the beginning. It would be exciting to test this current proposal and explore even more wide range of concepts to make Tumblr more expressive and delightful.

Future Opportunities

Implementing this purchase experience could open new doors to new significant possibilities.

  • Tumblr Marketplace — a separate section on the Explore page where users could promote and discover new items for sale.
  • Improved payment experience on desktop — consistent enhanced payment experience across web, like on mobile
  • Data-driven insights for creators and artists to increase sales — data and analytics can enrich the ability to serve customer needs and target the most promising prospects

I’m not affiliated with Tumblr — this article is my proposal for my product design internship role for Tumblr.

Like what you read? Give Aileen Shin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.