Product Page Redesign

Debenhams - 2017

The challenge

Our Product page had been untouched for 3 years, and there were a number of key usability issues that had become clear during numerous user testing sessions we ran.

The key goal of this project was to solve these usability issues, and in turn improve and modernise the UI of the page, to give it a refreshed look and feel.

Identify Key Design Opportunities

To begin, we conducted an in depth assessment of the current product page.

When doing this, we pulled in key points we had found in our usability study of the page. We already had a lot of learnings from talking to our customers, so it was important we layered these into our thinking.

We also layered in points from a competitor analysis, to ensure we were aware of what other people in the market were doing on their product pages.

Finally, we layered in key design points that we could work on from a UI perspective, to improve the look and feel of the page.

Grid Structure

Design Workshop

After identifying the key points we wanted to focus on, we held a Design Workshop with the whole team to put forward these points and start generating ideas.

We began with a task to look at and rearrange the hierarchy of the page in teams, based on stats and usability issues.

We then the business outcomes & opportunities, as well as the new potential hierarchys from the last task to do a number of crazy-eights sketch exercises and come up with some out the box ideas for the page.

Grid Structure

Wireframes

We then moved onto the wireframing stage of the design process. I worked closely with a UX Designer on this to ensure we were happy from both a UX & UI perspective.

We broke the page down into digestable chunks and began wireframing them.

A lot of parts of the product page are quite complex in terms of business process so we also had to ensure all key stakeholders were involved at this stage to ensure we didn't introduce anything that wasn't going to be feasible from a business management point of view.

We also made sure to cover all of the different scenarios that could possibly occur on this page, to ensure our solution was robust and one that we could have confidence in.

Grid Structure

UI Designs

Once we were happy with the wireframes as a team and had run some MVT tests to validate them, we moved on to the UI Design stage of the project.

I took all of the materials we had created so far and began mocking up the different scenarios.

Throughout the process we had always kept the page displayed in the original 2 column layout we had previously. However when mocking up the page, I wanted to ensure we were being as forward thinking as possible - so I tried a few versions using a full width design, which we ended up using.

Grid Structure
Grid Structure Grid Structure Grid Structure Grid Structure Grid Structure Grid Structure