Beautiful lake with brown vegetation. Male stood facing towards us on the edge, looking out to the horizon wearing a water jacket.

We’re made for travel

UX / UI

Wireframing

The goal of this project was to start off small and aim big. We were drafted in to look beyond any campaign activity and help realign the website to the master brand and the users needs.

Current restrictions meant the entire website took its lead from its sister company, Regatta.

It was our first major challenge; steer the brand away from the Regatta platform, which was not fit for purpose and only served to confuse its core customers.

The aim was to get our team embedded with the client’s developers. We’d scoped out a roadmap, broke it down into various sprints to chip away section by section to realign with their brand identity.

Craghoppers product page in-situ visual with blue jacket

Establishing a new order

We wanted to elevate the products with a clean and subtle UI. Aiming to remove or reduce any useless information based on the Regatta model and strive for a premium look and feel.

The information got reordered and product codes were repositioned down the page. Product name, price, colour, sizing and primary CTA were our focus for the user to see immediately. Delivery information and product guarantee on the existing template were further down, but from understanding the users, these were key drivers for conversion.

Comparing product colours

The existing platform didn’t allow for the user to toggle between product colours without loading a new page every time. Naturally, users wanted this to be a seamless transition so they could easily compare. The main focus here would involve a technical solution for how seamless the URLs transition.

From a UX and UI point of view, opting for a colour swatch rather than a thumbnail would put more focus on the colour rather than a variety of inconsistent image styles. Creating a rule on what each image should be in the first, second and third carousel would provide a seamless comparison transition between products.

Full bottom to top visual of the desktop product page for Craghoppers, redesigned

Get in touch

Got any questions or a new project in mind? Drop me a line.

Sent! Thanks so much, I’ll be in touch.
Have you entered your details correctly?