Market Analysis

To start out this project, I began by looking at how other discount and savings platforms handle redeeming discounts and displaying user savings over time. I aimed to find out:

1. How discounts are presented

2. How a price cut is displayed

3. How savings are shown

4. How a search function operates

1. How discounts are presented

I instinctively looked at coupon and discount applications like Groupon and Honey to see how they display their discount offerings. I wanted to see how they design a digital coupon/discount, how much information is initially given before redeeming, when is a CTA given to redeem the discount and how much information the user needs before redeeming.

Groupon

Honey

As you can see, in both the Groupon and Honey example the design of the discount remains the same throughout the process of browsing for and clicking on a discount. If a discount is initially presented on a card, it should remain on the card after you select it, and vice versa. Also, I found out that it is not uncommon to present discount and savings information before tapping on the discount. However, the amount of information can be overwhelming unless the user is looking specifically for a certain amount of savings or savings threshold.

2. How a price cut is displayed

Most online retailers offer price cuts on their offers or in the checkout process. Since we wanted to implement a familiar and proven way of showing that change in price, we looked at applications like Honey and retailers like Amazon since they are key players in the online discounts and e-commerce industries.

Honey

Amazon

Most price cuts and in-cart savings are shown in an equation-style layout with a visualization of the price difference. In these cases, a slash through the old price, or a color coated price change like red or green is displayed to show a new price or money saved. These examples clearly highlight the savings incurred and the change in price from the old price to the new one.

3. How savings are shown

AAA has 9 different discount categories to choose from. Each category is given its own color to distinguish itself from the other and I wanted to show how to best display the savings that the user has incurred in each different category. By looking at credit card savings programs and online coupon and savings platforms, I was able to gain inspiration on how some of the biggest players in the industry display savings by category.

Chase Sapphire rewards breakdown

American Express Membership Rewards

Instacart

Visualization of total savings

Rakuten

In the Chase, American Express, Instacart, and Rakuten examples, the user’s savings is prominently displayed to show the value of their membership. In the Chase example, they do a great job at showing rewards/savings incurred by purchase category. Individual purchase savings are also shown in detail in the American Express and Rakuten example.

Instacart is smart with how they display user savings by showing savings incurred over the past 12 months. This is a great idea because, given the user takes advantage of these savings frequently, the user always sees a high savings value because the savings don’t reset every week, month, year.

4. How a search function operates

Before implementing our search function, I was tasked with researching the UX of how a search function should operate as well as best practices associated with searching for information on a website. AAA had yet to do a thorough UX analysis of their UI for search functions, and wanted me to find an optimized solution for this process.

To determine how our discount search feature should operate, I consulted online articles and chatted with our developers to determine best practices and feasibility for implementing this search function.

Research article: “Best Practices for Search”

https://www.uxbooth.com/articles/best-practices-for-search/

This article highlights some of the best UX practices for search functions and covers the do’s and dont’s associated with looking up information on a site with thousands of searchable data points.

Here are my main findings:

1. Prominently display search function

   • Make search box easily noticeable an accessible

   • Don’t hide or collapse

2. Accompany search box with a search icon

   • Icons help identify search function with a low level of effort

   • Most search icons have universal recognition

3. Clarify what users can search for

   • Hint to the users what is available to search (if you need to specify your search, if you can search by keyword, if you can search for multiple criteria, etc).

4. Use an auto-suggest

   • Auto-suggestion reduces user effort and guides them to their desired outcome

   • Users are generally poor at constructing searches

   • If they don’t find results quickly, later search attempts are even less effective

Speaking with Developers

I also chatted with our in-house developers about their ability to implement the search function and any blockers they could foresee experiencing.

When consulting with them, I aimed to find out how many search results to display before needing to load more items. They mentioned that the number of search suggestions displayed would ultimately rely on load times associated with the page. More items could be displayed if load times are fast, and less items if load times are slow. However, we wouldn’t be able to definitively determine that until they started hard coding the concept.

Prototyping

After gaining inspiration and design direction from our market analysis, I started prototyping the concept. To start prototyping, I referenced the market analysis as well as our style guide to create the initial design.

Process

As far as our design process goes, I would spend a day or two researching the problem and creating a solution for that based on my research and feedback. Then I would schedule a meeting with the Senior UX Designers, who I would then present the concept to. They would provide feedback and UX guidance to my flow, which I would then interpret, research, then implement. This process was repeated weekly over my 5-month contract.

Problem

When the user requests personal information, an error pop-up modal would appear if there were an error in the information provided.

The bug comes in when the screen reader tries to read the error modal pop-up. Instead of reading the pop-up, the screen reader would start reading the text on the screen behind the pop-up again, instead of reading the text in the pop-up.

Because of that, the developers needed a UX solution to help fix this issue.

In this final step, the screen reader reads the everything on the first screen well, but when the pop-up modal on the second screen appears, it re-reads all of the text behind it again instead of just reading the text in the modal.

We found out that the issue was the loading time it took for the error modal to appear. It took too long for the modal to appear, and because of that, the screen reader started reading the text behind it again before it was able to read the modal text.

Solution

After brainstorming with the senior UX team, we decided to eliminate the pop up modal and put the error message on the screen itself.

In our solution, placing the modal error text on the screen instead of in a pop-up window solved the loading time issue that was triggering the bug in the first place, since there is no modal to be loaded anymore. Also, when the error appears, the screen reader will only read the error instead of reading all the text on the screen again.