15 years of leadership and execution in digital product design.

Follow Me

Copyright 2017 Jake Clark All Rights Reserved

GAP – RESPONSIVE REDESIGN

2012  // UX Architecture, UX Design

Responsibly Responsive

THE SITUATION: GAP’s desktop site was being scraped and re-purposed to mobile users by a 3rd party (a common practice at the time among retailers, as many did not have in-house expertise to develop their own mobile sites). Point of fact, the mobile checkout was simply the desktop served via a heavily code-injected proxy, providing a pretty miserable user experience. I was tasked as a Senior UX Architect to lead their team in an overhaul of their checkout, laying the groundwork to eventually take the entire site responsive.

THE TASK: We were not allowed to change any part of the checkout DOM, and there was no modern element manipulation libraries within the system. Prototype and Scriptaculous were not up to the job.  Given the resource and timeline challenges, I felt strongly that by updating their JS libraries with jQuery, removing the proxy and injected code from the mobile experience, and rebuilding their CSS with the latest techniques, we could repurpose their existing accordion-style checkout to flow seamlessly on any device.

Drawing Out Possibilities

Throughout the process and iterative reviews, I wireframed and documented screen architecture, visual designs, and all interactions.


Reusable 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, but touch-and-swipe as well. Radio buttons, in this example, became larger target areas suitable for all input devices. Tables became vertical lists, to allow users to scroll through the options. 


Interaction Prototype

This is 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. Click here to view the final, production version of the prototype.

 

Results & Legacy

A/B testing over a period of 3 months revealed that, due to significant performance increases (By removing the proxy and injected code from the mobile experience), as well as the ease of use from the responsive window, overall checkout conversion rate increased by 22%. Once 98% confidence was achieved in testing, the responsive checkout was opened to 100% of the users.

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