top of page

Hannes Reeh Website

UX/UI / WEBSITE REDESIGN

This is a wine company that focuses on selling an experience with every wine sold. They want to take their love for wine and share it with the world. The amount of land that is owned by the family has all gone to developing the vines for the wines that they make. The dry land in Andau has allowed for a great development of wine with a unique taste that people fall in love with. However, they are a smaller company without a lot of brand recognition, which makes their website so important and a great first impression for new customers.

The current website is cluttered and seems as though there is too much information with not a lot of navigation. It is very hard for users to know how to get where they want, from the about to wines and shopping. All of the information is present on the website, but there is so much in an unorganized way that the user is overwhelmed and cannot figure out the navigation. The challenge is to clean up the website and allow the layout to be self-explanatory as but not boring. I wanted to create a more user friendly design for their website that allows users to easily navigate, but is still captivating.

Above you can see screenshots of the current website. Each of the different images show different pages from their website, and give a basic overview of the company. As shown above, their website is cluttered and doesn't follow a theme. Instead there is a combination of text and images thrown on a page. While the text clearly shows the company information, there are places it changes orientation and overlays images. The photos are also grainy and do not show the best part of the company. These represent the main changes that I wanted to focus on with my redesign.

WHY REDESIGN?
  • Increase Customer Reach

  • Simplify the Website and User Experience

  • Promote a new Customer Base

  • Allow for ease of Navigation and Understanding of Website

DESIGN NEEDS
  • Simple Layout Design

  • Easy Navigation

  • Better User Experience for Increased Satisfaction

OVERALL OBJECTIVES
  • Simple Website Design that incorporates everything the company stands for without overwhelming the customers

  • Aesthetically pleasing to increase customer satisfaction and returning customers

  • ease of us

Site Mapping.jpg

When starting my designs for Hannes Reeh's website, I wanted to give an overview of the layout I wanted. To the left is the site mapping for the different pages that I wanted to create. This allowed me to have a direct focus for starting the project.

When designing the layout of the pages, I wanted them to all be connected by the same design to allow for easier navigation for users. Below you can see the top part of the different pages. Each open with a different image relating to that specific page. The top bar has a hover state allowing a red background to appear behind the words that link to other pages.

Continuing my design, I wanted to drive the website into the direction that matched their labels. As shown to the right and below, the brand is sophisticated allowing for a distinct and intricate design. I wanted the layout of the redesign to hold this same feel and allow customers to see the professional company through their website.

Logo.jpg
Wine Bottle.png

Below is the final design of the spreads for the different pages. Each allow for the correct information to be shared while integrating different images that correlate well with the text. The distinct wine pages allows for side scrolling across the different wines and the shopping cart allows for specifications within each product. Due to the nature of wine, I wanted to have red be a recurring theme, therefore it is present on the drop down header, footer, drop down menus on products, and outlining the titles on the different pages.

Home Page.png
Wines Page.png
Reehbellion – 4.png
Unplugged.png
Visit Page.png
About Page.png
Shop Page.png

To the right are some mock-ups that I created to show the layout of the webpages on a computer. This gives a better feel for the website and how users will see it.

Cover Mockup.png

Wanting to see the full website redesign? Click below!

bottom of page