The redesign of the Haagen Dazs Canada website.

 

Type

Product Design - Website

Role

UX / UI Design

Team

One Method Toronto

Tools

DEFINE

The Problem

The old website had a confusing Information Architecture, navigation and outdated creative assets.  Our job was to correct these issues and create a design that would properly engage the customer with an on-brand  experience.

The Objective

Our primary "How to" directive was to create an updated website for Haagen Dazs Canada that was fresh, delicious and functional. 

How might we take the current website and create a fresh, updated and improved version of it?
A.

Design an experience that is on brand but has a fresh and new feel to it.

Establish an improved Information Architecture and site navigation.

B.

Work within the organization's current design system and limitations. 

C.

Need to know

It was important to understand the needs and wants of our stakeholders and target demographic.  We performed a heuristic analysis, reviewed competitors offerings, found visual and navigation inspiration and established our users journey. 

RESEARCH

Heuristic Analysis

One of the first steps we performed after our initial stakeholder meeting was completing a heuristic analysis of the current website.  This was done in order to assess the current shortcomings and to identify key elements that required updating. 

We looked at various elements and their relative KPI's such as:

Navigation

Content

Aesthetics

Functionality

Information Architecture

Another essential change was the information architecture.  A well designed and friendly structure generates loyal customers and encourages promotion of the website and brand.

We had to understand how content is currently structured and redefine these structures allowing for a better user experience. 

Navigation

Groups

Content

Hierarchy

Inspiration

When looking for inspiration I was looking for ideas that would assist me in creating a unique and different design that would differentiate the website from other similar business. 

STYLE

Clean simple and elegant I found inspiration in this image style for a Services Page hero banner.

ORGANIZATION

Clean and simple, highlighting only key information and providing the user with a stress free enjoyable experience.

MOVEMENT

Motion was a key design element to this design.  I wanted something that helped create a sense of calmness and elegance.

Personas

The Stakeholder (client) and the customer (user) were the two principle personas we designed for.  Both were researched and key insights for each was gathered.

view info

MOTIVATIONS

Is there anything specific you wish to improve or change on the Haagen Dazs website?

Organize and simplify the navigation.

Create a more fun and visual experience.

PAIN POINTS

Is there anything holding you back from achieving these design goals?

Large amount of product offerings are hard to organize.

Our visual content database is limited.

STAKEHOLDER

CUSTOMER

view info

MOTIVATIONS

Is there anything specific you wish to gain when visiting the Haagen Dazs website?

Explore new flavours and offerings

Learn about the nutritional information

PAIN POINTS

Have you had any difficulties in your current experience on the website?

Navigating the website system is frustrating.

 I would like to see more images of the product itself, not just the packaging. 

The Journey

How, when and why a customer experiences a product are key factors in how it is designed.  This journey starts from a thought and ends with a purchase.   Below are three parts of the journey that we focused on.

Sweet tooth strikes, let's see what's new.

Look at all these products! How can I find my favorites?

This looks good, what are the ingredients?

DESIGN

Time to shine

With all of our research complete we moved on to the design phase.  We took our insights, confirmed our visual style and brought our ideas to life through multiple iterations.

Mid-Fidelity Wireframes

Several design criteria were implemented to create the new and fresh look.  A mobile first approach was taken, ensuring all our visual elements and new architecture would work on multiple devices.

Simplified Product Gallery
Refreshed Hero Banners
Improved Site Architecture
Larger Visual Presence

Hi-Fidelity Wireframes & Prototyping

Having settled on a visual style, confirmed our structure and established our design system, we moved on to the hi-fidelity designs, prototypes and finally the finished product.  Improved hover states, subtle animations and more came together to create an enjoyable and fresh experience.   

MEDIA & MOVEMENT

Easing and offset & parallax motions were used to create a continuous connection and information flow while maintaining a constant brand image and experience.

Before

After

HOVER STATES & FEEDBACK

More distinct animations and colour/shape changes were introduced to provide better feedback and click-ability. 

Before

After

PRODUCT PAGES

A full colour background, bolder letting and easier to navigate product information were used in the new design.

Before

After

Mood & Colours

A strong visual identity was key in the branding and creating the right environment for the user.  The mood and feel needed to reflect this spirit.  Fun enticing Imagery, a simple colour palette and a clean minimalist design combined to create a complete user experience.