Ampre (A Figg Product) Refresh
Our team, consisting of a front-end developer, a product manager, and myself, successfully refreshed the user interface (UI) of Figg's cash-back product. We undertook the task of refreshing the front-end experience of our own company's product, Ampre. We aimed to create two distinct versions: a visually appealing lower tier version that involves having an option that replaces colors and logos, and a higher tier version that could be easily fully reskinned.
Modernized offer wall
Transitioned from a “list” view of offers to offer “tiles” to easily scale from desktop to mobile.
Featured “How it Works” section under the top navigation that is collapsable.
Mobile-first design.
UI design drives user understanding: purple is always clickable, green highlights and dark purple is for font and navigation backgrounds.
Mobile-first design
Smartphone users tend to spend an average of 3 hours and 15 minutes on their phones. Millennials spend more than 5 hours on their smartphones per day. It makes sense for designers to develop websites keeping the mobile audience as a priority.
When it comes to Ampre, this refreshed design keeps responsive layout in mind and leads with offer content. As there are space restrictions on smaller screens, we ensured that the most critical elements are prominently displayed.
Offer list vs. tiles
Switching from a list view to tiles is not only better for mobile but it also allows users to see more offers at once. The grid layout allows users to quickly compare merchants offers in an efficient manner. As you can see below, in list view, the offer cash back amount is further away and harder for the consumer to quickly scan.
Delivery and take-out tags are now removed and placed in a from on top of the merchant logo and are easily scannable on the top of the tile.
To follow accessibility standards, merchant name and offer amount are switched from using primary brand colors to black to ensure WCAG 2.0 AA color contrast guidelines.
Consistent tile layout
The tile layout was designed with consistency in mind to accommodate a variety of offer types. Users can easily decipher what typer of offer it is by recognizing the tile differences, like “boost offer to 10%” and online vs. in-store.
Offer boosts, bonuses and mulitpliers are a big deal, so we highlighted that as such. It is important to call out the special nature of these offers so users understand the value and urgency of redeeming them.
An addition to the offer tile is the activation checkmark. This checkmark allows users to quickly reference if the offer is immediatly activated or if they have to take another action.
*Always On and Boosted & offers types are used as examples and might not apply to your offer type structure.
Toggle view for “how it works” section
Previously, the how-it-works section was taking up a lot of “above the fold” real estate on the offer wall, especially for users who already know how the program works.
It is best practice to show offers as quickly as you can on the page. Now viewers can scan more offers quickly with the switch to a toggle view.
Online and in-store sorting
Across the competitive landscape, it is a best practice to off the ability to sort by in-store or online so that users easily know how to redeem their offer.
Best practices allow users to:
Sort offers by the ones closest to user
Allow users to filter offers to only show local/in-store offers
Offer users a map view of local offers near them
Provide tagged labels of offers that are in-store vs online
“Load more”
Looking at Baymard Institute, a top e-commerce user experience research team, for guidance, it is suggested to “avoid "pagination" and "endless scrolling" on both desktop and mobile sites. Instead, use “load more” combined with lazy-loading for category-based product lists, and use “load more” for search results.
The offers fall into the spec-driven lists category since users will be comparing offers values, boosted offers, locations, brands, and more. So how many offers do we display at a time?
With dynamic product loading in place, on desktop Ampre will load 50 merchant offers at once and 30 items at once on mobile.
