Oct 2022
UI Design
UI Designer
How might be improve the user experience for our key customer during the busy holiday season outside of apparel purchase? According to a survey, aside from apparel, the next most in demand category for holiday purchases is giftcards. The challenge was to design a page that could educate our customer on all giftcard offerings to target their needs.
A design that implements a clear information hierarchy and allows customers to compare gift cards offerings in order to make an informed decision.
01
Based on scrolling and hotspot data it was important to shorten the overall experience and place CTAs above the scroll.
02
Consistent UI and visual design throughout page
03
Ensure that design meets all accessibility and legibility standards.
I conducted a competitive analysis that resulted in interesting key findings and inspiration. On the Gap Online team we do not have access to research or interview sessions but with the help of our merch and marketing teams I was able to gather data on our customers. Through this research I was able to pin point demographics on our customers and better understand their habits.
Our average customer during the holiday season is a female "proud professional" that typically has young children. She only shops online and on average spends around $126 per trip. During the holiday season specifically 90% of our customers are online shopping.
01
Other gift card pages were 3-4 times shorter than Gap
02
No other brands put as much emphasis on their partners brands on their pages. Gap was giving too much page real estate to other brands.
03
The Gap UI was outdated and inconsistent compared to competitors. Clunky and blocky overall
01
In order to create a successful project, its important to ensure that any future updates to this page can be made easily.
02
Each of these modules share a component library. CTA's, type, and color can be easily updated seasonally.
03
Images can also be update when rights expire.
01
The final design creates opportunity for strong photography and utilizes visual hierarchy and whitespace to guide users' attention and enhance readability.
02
The customer is able to easily compare gift card offerings in one space and make an informed decision. The customer flow is much direct.
03
The most important information for the average customer is easily accessible. Those niche customers looking for other brands or corporate plans can still access this information lower down the page.