Heidi Chocolat header – Three laptops with the three different website concepts

Heidi Chocolat

ui/ux concepts

HEIDI is the chocolate side of life. With its Swiss heritage, quality ingredients and positive attitude, HEIDI creates the chocolate that inspires people to see the bright side of life.

For this project I worked with the communications and event agency brandemotions which also already created the website for HEIDIs subsidiary Niemetz Schwedenbomben. Together with Christoph Vetchy and Sebastian Romanek we provided concepts for the international HEIDI website. Unfortunately, for financial reasons HEIDI ultimately decided for a Romanian agency with whom we competed for this contract.

Their business goals were clearly defined as improving the user journey, making the navigation more friendly and exciting, and creating brand interaction with actual and new customers and advertise new products, campaigns and promotions. The new website should also display brand values of HEIDI: Highlighting positivity and embracing »the chocolate side of life«, conveying highest quality standards as well as modern craftsmanship, hence creating a desire to try HEIDI chocolate and enjoy its natural ingredients.

In all our solutions we kept to the brand book to create a consistent brand image. The illustration of Heidi is used as an important symbol and for a playful contrast. A paper texture, ripped paper and ragged edges give an overall natural and handcrafted look. The designs are not overloaded, but clean and modern so the whitespace and the dark brown color for text and buttons emphasize premium quality. The user is invited to engage with the website in different ways and have an exciting, positive and joyful experience.

In the first concept idea the user is connected to the roots of HEIDI chocolate, the beautiful nature of the Swiss Alps, to convey an authentic atmosphere. Guided by the silhouette of Heidi as a nod to the well-established brand logo, they are invited to scroll or click the chocolate button to see what hides behind the mountains.

We provide a 3D-like immersive experience into Heidi’s Chocolate World—the chocolate side of life—as the mountains, grass and sky slides away to reveal the product. The user will find HEIDI chocolate exploding (either by click, hover or automatically) into all its natural ingredients and information to find out more about the different core features of HEIDI.

In the second concept the user starts a journey with Heidi through her world and gets to see all her delicious chocolate wonders, accompanied by their natural ingredients. Heidi will be animated and automatically walking happily along the line while the user is scrolling down the page.

Concept #2 of website design for Heidi Chocolat

In this third concept one half of a chocolate bar is the constant in the middle of the screen. As the user scrolls through the page they get to experience what completes the chocolate, namely all that HEIDI chocolate contains: the Swiss Alps and the core features (golden nuts, dark chocolate, etc.).

The effects of all concepts would also be applicable on mobile devices, so the user experience is consistent in all screen sizes.

Mobile concepts of website design for Heidi Chocolat
prev  ·  next