Comparison Table
Builder Tool

Design a tool to enable brands to build their own comparison tables for their products, that will be available on over 1600 global retailers.

Getting started

The Process

Every project requires a well-defined process, and this one was no exception. We adhered to the principles of the design thinking process, an ideology that priorities placing the user at the forefront, also known as user-centered design. This ideolgy has 6 main steps to follow but by no means is this a lineal process it's often thought of as cyclical.

1.

Empathise

2.

Define

3.

Ideate

4.

Prototype

5.

Test

6.

Implement

step 1

Empathise

This one of the fundamental stages in the design thinking process. This is where we get a good understanding and empathise with the people for whom we're designing for. This step helped us gain deep insights into the needs, behaviours and emotions of our users.

User Personas

User Journey's

step 2

Define

This step helped ensure that the design solution(s) were user-centred and aligned with the real needs and goals of the people they are designing for. We used this step for framing the design problem and ensuring that we had a clear and shared understanding of the user's needs and the issues at hand.

A Brand Manager needs a way to build comparison tables for their products in order to maximise shopper engagement and sell more products.

The business needs a way to to reduce the development time it takes to build a comparison time so that the company saves money.

step 3

Ideate

This step was the creative part, where wireframes of potential solutions were produced along with brainstorming different ideas a lot of which didn't make the cut.

Wireframes

step 4

Prototype

Once I had produced some wireframes and shared them with stakeholders for feedback, I begun to make these ideas into a Axure prototype. I wanted to create as real experience as possible for user testing, so that I could really study the user's behaviour when interacting with the tool.

View Axure prototype here >

step 5

Testing

One of the most important steps in my opinion and one of the most enjoyable. For this exercise I decided to user test in person to really study the user's behaviour to identify any flaws or sticking points within the user interface.

Myself and the product manager, recruited five users to test the prototype, mainly project managers as these and brand managers are going to be the main users. We conducted the user testing sessions in the office individually. We set the project managers a task to do and asked them to think out loud when completing the task.

Goals

  • Identify feelings towards the UI
  • Identify sticking points within the UI
  • Identify how easy it is to build the tables
  • Identify how easy a user can get through the whole process
  • Identify if users understand how to order products within the comparison table
  • Identify if the user understands the display options

User Task

"Dyson have come to us with a request for a new comparison table, to compare three vacuum products in their range and they want this to be displayed on a product page".The comparison table needs to match the following criteria:Country needs to be English UKPrimary language needs to be English (UK)(en)Available on all retailers

User Feedback

"The process isn't difficult but it takes a bit of guesswork. Each section is quite simple but having slightly clearer signposting e.g. this step to do this then this step may make it even simpler".

"I felt the process was very easy and having the step by step modules made it clear what needed to be done at each stage".

"Attributes & Product Specification Upload section: all the instructions are there. However, it took me a while to understand how this section work, I would probably rethink of the layout to make it more intuitive".

"Attributes & Product Specification Upload section: all the instructions are there. However, it took me a while to understand how this section work, I would probably rethink of the layout to make it more intuitive".

Iterate Based On Feedback

  • Clearer signposting is needed throughout
  • Clearer explanations on each step
  • Sample excel template to be added
  • Help button to explain what attributes, spec values, and spec icons are

step 6

Implement

I scheduled in a final run through with tech, just to make sure they were clear on the detail of what they were meant to be building. We had previous run throughs with the tech team to show them the prototype so this was just a final check to make sure they had everything that they needed.

Recent Projects

What People Say

"Glenn complies with the highest requirements, and keeps pushing the boundaries and the limits of innovation, with a desire to achieve higher levels of performance. I'd say that he is a force for efficiency and progress for any company. In his time of SMI he also took big steps in being able to face clients and simplify the complexity of the systems he manages for those who don't know digital. A very hard working and positive element to have".

Mickaël Gootjes - New Business Director SMI

"During my time working alongside Glenn, he showed great efficiency in developing and implementing new digital initiatives into the company's operations. Such initiatives provided added value to existing services, allowed for new service offerings and assisted in the overall effectiveness of the marketing portfolio I managed".

Nicholas Carroll - Communications, media and digital manager

"I have worked with Glenn both during my time at Sportfocus and also on a freelance basis. I’ve found that Glenn approaches each project with 100% commitment offering new ideas with his in-depth knowledge of the digital world.

Glenn has a great eye for creative design, delivering a fabulous result at the same understanding fully what the requirement was. He’s always a pleasure to work with and I very much look forward to working with him in the future.".

Pritesh Patel - Director P-19 Media