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.
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.