In my time as a Freelance UX, UI & Web Designer, Veganz – one of the leading Vegan food brands in Germany – was one of my dream clients. Since I hoped to attract them as one of my clients, I created this Redesign of the Veganz Homepage within one week.
There were a few problems I noticed with the current Veganz Homepage:
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.
Thanks a lot to Yannick Krohn and Philip Heins, who provided helpful feedback on the project.
This design is a concept. During the execution of this project, I never was an employee of or a freelancer for Veganz or any of the associated companies. I designed this redesign because I saw the potential to improve the service & experience for the page visitors and make the Veganz Homepage a more relevant channel of communication for the Brand. And because I enjoy (re)designing digital products and improving their UX & UI.