An established destination for wine, reborn

Northside wine and spirits was an early online success story. They were early adopters of this crazy new thing called “e-commerce” and reaped the benefits. Their site served them well for many years, but the wine industry matured and the competition got fierce and their more than ten-year-old site was simply not up to the task any longer.

The challenge was to rebuild the site with a modern, accessible interface, a user-friendly search, and preserve their established SEO value. Other goals included improved tools for managing inventory and greater messaging around their membership program.

Utilizing the no-handoff method, UX and user-behavior were the guiding lights of the project from start to finish. The UX team are called UX guardians (to distinguish from UX as a shared goal of all teams) and act as project management. After gathering basic specifications, our next task was analysis of the competition, which had grown exponentially in the decade + they had been selling online. With a good idea of the market under our belts we created our lists of shared goalposts – shared by all stakeholders and project disciplines.

These goals included:

  • Design: responsive, accessible, and minimal UI. Visual emphasis on the beauty of the wines themselves, and the deep catalog.
  • Behavior: promote memberships. Encourage wine exploration and longer visits with more pages.
  • Performance: faster than the competition, which means no more than 2.25 second load times in NY.
  • Security: above API compliant and follow modern best practices for ecommerce.

With our goals in mind we immediately put our findings into a lo-fi wireframe that would become – eventually – the bones of the final site. Wireframes are the shared language of the web. Visual, interactive, intuitive, responsive – all stakeholders can grock and evaluate a wireframe from its earliest stages. We used the lo-fi wireframe stage to work out questions about sitemap, site architecture, information architecture, and content hierarchy.

Now that we had a usable MVP in place we moved on to user testing. Northside wines and spirits employees, many of whom are not familiar with their existing site, but know a lot about wine, had valuable insights about the wine search and were able to point out test scenarios that would never have occurred to our UX and dev teams.

Customer volunteers had important feedback about what they actually want from a wine shopping experience: more detailed information about each wine, more suggestions of new wines to try, greater emphasis on price range over region or even varietal.

Successive rounds of user testing by customers and wine experts clarified the site goals and refined the user interface responses. Once we were walking in the customer’s shoes we laid out on paper and then built an interface that improved the customer experience directly in the lo-fi wireframe scaffold. In a no-handoff project I usually skip mockups in Sketch or InVision and go straight to lo-fi wireframe. All client reviews took place in the browser (and on several devices), the most comprehensive method

As the lo-fi wireframe reached the end of its useful life it metamorphosed into a hi-fi functional wireframe, incorporating successive iterative layers of UI refinements. Because all parties were involved with the interface from the beginning there was never any “big reveal” phase to shock the client and lead to potential reversal. Any reverses were small and caught pretty quickly, and the customer comfort level grew with each iteration setting us up for a smoother, no-drama launch.

By having all teams work concurrently on the same wireframe we also avoid any “throw it over the fence” moves, where design is completed and thrown over the fence for dev, or vise-versa, or the “completed” project gets thrown over the fence for security and accessibility checks. In a no-handoff project all teams are involved, to varying degrees, in all phases. UX is the thread that binds them all together.

By the time we completed iterative functional, accessibility, security, and user testing the client was chomping at the bit to launch. “Failure to launch” syndrome rarely rears its head in a no-handoff project because the client is so familiarized with the project that it feels inevitable. They are often surprised by their live site, and that the new site isnt live already, but there are no remaining surprises in the new site.

In no-handoff UX continues to be involved post-launch as the primary client interface. I periodically review sales stats and analytics, tweak interface elements with the UI team, functional elements with dev, and so on. The northside launched recently so we are gathering and watching statistics and preparing for our first evaluation period. So far sales numbers – the ultimate barometer for any ecommerce site – have exceeded expectations but fuller evaluations will wait until we have gathered enough data to paint a fuller picture.