GAP – RESPONSIVE REDESIGN
2012  // UX Architecture, UX Design

GAP 2013 Responsive Checkout

BACKGROUND & OBJECTIVES

“How might we reduce friction in Gap’s checkout, so that mobile users are able to purchase quickly and efficiently?”

In 2013, GAP’s desktop checkout pipeline was being scraped by a third-party and served to mobile users via a proxy (a common practice at the time, as many retailers did not have the expertise or resources to develop their own mobile sites, and broad adoption of smart phones was still underway). As such, the mobile checkout was simply the desktop in addition to a heavy injection of external javascript and CSS, providing an extremely slow user experience. The company knew they were leaving money on the table in terms of mobile conversion rate. I was brought on to help formulate a hypothesis and facilitate a solution.

KEY CONSTRAINTS

We were not allowed to change any part of the checkout Document Object Model (DOM), as they had built a significant automated testing pipeline that could not be easily altered, and there was no modern element manipulation libraries within the system.

TECHNICAL ANALYSIS

After evaluating various open source libraries, it was determined that Prototype and Scriptaculous (two popular javascript libraries at the time) were not up to the job. Given the resource and timeline challenges (The new checkout needed to be in production within 6 months), the decision was made to use jQuery, a popular and lightweight javascript framework.

THE CHALLENGE

This was 2013, and “Mobile First” as a rallying cry was still a few years away. Responsive frameworks like Twitter Bootstrap were still in their infancy (And not applicable to our goal, which was to enhance the existing platform, not replace it). We knew that if we could at the very least remove the proxy and injected code from the mobile experience, refactor their CSS with the latest techniques, we could repurpose their existing accordion-style checkout to flow seamlessly on any device. This would be incredibly important to convince executives of our approach, while also laying the groundwork to eventually take the entire site responsive.

MY ROLE

I was tasked as a the UX Architect to help lead their team in identifying and understanding which technologies could be used, develop hi-fidelity prototypes that would be used not only for user testing, but also to assist the developers in creating the CSS Media queries and jQuery hooks that would allow the existing checkout to become responsive.


Drawing out Possibilities

Throughout the process and iterative reviews, I wireframed and documented screen architecture, visual designs, and all interactions. We had a complete inventory of all of the elements and how they currently functioned. This would serve as our bible as we addressed each section during the life of the project. 


Design Patterns

We rigorously analyzed every element on the page to determine whether we could transform form field artifacts, like radio buttons and dropdown menus, into patterns that could not only work for point-and-click on desktop, but touch-and-swipe as well. Small radio buttons, in this example below, became larger target areas suitable for all input devices. Tables became vertical lists, to allow users to scroll through the options. We also took the opportunity to switch from JPEG and PNG image elements to SVG (Although SVG was not widely supported at the time in most browsers, so we developed a “graceful degradation” approach via CSS that would function as browsers got up to speed). Most importantly, we were able to use media queries and javascript to repurpose and transform the existing elements on the client side, eliminating the need to make major adjustments to the testing automation. 


Interactive Prototype

This is screen recording of an interaction demo I built to evaluate user movement through various tasks (e.g., move through the modules, data entry, and validation). This does not include all possible paths the user may take, but it provides a firm grasp of the foundation and concepts mocked. User and usability testing was conducted over a period of several weeks in order to collect data points and evaluate user feedback. We partnered with Swim Studios, based out of San Francisco.  Click here to view the final version of the prototype that was used for testing, as well as creating the CSS media queries and javascript. The prototype is responsive – you can adjust your screen to see the various mobile breakpoints. 


Results, Legacy, and Takeaways

RESULTS

A/B testing over a period of 3 months revealed that our hypothesis was correct: due to significant performance increases, as well as the ease of use from the responsive approach, mobile checkout conversion rate increased by 18%. Once 98% confidence was achieved in testing, the responsive checkout was opened to 100% of the users.

LEGACY

The learning and processes from this project, as well as the successful introduction of the jQuery library, were still in place as of 2018, and eventually allowed GAP to take the rest of their properties fully responsive.

TAKEAWAYS

Given the constraints, and the fact that this was still the wild west of smart phone ecommerce, there isn’t much that I’d change about how we approached it. I would have like more user testing along the way for faster feedback, however given the short runway we were still able to validate our assumptions well enough to justify our approach. 

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from - Youtube
Vimeo
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google