Dribbble Purchasing
Expanding what people can do on Dribbble – it's not just for inspiration anymore
Overview
Dribbble is a site historically known as “show and tell for designers” – a social site for designers to post images of their work and maintain a lightweight portfolio to find clients. In 2022, Dribbble was looking to branch out into other verticals, including ecommerce. This project added a completely new functionality to the site: the ability to purchase design assets in a simple flow.
Date
2022
Company
Dribbble
Industry
Digital asset ecommerce
My Contributions
UX Design
History
A few years prior to this project, Dribbble had acquired Creative Market, an ecommerce site for purchasing all sorts of design assets such as fonts, mockups and photoshop templates. The interface for Dribbble Marketplace was built on top of an API that pulled in products from Creative Market. This meant that CM sellers could opt in to having their work sold on a second site, without having to go through the process of uploading assets again and setting up product pages. I also did some work on the interface for them to accept the agreement to allow their assets to be sold on Dribbble.
Due to a company re-org, I was brought onto this project after some design and development work had already been completed.
The product plan when I entered the project was to create an exact copy of the CM purchase flow on Dribbble. However, due to user testing and experience with usability issues on similar sites such as MyFonts, I made the team aware that we had an opportunity to correct flaws in the CM purchase purchase process through the Dribbble implementation. These flaws are shown on the screenshot below.
This UI element is called the “buy box” and it’s shown on every CM product page. The choices here are what’s seen on a font page. Other asset types have different licensing options. The original plan was to reskin this UI element in the Dribbble colors with no UX changes.
Known issues with the Creative Market buy box as it existed at the time. This interface element appears on every product page, although the license options for non-font assets are not as complex.
With the avoidance of these issues in mind, I designed a new flow, based around a few goals.
The goals:
• Get experienced users to checkout quickly and smoothly
• Allow for selection of license types and quantities
• Explain what all these licenses are, but don’t interrupt the flow for experienced users
Design Asset Licensing 101: The asset is the file that the customer downloads at the end of the transaction, but what they’ve technically bought is a license to use that asset. In the case of an asset like an illustration set, the licensing choices might be as simple as personal or commercial, but the licensing for fonts is far more complex. At the end of the day, the licensing models have a big influence on the design of the purchase flow.
The ability to make this into a quick one-click to checkout flow was made possible by selecting a license and quantity by default rather than asking the user what they wanted as many digital asset marketplaces do in this step. We also skipped the implementation of a cart altogether – although this decision was motivated by technical constraints, it resulted in a simplified user experience.
In this case, we defaulted to the most commonly purchased license type for fonts: the desktop license. For assets that were licensed with a personal or commercial option, we defaulted to the commercial license, as that was the license the business preferred that customers select. The design of this page also allowed for experimentations with defaulting to other license types we wanted to promote, such as a discounted combination license.
By defaulting to one simple license type, we avoided causing choice fatigue in the user by presenting them with every single choice up front as part of the purchase process, as is common on competitor sites.
However, we still needed to account for users who needed something other than the default license type. By clicking on the “more options” link, the user is able to see every license offered for this product, as well as a brief description of what type of use each license allows:
This flow allowed us to capture the best of both worlds, supporting both power users who had a highly specific use case such as app licensing, while also supporting the easiest possible flow for the majority of our audience.
Of course, a purchase flow always contains more than the product page and checkout. Here are the post-purchase screens I designed for this project:
