gift card redesign
The existing Gift card number entry is unclear and creates confusion for users in checkout, resulting in high call volume for the contact center. According to the contact center, much of the confusion stems from the way the numbers are printed on the cards. To further complicate things, Academy has switched gift card vendors and the new cards have a different format, which means the new design needs to accommodate both new and old number formats.
We already had some insight from the contact center, and there was some very obvious low-hanging fruit in the existing design, so research revolved more around internal discussions with stakeholders to make informed decisions about the design.
I redesigned the gift card entry form to better communicate which numbers users should enter and where. I designed the number inputs to switch between the different number formats based on user inputs in order to provide an affordance. Designed more clear gift card confirmation, detailing card balance, applied amount, and order balance.
Informal prototype testing has provided confirmation of new design’s intuitiveness. Designs waiting for implementation.
Understanding / defining
The existing design indicated where to find the gift card numbers, but did not indicate that users needed to input the preceding “1” on the card, resulting in calls to the contact center.
New Cards vs. Legacy Cards
While the new card vendor has a 4-4-4-4 number format, which is much easier to understand, many legacy cards using the 1-6-6 format were still in circulation, so I needed to come up with an interface that could accommodate both users.
The confirmation screen was also in dire need of a rethink. The numbers ran together, and it didn’t offer any indication of card or order balance.
Affordance #1: Space Logic
If the originating digit was a “1”, the input would auto-space in a 1-6-6 format to indicate the user needed to input the preceding “1”.
If the originating digit began with a “6”, the input would auto-space to a 4-4-4-4 format.
Affordance #2: Tooltips
Tooltips provided another user affordance, explicitly showing the differences between the two cards and communicating which numbers needed to be entered and where.
The new confirmation cleans up the design and offers the user a card balance and order balance if the card only discounted the order.
If the card fully covers the balance, the page directs to the review page and the card balance is listed in the review details.
The clickable prototype performed well in testing. Unfortunately, my design never made it to implementation due to constantly shifting priorities within the organization.