A new look for Heist

I was the lead designer on a site redesign for Heist. They’d just engaged an agency who created new print guidelines and I worked closely with the creative director to translate these for web.

The site itself was a re-platforming project as they moved to BigCommerce. This involved regular check-in with the internal and BigCommerce engineers. The whole project was done in 3 months.

Methods

Tools

Re-defining the Heist site

Objectives: • Create a new design system • Increase conversion on mobile devices • Simple shopping experience • Surface reviews and customer service • Slick and informative site

The previous site

Previous site

User testing
Key learnings:
1. User found shopping complicated
2. No cohesion between brand and shopping on the homepage
3. Shopping list pages confusing
4. Navigation is confusing
5. Customers interested in reviews not press

Objectives
Objectives from learnings:
1. We need to improve our conversion rate from the homepage to shopping
2. Brand and shopping feel disconnected
3. Product page needs to be consistent and load time quicker
4. Showcase trust pilot reviews
5. Introduce cross sell and a wider shopping range

Mapping out a new site architecture

Site architecture

This exercise helped to structure the site design into three key pillars E Commerce, Brand and Content. These pillars then dictated three key products to wireframe and prototype. The exercise also helped categorise shopping pages and find a place for reviews, help and customer service.

Wireframe

• Creating a simple to use and fully responsive shopping components • Creating a mobile first navigation • Brand and content pages are a master template than can be used and built in the CMS • Organising information in the Navigation and footer based on the site architecture

Wireframes of key pages, navigation and footer
• Create an immersive flow on the homepage. A better cohesion between brand, shopping and reviews. Three iterations were prototyped and tested
• On the shopping list page, the same structure was used across the range of products
• On the shopping pages, keep the same structure to be used across shopping pages. Two alternatives were prototyped and tested.

Wireframe

User testing

Heist didn't have a huge budget for user testing so I set up moderated interviews with members of the team. I also did some unmoderated tests with friends and family asking them to answer questions on their experiences.