© 2020 Jon Crabb

Rowse Honey // Site Refresh

Rowse Honey condensed their range and made their branding more consistent. They wanted the website to reflect this change without letting the product finder pages get too long.


Problem

There were two challenges: display the condensed range effectively, and emphasise the premium nature of the Manuka honeys.


Solution

I proposed an expanding card design, which allowed all the honeys to be shown, without taking up too much space. This also allowed the user to expand the cards and see detailed information about each honey without going onto a separate page for each product.


As this project required advanced prototyping, I made video clips of each interaction design, to show the client. Several clips are shown below.


Rowse Honey product finder

User Flows

First of all, I mapped out how a user would progress through the current site, in order to understand the information architecture.


User flow 1: everyday honeys

User flow 2: manuka honeys

User Testing

Users expressed differing opinions about jars vs squeezy bottles:

“I really avoid plastic bottles”

Users also expressed frustration navigating to the right info. Users wanted to find out about the honeys by clicking on the honey itself:

“You want to click on the pot! That’s natural behaviour, I really want to do that.”

Wireframes – Product Page

The first solution was to put all of the honeys on one single product page. I made the following changes to better display the condensed range:

  • a grid layout, to accommodate the extra products

  • smaller hero image, allowing some products to be seen above the fold

  • tabs for ‘jars’, ‘squeezy’ and ‘Manuka’

Wireframes V1

Wireframes sorting buttons

Filtering options

This simplified the site considerably, and reduced the height of the product page.


Manuka honey was not given enough importance, however, and users did not have much reason to spend longer on the Manuka range.


Wireframes – Product Info – Prototype

In the proposed design, the product info is hidden at first.


From user testing, I discovered that users expect to click on the honeys, so this is not a problem.


However, the information about each honey (description etc) still needs to be available.


We tested two different solutions:

  1. New product description pages

  2. Expanding product cards

These prototypes tested well, but the flashier option 2 won out. It was quicker and easier for users to navigate.


Option 1 – New Product Pages



Option 2 – Expanding Cards


Option 2 – Expanding Cards (Mobile)


Wireframes – Home Page

We spit up the categories and had a product page for ‘everyday honeys’ and another for ‘Manuka honeys’


This allowed Rowse to emphasise the premium nature of the Manuka range.


The second version of the home page went with two full-width strips, clearly separating the two ranges.




Final Prototypes


Everyday honey

This prototype shows:

  • Journey from home

  • Squeezy/Jar toggle

  • Product cards

  • The recipe carousel



Manuka honey range

This prototype shows:

  • Journey from home

  • Manuka Info page

  • Manuka Range




Results

A UI designer refined the final screens and created suitable icons.


All changes were accepted and Rowse honey updated their website.


Final screens are shown below: