Walmart.com offers a coupon for customers to use for their online orders.
Customers need to understand the promotion benefits they are getting, the conditions they need to meet to redeem the coupon, and able to apply the coupon easily.
Increase customers' order basket size and their shopping frequency.
Problem Finding Through Research
Promotion is a program that touches many pages on Walmart.com. I began to specify what are the goals to achieve for each touch points. I use a customer shopping journey to look at the program holistically.
I use Competitive Analysis to identify common design patterns, and identify the potential UX issues I need to pay attention to.
Problem Solving Through Design Thinking
One of the UX problem I need to solve is: help our customers to apply the coupon easily.
To solve this UX problem, I have a few design iterations. I analyze each exploration’s pros and cons, judge them with the success matrix, and I try to find the best recommendation that meet all the goals. And I write up hypothesis for each design to prepare for user testing.
Among the 5 proposals, this is the winner solution.
This design solution present the coupon information right in the coupon box, and it is also easy to erase out.
I presented this solution to product/design leadership and got approved. There were further iterations to refine the copies and the next step is to do user testing and test my hypothesis.
Validate Design Through User Testing
As we do design, we have a lot of hypothesis and want to test them out. Usually we got the answers from A/B testing, user testing, micro-study or other analytic data. For example, for the winner design, I concerned that the customers might overlook the pre-populated coupon name. And luckily the user testing result indicates that this concern is minimal.
Since this promotion program is a collaborative effort between marketing and UX, we also want to learn about how does customer understand the marketing messages on the site, especially on top of the funnel. So I partnered with product managers to host meetings to communicate the research findings to marketing/creative, and also used help from UX content strategist to further refine the marketing messages. Since I am responsible for the visual presentation of the coupon messaging, I improved my visual design based on the user testing results as well. In this way, I made sure everything is aligned and the overall experience is intact.
Responsive Design with Mobile First Approach
I design with mobile screen first, and expanded the mobile design for all break points. Here is an example of the coupon ads responsive experience on the Post Add to Cart Page.
Use Happy Path to Keep All Stakeholders Updated
The promotion design is not just about the interface, it’s also about the operation excellence, such as customer care. This means: this project had all different levels of stakeholders, and I need to keep everyone in the loop. And I also need to keep the experience consistent across the site, across different platforms, online and offline. The key is communication. Having a happy path End to End experience can keep all different stakeholders and varies level of audiences to understand the experience quickly.