Alberto Jannarone
- Product Designer
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 & ANIMATIONS
Easing and offset & parallax motions were used to create a continuous connection and information flow while maintaining a constant brand image and experience.
HOVER STATES & FEEDBACK
More distinct animations and colour/shape changes were introduced to provide better feedback and click-ability.
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.
