Logo Add to Cart Upsell

Simplifying the logo to business card user experience

Logo Purchase Page

Makr Purchase Page

Logo Add to Cart Modal with Previews

Makr Purchase Add to Cart Modal
Role
  • UI/UX Design
  • Figma Prototyping
For
  • Makr

The Makr website centered around business branding and the value of your unique logo. Throughout the creation and purchase process, it emphasized the many ways that your logo could be applied to many different products. In both the builder and purchase page, the user could see their logo applied to a business card, sticker, website, social media page, and sign.

In the current preview and purchase experience the user could not readily create a business card or sticker as shown without first selecting a template and swapping out the placeholder for the logo that they had just created. We started an initiative to remove this point of friction, in order to increase the conversion of logo purchases along with a corresponding business card and/or sticker purchase.

Phase 1: Minimum Lovable Product

We decided to phase this initiative to faster understand how users will interact with the new functionality and to test if our decisions were successful. I worked with my Product Manager to identify the Add to Cart confirmation modal as the place to include the additional business card or sticker, as it didn’t require an account and was seen by all users in the purchase flow.

I adapted the added to cart confirmation modal to include the preview images with the logo applied. From data we have previously reviewed, we knew that conversion went up when users saw a preview of their logo on a product. When the user selects the Edit button, the business card or sticker opens in the print builder. A close button was also added to the modal, which allows the user to continue and look at other products.

Since the launch of the updated modal we saw an increase in conversion of logo purchases by 21%.

  • The new modal gave users the options they needed and haver them control to view their custom projects
  • They now have the option to close the modal and view their cart, where they can see their items and more details about each one
  • They then have more confidence in their purchase and checkout
Makr Web Purchase
Makr Mobile Purchase
Makr Web Purchase Added to Cart
Makr Mobile Purchase Added to Cart
Makr Web Print Builder with Logo
Makr Mobile Print Builder with Logo

Phase 2: Further Updates

I explored an update to this experience, which brought forward additional personalized print projects to the Logo Purchase page. It separated the static digital previews from the print projects, which opened the project in the builder. I also incorporated a highly requested feature, to view your brand fonts and colors from your logo.

The user flow centered around the Logo Purchase, Add to Cart, and Print Builder components.

Makr Web User Flow

The addition of personalized print projects created a hub for the user to find prebuilt templates with their logo already applied. It is located in a consistent place, on the logo detail page, and simplifies the process of taking your logo and adding it to Makr templates.

I also addressed a usability issue where the user may inadvertently add a logo to their cart more than once. Once the logo is in their cart, the user sees their cart details instead of the purchase options.

Logo Purchase

Makr Web Purchase

Logo is in your Cart

Makr Mobile Purchase