Goal: Ensure the customer is able to access shopping promotions - when they matter to her.
Solution: Create a dedicated area for the customer to find all of her deals in one place - that is accessible yet not intrusive.
I designed the promo drawer product (interaction design + visual design) from soup to nuts across 4 Gap Inc brands (Banana Republic, Gap, Gap Factory, & Old Navy) across all web and mobile breakpoints. I worked with one Developer, one Product Manager, and and one Project Manager - and the four of us partnered with each brand's separate marketing & web production teams to bring it to life.
This project was designed & built using lean methodology. I sat with my Developer the entire time I was on this team - and the transition between the wireframing phase, the prototyping phase, and the building phase were relatively seamless. Our team of 4 would sit together for every QA and informal design review.
A large part of my job as the designer was to create alignment with the broader team & brand partners. I presented my work and partnered with my Product Manager to evangelize the design across the enterprise and continually deploy on new brands.
Users couldn't find the relevant promotions when it mattered to them.
Customers didn't want to do the guesswork to make sure they were always maximizing their dollar.
In the competitive retail landscape, Gap Inc brands wanted to strike the right balance between being promotional while still maintaining brand equity and perceived value.
The current site layout did not make promotions accessible to the user on certain pages of the site.
Based on usability testing of initial concepts, offering users a one-stop-shop for all website offers as well as personal credit card rewards was highly favored. One participant even said, "this is bomb." We coupled this learning with Gap Factory's desire to use promotions to help sales, while maintaining brand identity and integrity.
What resulted was the promo drawer; a blend of creating a one-stop-shop for all things value related on the site, while not interrupting the shopping flow. This feature was originally launched on Banana Republic mobile web, and based on the success of the Promo Drawer on the BR mobile site, our team rolled it out to Gap, Old Navy, and Gap Factory.
Phase 1 Designs
The first step of my design process was to create a multitude of solutions, and not leave any options off the table. I used whiteboards, pen and paper, Sketch, and Flinto in this phase. Below are a cross-section of mid-fidelity wireframes I did for small and large breakpoints.
Phase 2 Designs
After the divergence exercise, based on user feedback and previous research, we landed on one small breakpoint version to test in the initial pilot.
Results of Initial A/B Test on Banana Republic were very positive. This started to build momentum across the enterprise as other brands gained interest in launching the experience.
Phase 3 Designs
Designing for Responsive
After the success of the small breakpoint test on Banana Republic, we ported the experience over to Gap Factory, and proceeded to test 3 large breakpoint iterations on our responsive platform. The small breakpoint experience is also shown below for reference.
Large Breakpoint A
Large Breakpoint B
Large Breakpoint C
Introducing the Gap Factory Promo Drawer
The first day of the Promo Drawer on Gap Factory Online was a strong success, delivering $81K in Net Demand at a 53.0% GM%, +74% to forecast and -1.0 ppts to forecast respectively. This was a +192% Net Demand comp while GM$ actualized at a +268% comp. Traffic came in above forecast at 76K with a conversion rate of 1.6%.
After one month of the A/B/C test plus live user testing sessions to gain qualitative feedback, we decided to move forward with Segment A. This segment financially performed the best, and users also were most seamlessly able to interact with this configuration as a part of their shopping journey.
After the successful launch with Gap Factory, the promo drawer experience was launched on Old Navy, Gap, and continued on Banana Republic sites - where you can still see them live today.
One of the biggest assets as well as the biggest challenges about a company like Gap is scale. While working with separate and disparate marketing, web production, and ecomm merchandising teams for each separate brand (and separate market) was unwieldy at times; we had the opportunity to learn, iterate, and improve our product and relaunch it with every brand in its most cutting-edge iteration.
Maintaining momentum through Lean
With the lack of traditional hard deadlines in Lean, it was important for us to continually self-impose new goals (i.e. launch with another brand) to continue to improve the product and develop it further.
Being a design team of 1
This was my toughest challenge. Being the interaction designer, visual designer, and managing the research for this project was doable but did not leave me much room to dive deep in any one area. I reached out to domain experts for feedback at every stage, but not having other design peers around me to talk shop felt like designing in a vacuum. I learned that it was more important than ever to do competitive research, conduct rapid user research sessions (which I ran in the Gap Inc cafe), go for walks, and reach out to designers across the org to meet up for coffee!