Express Responsive Redesign

2011 – 2012 // UX Architecture, UX Design

Express 2012 Responsive Redesign

“How might we combine all our Express’s shopping channels into one seamless experience?”

BACKGROUND & OBJECTIVES

We had just launched our standalone mobile site in 2010, however increasing mobile/tablet usage and industry trends pointed towards a full responsive site redesign. This would allow our teams to maintain one codebase, with complementary mobile/desktop design sprints, and one set of flexible assets served from our Digital Asset Management system (Scene7). 

KEY CONSTRAINTS

We partnered with Razorfish to speed the design and development process. While the sky was the limit in terms of what we could envision, working with a remote partner with no near-time visibility in the process produced challenges that caused the timeline to balloon. In short, we were playing an enterprise version of the “telephone game” during the design and implementation phase.

THE CHALLENGE

Our existing platform was a legacy codebase that was supported by a third party provider. We would need to select an entirely new platform (What would eventualy become Oracle eCommerce) and build out the new site there. This meant maintaining and continuing to support the existing site, while working with Razorfish to conduct research, user studies, create wireframes, prototypes, etc.  

MY ROLE

I was the UX manager for the duration of the project. In addition to working as a liaison between Express and Razorfish, my team and I were responsible for conducting research and providing creative direction for the redesign, as well as supporting ongoing feature enhancements to the present site. 


Channel Insights

Our analysis of our channels showed that mobile traffic was a third of desktop and climbing. While mobile conversion rate was lower, our assumption was that it was only a matter of time as well as delivering the right set of features that would change those metrics. 

Inventory Analysis & Documentation

We created an library of every single page, task, or possible user flow, documenting constraints that weren’t readily apparent through reviews of our analytics. We interviewed the customer service teams to create a prioritized list of features, bugs, or nice-to-haves that had been collected via customer calls.  On top of this, we performed a comprehensive competitive landscape assessment to understand what our competitors were doing. This was an older, waterfall way of doing things – trying to address everything at once. 


Mobile First

This was our chance to finally design from the top-down (or bottom up, depending upon your viewpoint). While I don’t have many assets from this period, I can tell you that our excitement as designers (and iPhone aficionados) was palpable. 


Check Out Our New Checkout

We were able to touch every part of the site, including the most important – the checkout. The redesign gave us the opportunity to put into play some of the patterns and trends that were delivering great experiences – like the one paged, accordion-style checkout design. This would adapt itself well to all breakpoints.  

It’s The Little Things

My team worked dilligently to find commonalities for patterns that would translate across device breakpoints. We designed, tested, built, and tested again (and again), an inline “Express View,” which would surface the standard quickview component on the page, rather than in a modal window. This preliminary model showed how we could keep the user in context of the collection while gaining more info about the product. More importantly. by working in conjunction with our UI developers, we were able to produce high-fidelity prototypes throughout. This allowed us to develop iteratively throught the project, and deliver production-ready code.  Click here to view an early version of the prototype. 

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