Product Design - Website
UX / UI Design
One Method Toronto
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.
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?
Design an experience that is on brand but has a fresh and new feel to it.
Establish an improved Information Architecture and site navigation.
Work within the organization's current design system and limitations.
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.
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:
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.
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.
Clean simple and elegant I found inspiration in this image style for a Services Page hero banner.
Clean and simple, highlighting only key information and providing the user with a stress free enjoyable experience.
Motion was a key design element to this design. I wanted something that helped create a sense of calmness and elegance.
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.
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.
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.
Is there anything specific you wish to gain when visiting the Haagen Dazs website?
Explore new flavours and offerings
Learn about the nutritional information
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.
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?
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.
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.
HOVER STATES & FEEDBACK
More distinct animations and colour/shape changes were introduced to provide better feedback and click-ability.
A full colour background, bolder letting and easier to navigate product information were used in the new design.
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.