Devices

The Role

I was tasked with taking the existing Hugh Rice website and giving it a modern look and feel as well as creating a new mobile first shopping experience. The site had seen a rapid increase in mobile traffic over the last few years and needed a site that was fully responsive.

For an ecommerce website, “responsive” can be tricky, mainly because there are many screens to think about, from the initial searching for a product to stepping the user through the buying process whilst keeping them engaged. It was important that these were planned out well.

Sketches
Sketches
Sketches

Research

It’s important to remember when designing an ecom website that the key target is to help the user find the right product and checkout, so a lot of the research phase was based around this journey. I looked at the competition and also compared the previous two designs we had done at Strawberry to see where we could improve the site.

With jewellery, its all about the image and when you are making a purchase of this type, you need to be sure its right. It’s a different experience to purchasing in store where you can feel the product and try it on. What was clear early on was that we were not doing enough on the product pages. They showed a small image and required the user to zoom in to see the details.

Another key page to plan out was the results screen. Hugh Rice stock thousands of products, many of which contain multiple filter options, such as material, gender, type, collection, colour. The filter needed to be well planned out to make sure it was easy to use from mobile up to desktop.

Moqups

Design

After we were happy with the sketches and ideas, I digitised them into wireframes (see above) to make it easier when developing the site. The next phase was then to start visualising the pages.

During the design phase, I put all the slug graphics on the back burner so I could really focus on the user experience. The site was always going to be graphic heavy so I knew I wanted to create something that was quite minimal and elegant.

I began with the product journey focusing on the results and product pages from which I then moved onto the checkout pages. All the pages were designed at mobile level first, from which were then tested on multiple devices via the Skala tool.

The Hugh Rice brand pack contains a really bright coral colour. I was able to use this colour to highlight key cta’s which works really well.

Header (Mobile through Desktop)
Homepage (Browser)
Mobile and iPad
Product (Browser)
Product Results

Checkout Research

At Strawberry, we have tried various checkout styles and techniques, and with Hugh Rice I wanted to take it a step further and redevelop the process from the ground up.

One of the main changes for Hugh Rice was to change up the site header and footer when the user was in ‘payment mode’. This involved removing the main navigation as well as any links that could distract the user and prevent them from completing their purchase.

Another change that was brought in was asking how the user wanted to pay upfront. By moving this to the start, it allowed us to bring in the extra fields needed for paying by finance further down the field instead of having to introduce them at the end.

Checkout (iPad)
Checkout (Browser)

Outcome

The site has only recently launched so it is still too early to say if this has been a success or not but we have had nothing but great feedback form the client.