Discounts and gift cards manager for CMS platform
Project type
DanDomain provides advanced CMS tools for building online stores, mostly in Denmark region.
This project focuses on feature expansion for the platform for B2B and B2C customers.
Project done in collaboration with developers and managers as a solo designer.
Initial discovery, means what questions appear before considering this feature?
Based on support feedback, Posthog analysis and customer’s questions, the most asked questions are
- How do I create a gift card?
- What is the difference between gift cards and discount codes?
- How do I use gift card and discount code on the same order?
But also for the company those questions had to be answered:
- How are refunds or partial payments handled in current situation and how it would be handled in the future?
- How many discounts / gift cards should the system support without performance issues?
- What happens if there are overlapping promotions running?
- How do gift cards and discount codes contribute to customer acquisition?
Gift cards and Discounts differences
How gift cards and discounts work now for DanDomain platform:
Discount codes and giftcards are made within the same flow in admin panel with no difference in the usage. Customers can use either one or another in the checkout. The way it’s handled right now gift cards are just limited to one-time-use for one customer.
As it might be confusing not only for developers but also for the readers of this case, I pepared Confluence page with differences between gift cards and discounts (how it’s commonly perceived and used by eCommerce platforms like Shopify, WooCommerce, Apple, Amazon etc.)
Posthog Research
Before jumping into design, I wanted to see Posthog data to see patterns or customers behaviour on the page.
Also, before designing I am talking to support about common questions they get.
First Key Finding
4-5 out of 8 customers are struggling with adding specific products to discounts.
Customers are jumping between settings, struggling to find option to limit the discounts to specific products.
How to limit Discounts to specific products currently in the panel
Second Key Finding
Number of discount codes usage in seasonal periods increases by over 96%.
Number of active discount codes in February keeps between 2600 – 3300, while in December the number increases to 5800-6600).
Third Key Finding
None of gift card were limited to products or customer groups.
Customers are using product-specific or customer-specific codes only for discounts, while gift cards are created more as a payment method.
Creation of discounts and gift cards currnetly in the panel
Fourth Key Finding
3 support developers got ~5 questions about combining gift cards and discount codes on the same order in past 2 weeks.
Documentation could solve some issues, but because many customers face the same problem it’s good for the company to look into UX.
Sources: Outlook, Slack, Freshdesk
Problem Statement
Goals
Get few to no requests about gift cards.
Modernize the interface for easier management.
Increase customers satisfaction with more flexibility in promotions.
Inspiration, competition analysis
Before diving into design I like to look for different solutions to find best aspects of each.
Jakob’s UX law: Users expects websites to work similarly to what they experienced on different platforms.
I had a look into discounts / gift cards solution from:
- Shopify
- WooCommerce
- PrestaShop
- BigCommerce
- SquareSpace
Based on competitor’s analysis:
- Gift cards are used as a payment method
- Discounts are related to products or customers
- Gift cards and discounts are separate items that can be combined on the checkout
Brainstorming & Gathering requirements
After discussions with stakeholders and developers I am preparing confluence page with all necessary details regarding the project that will be updated along the way.
Major improvements to the design
1. Separate gift cards and discount codes in the navigation
Hick’s UX law: The time it takes to make a decision increases with the number and complexity of choices.
By simplifying the gift card flow and separating it from discounts it’s easier for users to achieve the goal without interruptions.
- Easier navigation for different types of a discounts
- Educating customers about different purposes
- Before „Discount vouchers” included both Discounts and Gift cards. The change also clarifies the structure.
2. Allow to combine multiple discount codes on the same order.
- Allowing customers to create advanced promotions
- More flexibility in creating sales or partner programs
3. Making gift cards as a payment method with own settings.
- Separating usage of gift cards from seasonal promotions
- Allowing customers to use gift card and discount code on the same order
- Simplify the creation flow
4. Progressive disclosure for creation forms
Not relevant fields like creation or modified date are hidden when creating a gift card / discount
- Helps focus on important fields
- Reveals more complex information on the next entry
- Smooths the learning curve
5. Building mobile version
- 27% of our customers are using mobile version, and all legacy pages are not mobile-friendly
- taking care of base WCAG requirements
6. Adding consistency in UX and UI with other features.
Aesthetic-Usability Effect: Users often perceive aesthetically pleasing design as design that’s more usable.
- rebuilding legacy interface to new UI helps keeping brand consistent
- updating legacy code takes more resources and time
Final Solution & Design
Creating gift cards with new UX and UI
- Updating Information architecture and UI clarifies the overview
- Own creation flow helps to separate gift cards and discounts purposes
- Gift cards can now be easily found in the navigation
Guiding user from start to finish
- Having proper flow from start to finish increases customer satisfaction after quickly completed task
- Improves the awareness and adoption of the user
- Helps achieve goals smoothly
Managing discounts based on products, customers, and many more.
- Keeps the flexibility in creating advanced promotions
- Perfect for both simple and complex online stores
All types of discounts in one place
- Simplifies the navigation
- Easy filters for quick search and filtering complex overviews
Prototype and dev preparation
At the end I prepare screens with the status accordingly, adding notes where needed, and, which is my favourite, I am recording a video explaining the flow for future reference.
Below you can see some of my designs prepared for implementation.
If I had more time...
- Further explore different settings of discounts types to simplify it even more.
- Add more advanced discounts like “Buy X get Y” or quantity discounts.
- Look into documentation and record useful how to’s for customers.
- Pay more attention to WCAG guidelines.
Thanks for reading!
If you have any comments, suggestions, or look for UX project, feel free to reach me out!