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
- Reduce customer confusion about the logo bundles and how they will receive their logo files after completing the purchase.
- 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.
New need to know section
Users can see important information about how their purchase is fulfilled.
Expanded the logo line items
The line item shows the different files that are included, as shown on the product page.
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.
Direct downloads
Users can download the specific file they need, without having to unzip anything.
Expanded the logo line items
The logo image files can be directly used in services such as Squarespace or Wix.
