The Malt Miller – website upgrade

25th November 2019 / by Richard Gray

We’ve been working with The Malt Miller for almost three years now and have just launched a significant upgrade to their e-commerce site.

The brief

Changing business requirements, recent analysis of website usage data, our own expert reviews of the site and some in-house usability testing suggested the site would benefit from some design and usability improvements.

Responsive web design for The Malt Miller

The aim of these changes would be to:

  • facilitate user journeys through the site to checkout;
  • make it easier for customers to make informed decisions and purchases on mobile devices;
  • increase sales of ingredients and commonly bought products;
  • increase use of the Recipe Generator feature;
  • reduce the bounce rate for mobile visitors;
  • become the first-choice site for brewing ingredients, equipment and advice and guidance from brewing experts;
  • become a site that customers return to again and again because of its ease of use.

Turnover should increase substantially as a result.

The practical elements of the report we presented included simple things such as:

  • undertaking a site-wide design upgrade;
  • using a larger sans-serif font;
  • making better use of page width on larger screens;
  • offering an improved browsing experience for mobile users;
  • utilising a more visible search feature;
  • revising how product pages in the shop were presented;
  • making a few subtle wording tweaks;

but we also included a recommendation to significantly change the way that homebrew ingredients were sold.  We intended to make it easier for both new and returning customers to quickly order and pay for their ingredients – especially on mobile devices.

Rob and Martin at the Malt Miller liked our suggestions and asked us to proceed.

Wireframing

As before, we spent a lot of time at the wireframing stage, planning how best to make the usability changes and how to present the ingredients in a way that encouraged ordering.  This time, we developed responsive wireframes for desktop, tablet and mobile – four different viewport sizes in total.

Responsive wireframes for The Malt Miller

We reviewed these regularly with the Malt Miller team and ran usability sessions with existing customers to gauge their reactions, changing what we had done accordingly.

Eventually we arrived on a model which everyone was happy with and so we progressed to build.

The design

The design part of the site was relatively straightforward as we had made a lot of the decisions around layout and element placement at the wireframe stage so didn’t need to spend lots of time fiddling with Photoshop.  The build part of the site flowed naturally from this work.

Ordering ingredients

WooCommerce is a very good e-commerce engine.  It’s free for one thing and offers some good out-of-the-box functionality but it only really works in one way.  This had been fine for the past two years, and was fine for ordering equipment or merchandise where it was clear what a product was before clicking on it to make a purchase, but when presented with 100 different types of hop or malt, making an informed decision was much harder.  Users had to move back and forth between category listings and product pages to review each product before making a decision whether or not to buy it.

Our solution was to develop our own custom ordering interface, based on JavaScript, which presented the products in a more concise way, drawing through pertinent information (such as EBC for malts or Alpha for hops) that would help buyers to make a more informed decision.

We called this the card ordering interface.

Malt Miller card ordering interface

Customers could choose their crush type and quantity straight from a card without needing to view a secondary product page.  A nice feature allows the price to be changed in real time as customer change the quantity.  Visual confirmation of product being added to your basket and that fact that orders all take place using AJAX calls from one page make it very easy to order different products

Everything still interfaced with WooCommerce – products were drawn from the database and orders were handled by the engine – we’d just added a more appropriate ordering interface on top.

Single page application problems

Essentially, we’d built a single page JavaScript application for this part of the site.  All ingredients, filtering, sorting and purchasing happened from a single page using AJAX to update on-page content.  There were no page post-backs or screen refreshes.  This offered customers a seamless browsing experience, similar to that which you’d find on a desktop application.

Browser history

Unfortunately, with single page applications, browser history becomes more of a problem.  Because there are no page refreshes, there is no browser history.  However, by modifying the URL each time the customer moved to a new ingredient type or applied a filter or sort order we were able to preserve the browsing history – making the ‘back’ button work as users would expect.  We used JavaScript pushState to achieve this, modifying the URL and artificially inducing that history.

Google Analytics

In a similar way, we had issues with Google Analytics and usage tracking.  We wanted to track a hit on each ingredient type or sub-category filter and again, without page refreshes, the tracking code wasn’t firing.

The solution, as before, was to manually trigger an Analytics ‘hit’ each time the page URL was artificially changed, but we needed to be selective. What we didn’t want was for the Analytics to record hits on pages where the only change was to the sort order, neither did we want Google to index this page as a competing ‘second’ page to the default sort order.

Careful manipulation of the DOM to force noindex properties to be added to the head metadata was needed whilst at the same time only triggering a hit on the Analytics when necessary.

Conclusion

Overall, we’re very pleased with how both the site design and the card ordering interface turned out.  Feedback from customers has been very positive and orders have increased as a result.

If you think you could benefit from any of the following, do please get in touch:

  • an expert review of your site to identify usability issues and potential improvements;
  • a deep-dive into your Analytics, looking for problems to address or opportunities to realise;
  • custom modifications to an e-commerce shop which could make it easier for customers to make purchases;

Recent work

The Malt Miller - website upgrade

We’ve been working with The Malt Miller for almost three years now and have just launched a significant upgrade to their e-commerce site.

Southwest Mosaic

A new website for a local specialist Victorian tiler. Features an inspiration gallery and 'before and after' shots of various projects.

A new website for SCR Air Ltd

Graphic design, wireframing and a set of products which can be easily filtered to help customers find what’s right for them.

Social Media Adventures

Focusing on simplicity and clean lines, our new website for Social Media Adventures sells the expedition experience.

DM Wheel Systems

Fluid, responsive and elegantly designed, the new DM Wheel Systems website showcases the range of products and services on offer.

Get in touch

If you think we can help with your next project, please drop us a line or call us. We’d love to meet with you to see how we could work together.

Our offices in West Swindon are easy to reach with free parking right outside the door.

Telephone:
Email:

Contact us