# case study
January 3, 2022

How was redesigned Havi's website

Design and Prototype (desktop), Design and Prototype (mobile)

When I've visited this website for the first time, it seemed to me that everything is a bit old-fashioned, dark and there is just too much information.

Before

After

I took the logo and the main color - mustard beige as a basis, and started working. I have moved the navigation to the left, replaced some text elements with icons (shopping cart, account, search). Added some air, space, and basically changing everything.

I moved additional seasonal information to the very top, so that on the one hand, it's not screaming at people, but still noticeable.

Before

Coming up with the look of this block was not easy. I made a dozen attempts, some of them were mercilessly removed, some miraculously survived. Here are some of them.

After

try 1
try 2
try3 (maybe)
final version

When I was improving the design of this site, it was December and it was Christmas. I thought it would be important to show products on the home page that will help to create a festive atmosphere and help to get ready for Christmas.

In addition, I wanted to make this section more descriptive. So that when scrolling through, people would to stop at least for a short time, get inspired, see not just a product, but also an idea of ​​how you can use it at home. And it seemed to me as something simply beautiful and convenient.

I also wanted this block to be scrollable. I just love this format. As for me, it saves space and makes something ordinary more interesting.

I also decided to completely remove the section “Poimintoja kaupasta” and replace it with “Valmistaudu joulun” for the period before the holidays. And when they are over you can use “Uutuudet”, “Kaikki ALE-tuotteet”, etc. But in the end such things are better for marketers to decide 🙂

Before

After

By updating this site, I wanted to create an atmosphere of warmth and beauty. So that when moving from page to page, the user feels this special atmosphere. I used the same principle when designing the next block.

Before

After

In the process, I noticed that Havis has a pretty beautiful Instagram. So why not add this to our site? In my opinion, it will give more life to the page.

In addition, before that on the site in this place there was just the text saying “HAVI’S sosiaalisessa mediassa”. And that's all. Boring.

Before

After

I wanted to make the footer more informative, and the navigation easier, without unnecessary transitions from page to page. Plus, I often see footers like this on other websites that I like the design of. I find it good and elegant.

Why didn't I leave a dark background? It seemed logical to me to make the background lighter, because the new version of the site is much lighter than the previous one.

Before

After

On the product page, I didn't like the way the additional information, button, quantity and price looks.

I also added additional photos. When you see a product in context, it is more interesting and understandable.

Before

After

When I started working on the company history page, I was very surprised. Given that company was founded in 1829, there was so little information and it was dry and not very interesting to read. Looking at the company's logo, which indicates the date of the company's foundation, it seemed to me that history is important for them, but it's not reflected on the website.

So I decided I would show the story from start to current days. It's very interesting. I wanted to do it beautifully, so that you can scroll, live the story, view it like a film strip.

To summarise, I can say that I really liked the result of this work. I tried to understand who uses this site, what is important for the buyer. I'm myself their customer, their candles are burning in my house. I tried to partially preserve the familiar elements, but making the site more beautiful and modern. I think I did quite well.