Vitra is one of my all-time favourite brands, so when Vitra Home asked me to suggest a new layout for their landing page and site navigation, I jumped at the chance. It is important to note that the Vitra website is split into three different divisions: Vitra Home, Vitra Office, and Vitra Public (which caters for airports, schools, hotels, etc. ). This design suggestion only concentrates on the Vitra Home landing page for the United States and Germany.
Source: Vitra Home US Landing page, GIF created by Natalie Kane
I identified the following problems with Vitra’s current navigation:
- In the URL, I can see I am on vitra.com, but there is another link top right that sends me to another vitra.com website. As a user, the difference between the sites is not clear, making it difficult to orientate myself.
- The dropdown menus are very long: 17 items under Products and 22 for Designers.
- If I arrive at the Vitra shop by clicking the Shop link on the main vitra.com website, I want to access products quickly and the current navigation does not allow for this.
- Having the navigation option Rooms slows me down: Vitra products are versatile and a product’s use is subjective. I shouldn’t need to guess which room furniture belongs to.
- The search is hidden and spans the length of the page when clicked, which is unnecessary and difficult to use.
- Under Offers we have the Bestsellers and products with Immediate Shipping. Neither of these options are particularly exciting offers. If it’s a good offer it should be presented boldly on the homepage.
“I want to by a Vitra chair. I saw it at a friend’s place recently.”
- I don’t know what the chair is called, so I can’t use the search.
- It’s a modern chair and I’m unsure of the designer’s name, so I can’t search by designer.
- It could be for the dinning room, or the living room, or a home office, so I am not sure where to start in the Rooms section.
- I will look under Products > Chairs, but is it a Lounge Chair or simply a Chair?
All of these steps slow me down, resulting in a frustrating shopping experience.
Navigation Design Constraints
- The same navigation needs to work for all countries and multiple languages. German words are often longer than English words, so more space is required.
- Not all product types are available in all countries: e.g. Lighting is available in Europe but not the US. If a product type is unavailable it should disappear from the navigation without breaking its structure.
Product Groups and Types
The following product types are available in the US, listed in alphabetical order:
Accessories, Chairs, Chaises Longues, Children’s Furniture, Clocks, Coffee and Side Tables, Desks, Lounge Chairs, Miniatures, Office Chairs, Room Dividers, Shelves and Sideboards, Small storage, Sofas, Stools and Benches, Tables, Visitor and Conference Chairs
The product types could be grouped and listed under new product group headings:
||Coffee & Side Tables
||Stools & Benches
Visitor and Conference Chairs should be removed as it doesn’t fit with the concept of home: a visitor to one’s home is a guest and conferences are not a home event.
I have added ‘@ Home’ beside the logo to show that it is part of the larger vitra.com site. Throughout the site Living, Contemporary Living, Shop, and The Vitra Online Store are all used to describe the Vitra Home sub-site. This may be because the word Home is difficult to use in online media without suggesting ‘return to the homepage’.
Source: Natalie Kane, optimizethings.com
The idea behind @ Home is that people shop in the comfort of their home, people should feel at home when browsing the Vitra Home store, and the products are of course from the Vitra Home segment.
The @ sign visually breaks up the words Vitra and Home visually, while reinforcing the idea of shopping online.
I believe the benefits of this design are:
- Commercial customers will clearly understand that the store is for the Vitra Home segment only.
- I no longer have to guess what room a Vitra object belongs to as I can now navigate by product group.
- A box around the product categories anchors the eye.
- The customer service text has been removed to reduce visual noise. Users would look to the footer to find this contact information and the benefit of on-hand support can be better expressed in other locations on the site.
- Rooms has been combined with Inspiration.
- Login, Wishlist, and Cart have been moved to the top right where users would expect to find them. All three have been now been given icons, whereas before only Wishlist had an icon.
- Search is included as part of the navigation and labelled as Search the shop so that the user knows that it will only return results specific to the store.
The Dropdown Menu
As you rollover the navigation items, a dropdown menu is shown. The user does not need to click to view the menu’s contents.
Source: Natalie Kane, optimizethings.com
- The navigation includes images. This gives people a taste of what is behind the category, taking away the guesswork. This also helps with terms like Chaises Longues, which are not as common to shoppers as Office Chairs.
- There is enough space for long product type names to go over two lines. There are four columns so that the menu can expand and contract based on the number of product types within a product group.
- The columns on the end can be left empty or used for promotional teasers to highlight that there is free shipping on a particular item, new colours available, or direct people to an interview with a designer etc. In this Seating example, the visitor is directed to a magazine article about the Eames Lounge Chair. Up to three teasers can be entered into the menu. This concept was inspired by the mrporter.com website: