Canon Europe

Website Redesign

A much needed redesign for Canon Europe to reposition it as the world-leading innovator on digital imaging technologies.

image-hero

Introduction

For Canon Europe we redesigned the entire website and introduced a customisation strategy to ensure fresh content is presented daily. At the end of the project we delivered templates and components that align with the high-quality of Canon’s imaging technologies. We completely  revamped the key pages and introduced a detailed image gallery with stories to inspire visitors.

Alongside this, we developed a new IA that is backed up by user research. The new IA led to a completely rethought navigation that makes it easy to navigate to specific products or other sections.

We also introduced a ‘My Canon’ section, where users could favourite specific products, bookmark articles, and have a support hub for the products they own.

Topping this all off, we proposed a customisation strategy to ensure returning users will always see fresh content that is relevant for them.

canon-IA

My role

The team working on this project comprised of four designers, two UX designers, two front-end developers.

I was primarily responsible for concepting, testing, wireframing the templates and components, and redesigning the IA/navigation. 

In addition to these tasks, the Lead UX Designer and I were responsbile for writing the acceptance criteria for each component. This was important for defining the rules of a component. 

Our process

Our process

We worked in 2-week Agile sprints. In each sprint we conceptualised the ideas, created sketches, followed by wireframes and designs. At the end of each week, the annotated wireframes and designs were sent to the client for feedback.

Confluence was our primary documentation tool and JIRA our way of keeping track with the work.  All the wireframes were created in Sketch, the IA in OmniGraffle, prototypes in Axure, and user testing done through Skype calls with users mirroring their screens while having the Axure prototype open in their browsers.

image-wireframes-1
image-wireframes-3
image-mockup-1
image-mockup-2
image-mockup-3
image-mockup-4
image-mockup-5
image-mobile