There were a few problems I noticed with the current Veganz Homepage:

• The Website doesn't adapt to monitor with a resolution width bigger than 1030px
• Certain elements, such as the newsletter registration, look cramped and don't fully utilize the screen space they need to attract attention.
• The brown and beige colours of the Site don't fit the current packaging design of Veganz and don't look that appetizing
• The front page seems to consist of a list of the recent blog articles and cool stuff that Veganz is up to but doesn't have much to offer that provides value to the customers
• The front page offers an overview of what information the Website contains, but no prominent clickable elements to get read more - Buttons, for example
• And I found out that you can shop Veganz products online, on vekoop.

My goal with this redesign was to improve on these critical issues with impactful but straightforward changes while staying true to the current visual identity that Veganz uses for its packaging design & online communication.

Since I am already familiar with the Brand, their visual language and their tasty products, I skipped on extensive research in this quick "let's see how far I'll come with this"-project and jumped right into the layouts.

For that, I separated the homepage into the individual content blocks and identified what the intent and message of each block are – e.g. Block for new product announcements, Block about the eaternaty score, Block about the newsletter registration.

Next, I arranged them by the importance & value they have for Veganz and their customers that might visit their page, which resulted in the new hierarchy of the elements as seen in the final layout.

After getting the hierarchy down, I imported the icons, images and other website elements of the Veganz website into Sketch – my layout program of choice – and set the 16px layout grid up that I used to align all items in the new screen design.

Since Veganz doesn't have a proper Desktop Navigation or Footer, I started the redesign by drafting these crucial navigational elements for the Desktop.

While I was working on the new navigation, I decided to implement a new, clearer language switch, make the possibility to shop Veganz products on Vekoop stand out more with a dedicated CTA and only left the navigation elements in the top right that most page visitors care about: A link to the product page, a link to where visitors can read more about the History of Veganz and a link to the Veganz Blog.

I moved all the other elements, such as a link to the Jobs page and social media, into the newly created Footer to the bottom of the page. Here, I combined the links to the pages that seemed less critical with a new field to sign up for the newsletter and another hint to the possibility to shop Veganz Products on Vekoop.

With the new Main Navigation and the Footer done, I shifted my attention to the individual Content Blocks. I wanted these blocks to be repeatable and easily recognizable, reflect the current packaging design of Veganz and look attractive and colourful while still having intention behind the colours. So I began with creating a box with a frayed edge and a shadow effect on the bottom. This effect is an element Veganz repeatedly uses for the packaging design and gives the individual blocks a clear and distinct but playful edge. To the newly created block, I applied the same paper texture as a background image that Veganz has on their Website & their packaging and combined it with different bright and desaturated colours, inspired by the product pallette.

For the headlines, I used the same Veganz font called "SO Veganz" and gave it the background colour of the content block, but more saturated. I applied the same colour rule to the buttons. Since I wanted the texts in the Buttons to be clear and readable, I decided to use a simple and legible font that still fits the "SO Veganz" font.

I made a scaled-down version of the whole content block to create the buttons without the background texture but a more saturated colour instead. For the secondary Button, I started with an outlined copy of the primary Button and placed the frayed edge towards the left instead of the bottom. For the product images, I reused the images Veganz was using on their homepage and applied an image mask to them to give them a frayed edge effect. This way, they look more exciting and fit better to the complete layout.

The final and last step for me was to scale the new layout down to a mobile-friendly size and readjust the elements on the page to make them navigable with a thumb on a small screen.

These results were achieved using the assets from the Veganz Homepage, Sketch, and a little bit of creativity.

Unfortunately, it seems as if my suggestion didn't convince the company, as I never heard back from Veganz after sharing my screen design via Email.
‍
It was a fun and educational project nonetheless.