Gift Box | Free Gifts in Cart
4.9 ⭐ (119)
Cartify
Cartify is a Shopify app designed to help merchants boost their sales. With Cartify, merchants can offer their customers various kind of discounts, using the latest Shopify functions.
Overview
Objective
We want to design a Shopify discount app that offers a range of discounts, with the latest Shopify Functions to help merchants boost their sales and provide customers with a gamified shopping experience.
Role & Deliverables
I worked closely with a co-founder and two engineers. I am responsible for the entire UX and UI design process, from defining the problem to delivering the final mockup and product requirement document.
Challenges
Since some Shopify discount codes couldn't be combined together, we need to consider how to make use of Shopify Functions to provide discounts in a seamless way and prioritize the essential features to ensure a successful MVP.
Outcome
Our product is currently in the QA stage. We plan to release the beta version of our product in April. However, our website is now live and available for you to look around.
Background
Shopify is a leading e-commerce platform that allows businesses to create and manage their online stores. While Shopify provides built-in discount features, these tools may not always meet the needs of merchants who require more advanced discounting strategies. This is where third-party apps come in, providing a wide range of features and integrations to fulfill merchants’ needs.
Since Shopify Functions are constantly updating, we see this as an opportunity to provide merchants with more effective discounting strategies with the latest Shopify Functions Technology.
Discovery
Define problems
E-commerce merchants
With several years of experience working with Shopify stores, we have learned a lot from our clients about the pain points and challenges that Shopify store owners encounter:
Merchants are unable to display offers or promotions effectively in their storefront.
Merchants cannot encourage customers to spend more in order to receive free gifts limited to a specific collection.
The free shipping offers can’t be offered differently based on the region.
E-commerce customers
We not only empathize with the pain points faced by merchants, but we also prioritize the needs of e-commerce customers.
We used the user journey map to identify the pain points of e-commerce customers:
Customers cannot know the deal or offers easily and quickly so they might miss the deal.
Customers are unaware of the shipping costs as well as the minimum amount required to qualify for free shipping before checkout.
Customers are not informed that certain discount codes cannot be used or combined until they check out.
Since our product is a discount app, we focus on the stage 2 & 3.
Competitive analysis
To learn about current Shopify discount apps, what they do well or poorly, and what features they lack. Summarizing this around competitor analysis, I have learned that while these products may display offers more prominently through widgets, cart drawers, or pop-ups, there is still room for improvement in effectively presenting offers to customers. Besides, there are some products that fail to show customers the minimum amount needed for free shipping, while all products lack the feature to enable customers to input discount codes before checkout. This is what I try to improve for our product.
Gift Box is a Shopify discount app that allows merchants to offer free gifts to customers and customize the gift offer by setting the gift value, and product quantity. The widget clearly displays free gift tiers with different thresholds. However, customers have no idea which products are available for free gift offers.
BOGOS: Free gift & Buy X Get Y
4.8 ⭐ (1,137)
BOGOS is a Shopify discount app that provides a fully customized gifting solution with plenty of offers available, including free gifts, BOGO, and buy x get y. They have gift icons on product pages and collection pages to inform and attract customers. When customers reach the free gift goal, a popup appears with a selection of free gifts to choose from. However, once customers choose the free gift, they cannot reselect the variant of the gift or quickly choose other gifts.
Sales Motivator ‑ Free Gifts
4.7 ⭐ (124)
Sales Motivator is a discount app for Shopify similar to Gift Box, as it provides customers with free gifts for selected products based on their cart's total value. However, unlike Gift Box, Sales Motivator does not display the minimum amount customers need to spend to qualify for free shipping. The widget clearly displays free gift offers as well as the collection that is eligible for free gifts. However, customers cannot be linked directly to the collection on the widget. When customers reach the free gift goal, they do not receive any feedback.
Free Gift+ Cart Upsell Monster
4.9 ⭐ (400)
Monster Upsell is a Shopify discount app that enables various upsell campaigns by using a smart drawer with a multi-goal progress bar. It has a user-friendly cart drawer that displays a variety of offers, including free shipping, free gifts, volume discounts, upsell discounts, and frequently bought-together items. However, if customers add more items to their cart, these offers may not be easily visible as they are displayed underneath the products. Furthermore, customers may not be aware of the offers available until they add an item to the cart.
UFE Cross Sell & Upsell Bundle
4.9 ⭐ (874)
UFE is a Shopify discount app that provides various kinds of discounts, including free gifts, upsell, cross-sell, cart upsell, checkout upsell, and product recommendations. It embeds upsell offers directly on any page, making offers easily shown to customers. However, if the upsell offers are too numerous, they may be overwhelming for some customers. One notable feature of this app is that it enables customers to apply discount codes directly in the cart drawer before proceeding to checkout.
Define
We defined key functions of MVP and created hypotheses based on pain points and competitive analysis to measure the effectiveness of our outcomes.
Goal
Create a Shopify discount app that helps merchants boost sales and AOV with compelling and effective offers.
Hypothesis
Offering different levels of free shipping based on the location of the customer will help merchants increase their sales and AOV.
Dynamically calculating the progress towards free gifts and free shipping will help increase sales and improve the customer shopping experience.
Providing tooltips on the widget launcher will help merchants effectively inform customers of offers.
Features
MVP
1. Enable merchants to easily set up and schedule offers, including free gifts, free shipping, volume discounts and cross-sell.
2. Dynamically calculate the progress towards free gifts and free shipping.
3. Different levels of free shipping offers based on customer’s location.
4. Provide tooltips on the widget launcher.
5. Allow merchants customize the style of widget and popup from text to color.
Next stage
1. Include a discount code input field in the widget.
2. Analysis of app discount usage.
3. Enable customers to sign up or log in to unlock more advanced free gift options.
4. AI to select cross-sell offers
Ideate
Widget UI Flow
I created the UI flow to verify the functionality of each feature and ensure its technical feasibility in collaboration with the front-end developer.
Admin User Flow
Before diving into the design of the admin panel, I created user flows for four different discount types. This was to ensure that they were technically feasible and compatible with Shopify Functions.
Create Free Gift
.jpg)
Create Free Shipping
.jpg)
Create Volume Discount
.jpg)
Create Cross-sell Discount
.jpg)
Design
Design Components
As our product enables merchants to customize the color and font of their widget and popup, I didn't define the color palette and font.
Widget & Popup
Admin
Final Design
Feature 1 - Tooltips on the widget launcher.
When new customers first access an online store, we use a tooltip on the launcher to inform them about the free gift offer, ensuring they don't miss out any offers.
In addition, when customers add an item to their cart, we use a tooltip to encourage them to make additional purchases to get rewards.
And how does it work on a mobile device?
Feature 2 - Enable merchants to easily set up four discounts.
Our product enables merchants to offer free gifts, free shipping, volume discounts, and cross-sell discounts. To avoid overwhelming customers with too much information, we display these discounts in an intuitive way.
When merchants create free gifts or free shipping, these offers will appear on the widget. Meanwhile, if they create volume or cross-sell discounts, these will be displayed in a popup.
Free gifts & Free shipping on the widget
Volume & Cross-sell Discounts on the popup
Volume & Cross-sell Discounts details
During the process, we iterated on the cross-sell discount page because of a limitation with Shopify's discount code, which prohibits the application of different product discounts to the same item. As an example, if a merchant selects lipstick as the upsell trigger, and the customer adds lipstick to their cart, the volume and bundle discounts cannot be applied to the same item, making the process unworkable in this case.
Feature 3 - Dynamically calculate the progress towards free gifts and free shipping.
Feature 4 - Varied free shipping levels by customer's location.
Feature 5 - Easily add or remove the free gift and change the variant.
Admin page design
Create Free Gift
Create Volume Discounts
Create Cross-sell Discounts
Schedule the discount and have it summarized on each create discount page.
Reflection
1. More consider user behavior.
Since more users are now shopping on mobile devices, I think it is important that we prioritize designing for mobile first. When designing mobile-first, we can ensure that all features are optimized for mobile use.
2. Maintain a flexible design process.
In a startup, it is important to maintain a flexible and adaptable design process that allows for multiple rounds of changes and iterations in response to the feedback.
3. Embrace the constraints.
Although we may be restricted to Shopify Functions and cannot develop any feature we desire, it is still fascinating to ideate valuable solutions within the given limitation.