Makr Cart & Checkout

Role
  • UI/UX Design
  • HTML/CSS Development
  • Shopify Theme Development
  • Shopify Liquid Templating
For
  • Makr

A cohesive checkout experience

The Makr website empowered small business owners to create custom logos and print products using the Makr Builder. They then purchase the downloadable logo asset or order physical prints, respectively.

Goals

1

Reduce customer confusion about the logo bundles and how they will receive their logo files after completing the purchase.

2

Increase conversion to purchase between the cart and checkout

I was responsible for the user interface and experience design of both the cart and checkout refinements. I also implemented these updates using the Shopify Liquid Templating engine and CSS.

Problem

The transition between the product and cart page lacked key details

Based on product analytics data, our team theorized that at the Cart, users did not see the full value of their logo package before checking out, as they lacked the necessary context.

Product Page

Cart Page

Problem

On mobile devices, downloading a logo required multiple steps

For logo packages that included more than one file, a ZIP file was provided, which contained every file. On mobile devices, this was problematic as ZIP files are not supported and not easily unzipped.

Shopping Cart: Connecting the dots

I explored ways to better communicate to the user what was included with their logo purchase, making use of contextual information in order to instill more confidence.

Icon

New need to know section

Users can see important information about how their purchase is fulfilled.

Icon

Expanded the logo line items

The line item shows the different files that are included, as shown on the product page.

Need to know section
Expanded logo line items
Icon

Over the course of several weeks we saw an increase of conversion by 18% (from 43% to 61%).

A faster and simpler download experience

From our user’s perspective, their post-purchase experience with logos includes both downloading and applying the logo within another application or service. I designed an update to the Shopify Order Confirmation page that provides direct access to the individual files, instead of a ZIP file.

Icon

Direct downloads

Users can download the specific file they need, without having to unzip anything.

Icon

Use it everywhere

The logo image files can be directly used in services such as Squarespace or Wix.