GiftCard_Thumb.png

REI Gift Cards

Gift Cards Page Redesign

REI's gift cards purchase page kept getting left behind in the design workflow. I tackled this project on a 1 month timeline to bring the current page into the modern context of the full scope of REI entities. The goal was to maintain consistency, update UI and expand the page to full width without disrupting the current flow. This work is part of 1 of 2 sprints that will create a more robust gift cards experience online for our users. 

In the first month after the release of the redesign, physical gift cards purchases made online increased by 227% of LY. A much larger increase than we could have hoped for in physical cards alone.

Duration: 1 month

My Role:  UX/UI Research & Design

 

THE PROBLEM

2017 Gift Cards in total drove $XX.MM in activations, 25% of those activations came from Digital. By improving customer experience on this page we predict a 5% increase in revenue over 1 year.

Gift card page enhancements:

  • Add gift card page option of 5 predefined dollar amounts + customer's own dollar amount.

  • As a customer, when on purchasing page for gift cards, I want the header to read Purchase an REI gift card, so that I know I landed on the right page.

  • As a customer I want to be able to read the 2 delivery options clearly so that I can decide on delivery method; email or first class mail.

  • As a customer I was to be able to select my gift card on this page so that I can continue with my path to purchase

 

THE PRocess

REI's current gift cards page leaves a lot to be desired. As a quick turnaround project, I was asked to bring the gift cards page to a more desirable visual interaction. While we were unable to effect the entire flow, there were some very key changes that we could make to update the UI and make the page a more robust and comprehensive experience. I started with a heuristic evaluation of our current site and identified a few key areas for improvements, mainly adding in navigational cues and using the full page as the canvas. Next I worked through some competitive analysis to identify opportunities to bring our flow and UI to a balanced state. Once our designs were identified I created a test plan and simple prototype to be tested via Usertesting.com. This allowed me to quickly iterate on existing features and designs and retest to make sure our flow and UI elements made sense to our users. During testing a new opportunity was identified to add in a preview button that allows the gift card purchaser to preview what the emailed gift card will look like to the receiver. Lastly, motion was then added to the designs to create a seamless experience from top to bottom. 

Updated Gift Cards page with uniform UI and a smoother user flow. Updated the grid, header, form flow, denomination UI, and cleaned up the gift card imagery. The page header now indicates to the user exactly where they are in context to gift cards.

Updated Gift Cards page with uniform UI and a smoother user flow. Updated the grid, header, form flow, denomination UI, and cleaned up the gift card imagery. The page header now indicates to the user exactly where they are in context to gift cards.

Original Gift Cards page utilizing old style and only half the screen for display. Inconsistint treatment to each card and no motion to convey next steps. Wonky spacing between cards and negative choice confirmation was used and was not accessible for visual impairment (not shown).