Canon Web UI Design

Overview

Canon was founded in 1937 in Toyko. They are best know for their cameras, printers and other imaging software. A brand at the intersection of adventure and creativity, left much to imagine for this UI refresh. Canon has two target markets. An older and extremely loyal crowd, and a new, younger group, that wants to start taking their craft more seriously. For this revamp, we will focus on the new, younger target, as we want Canon to remain competitive when it comes time for this group to invest in a product and develop more life-long customers.

Tools

Duration

8 Weeks

Process

Define Objectives

Research /Heuristic Evaulation

Competitive Analysis

Establish Taskflows

Wireframing

Design

Objective

1. Update outdated UI and create a design system.
2. Simplify the PDP to be more approachable to new users.
3. Inspire users.

Challenges

1. Site is dated with many inconsistencies throughout.
2. Products have a great amount of technical information.
3. Site is lacking personality.

Heuristic Evaluation

Homepage

Inconsistent CTA styles. Overwhelming filter. Order of filters doesn't make sense, for example filtering by price is irrelevant until you pick a product category. Uninspiring imagery.

Featured Product

Difficult to see photo of product. Mentions having products for beginners but is lacking first-time user-friendly language.

Filter

Options are very close together making it easy for user errors. Small text and lack of contrast make this difficult to read for people with vision impairments.

Product Detail Page

Inconsistent CTA styles. "Register Product" doesn't make sense as a primary CTA, as it is not possible to register a product until you purchase it. "Add to cart" CTA is far down on page.

Task Flow

This is flow evaluated and the focus of the redesign.

Homepage Prototype

Brief side-by-side of the homepage interactions on desktop and mobile.

MOBILE

1.0 Homepage

Photography and art are the main focus of the homepage. We want to get users excited about exploring with Canon.

DESKTOP

1.0 Homepage

The photography and art span across the screen to give and even more dramatic effect on desktop. Displaying the featured products in a way that also feels like art to keep users engaged.

Visual Language

Portraying each product to make them feel like works of art throughout the site.

MOBILE

2.0 Featured Product

Showing off what these cameras can do, with more photography in the hero space. Followed by gorgeous product shots and user-friendly details.

DESKTOP

2.0 Featured Product

Unstacking everything on desktop into a lawnmower type layouts, while being mindful to balance photography with product shots.

MOBILE

3.0 Filter

This filter is very technical, so a simple design with a lot of negative space was important.

DESKTOP

3.0 Filter

The filter remains similar in desktop with products to the right. Revisited the heirachy of information for each product and prioritized the product image, name and ratings.

MOBILE

4.0 Product Detail

Continuing with our clean design style to showcase the product. To keep the user from scrolling up and down, I implemented a tab feature to house all the product details.

DESKTOP

4.0 Product Detail

This page easily expands into a large view format and is a good example of why a clear primary and secondary CTA style was necessary. Within the product detail section, I created graphics to improve scan-ability that appeal tonewer users.

Color Sytem

Color

Inspired by the beautiful photos captured by Canon cameras. An expansion on the existing Canon red using warm colors that appeal to creative people and make the products pop.

Typography

Design System

Grid System

Final Thoughts

Although these are Canon's products on their own website, most canon sales don't happen here. How can we make using this site, opposed to bigger retailers, more beneficial? Maybe by infusing the brand into the website experience while giving plenty technical background on each product. Another benefit could be adding in a store locator, so you can see the product near you before you invest.

If I were to do this project again, I would explore the visual language a bit more. It's easy to make cameras look cool but what about printers, camcorders or camera accessories? How could we make each product just as exciting as the next?