Starting From Scratch
Even though we had only recently launched our highly successful standalone mobile site in 2010, our increased tablet and mobile usage, as well as industry trends told us that responsive design lay ahead of us. A fully responsive design would allow our team to maintain one codebase, designed once, with one set of flexible assets (Served from Scene7).
Comprehensive SWOT Analysis
We created an inventory of every single page, task, or possible user flow. Items that weren’t readily apparent surfaced through a comprehensive investigation of our analytics. All of this research was necessary to help inform any insights derived from the facts and data,
Touchpoints
In order to understand the bloodflow of the ecosystem, we first created a touchpoint map. This was not only useful in building out task and user flows, it was also an invaluable tool for presenting our viewpoints to the senior leadership team.
Opportunities
We knew that we had several opportunities to help users convert. Our checkout pipeline was a primary focus from the beginning.
Mobile First
I urged my team members not only to think “mobile first,” but “context first,” and to always consider the overall user experience as well. The end-to-end bloodflow of the shopping experience, even after the users left the site. This included understanding the OMS, and the potential for order status alerts by text.
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.
