Just got off work. I’ve been working on a design for a Coupons landing page for a mobile app. While it’s fresh in my mind, I want to knowledge dump some things I learned from some competitive shopping of some of the leading e-Commerce mobile apps. First question I’m trying to answer is whether a dedicated coupons landing page makes sense or not. I want to see how the e-Commerce shopping apps take users from just opening their app, into viewing coupons. While this isn’t an exhaustive list of tips (disclaimer 1), and it’s certainly only based on what I learned in a short period of a couple days (disclaimer 2), I’m certain that anyone willing to put in the due diligence will also find many of these tips to be true. In my competitive analysis, I downloaded and reviewed 15 e-Commerce mobile apps. Of the 15 apps, I found 10 apps that actually had a coupons landing or savings page of some kind: Wayfair, Kohl’s, Home Depot, Amazon, Best Buy, Macy’s, Walmart, Barnes & Noble, Bed Bath & Beyond, and Target. All great companies to look to for design tips and leadership.
Coupons landing pages
Getting to e-Commerce coupons from any screen should be relatively easy. Whether you are accessing from a link in the menu, tapping a button from the apps primary navigation, or simply clicking a panel on the home screen, the coupons, savings, deals, or offers are usually pretty easy to find.
This method of serving up the coupons is when you provide a link either in the menu of the app, on the navigation of the app, or from a button on the homescreen which when clicked ports the user into a dedicated categories, or filtered view of the coupons. When several items exist in a catalog, knowledge base, article collection or database, designers often will come up with different ways of making individual items more accessible through grouping. This is true even when working with coupons. This information architecture work is the designers way of trying to break up the coupons into some logical chunks.
In this example, Wayfair has gone a step further. Not only did they group the coupons by shopping category, but at the top, you can see that they’ve taken the further step to additionally group by Featured, Sales by Department, and Upcoming Sales.
Tip: If you are going to offer coupons, and there are going to be many of them… consider designing a landing page, acting as the access gateway to your coupons. The big dogs are groupong their coupons–maybe you should to.
High level coupon groups
Information architecture is just one of those things that is a critical foundation concept for all designers. Information architecture is often defined as being the information grouping strategy. It’s how we break up large amounts of data. Some of the most common coupons landing page filters I encountered in my investigation were: current deals, upcoming deals, expiring soon, deal of the day, today’s deals, top deals, weekly ads, and simply by category. Some actually broke their deals out by warehouse offers versus online offers.
In this example, see how Amazon has broken it out by “Right Now”, “Upcoming” and then another group called “Watching”. This specific design seems to address our tendency to want to stay in the loop. I’m certain that they must have received feedback from users stating that the users wished that they could just be notified when the add is available for upcoming ads. Good job Amazon. Thumbs up.
Tip: Conduct a card sort exercise where you list out all the types of coupons on cards. Have the users group them into their expected groups. Do this with a bunch of users. Look for patterns. Use what you’ve learned hear to put the e-Commerce coupons in the order that meets most the user’s expectations.
My clipped coupons
One concept I saw in a few different applications was the idea of clipping e-Commerce coupons to a shopping list. When I say a few, I mean 3. The idea here is that a person would go to the coupons section and then find a coupon that they want to use, so they’d somehow add it to their in app shopping list. Is it a great idea? I don’t think so. For one, today’s shoppers are increasingly used to the digital. Let’s face it, this is an attempt to make a metaphor from the real world appear in the digital. The term Skeuomorphism comes to mind. Not all real-world processes work well in the digital.
Close analysis would reveal that Home depot has actually tied the savings right to the product itself instead of having a separate coupon. A user still has the ability to add the item to a list, but that’s just it. It’s the item itself that goes on the shoppers shopping list–not a metaphoric coupon. In the example screenshot, it’s also worth noting that Home Depot puts the visual emphasis on adding the item to cart.
Tip: Avoid the real world metaphor of “clipping coupons”. Users may find it confusing, and at the very least, it’s not common industry practice to match up to.
There were a bunch of other tidbits and morsels that I uncovered in my competitive analysis. Some things I want to do, and some things I don’t think are good. Isn’t that how it is with design? I want to give an honorable mention to the idea of notifying users when a coupon is available. I also want to mention that the easiest to use coupons were those that had their own clear/distinct section, clear information grouping, and clean visual distinction from all the other business on screen.
Hope it helps. ~Lucas