Salted_Caramel_Plinth.png

The redesign of the Haagen Dazs Canada website.

 

Type

Product Design - Website

Role

UX / UI Design

Team

One Method Toronto

Tools

1_hT6s027LBQXQ9huZX1oVmw%402x_edited.jpg
invision logo.png

DEFINE

hdz-nondairy-tub.png
images.png

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?
hdz-prod-tub_classics_mgt.png
A.

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

images.png

Establish an improved Information Architecture and site navigation.

B.
hdz-prod-tub_classics_wcrt.png

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

Chocolate chunks

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. 
hdz-prod-tub_classics_wcrt.png

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.

Screen Shot 2020-02-04 at 4.49.12 PM.png

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

haagendazs_classics_cof.png

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.

559-5598214_chocolate-png-image-download
Simplified Product Gallery
Strawberry-PNG-Free-Download.png
Refreshed Hero Banners
5b9b409f-1a18-448b-8ad8-6df0a013fbae-van
Improved Site Architecture
istockphoto-1188345196-612x612.jpg
Larger Visual Presence
1280px-Caramels.jpg
Desktop HD Product Category .jpg

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

hdz-prod-tub_classics_wcrt.png
hdz-prod-tub_classics_mgt.png

After

HOVER STATES & FEEDBACK

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

Before

hdz-prod-tub_extraaz_cce.png

After

hdz-prod-tub_extraaz_rr.png

PRODUCT PAGES

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

Before

hdz-prod-tub_classics_str.png
Screen Shot 2021-02-05 at 10.10.14 AM.pn
Screen Shot 2021-02-05 at 10.10.14 AM.pn

After

Salted_Caramel__lidd-off.png
Screen Shot 2021-02-05 at 10.10.29 AM.pn
Screen Shot 2021-02-05 at 10.10.29 AM.pn

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.

Screen Shot 2021-01-22 at 11.48.42 AM.pn