Aesthetic Redesign

To make the functional redesign pleasing to the eye, a adaptation was made, namely the aesthetic redesign. Again, fist we present the old version then then new version:

 

[home page & redesign]

[product page & redesign]

Logo

Based on the eye track results less than half of the respondents have looked intensely at the logo. As brand identity is important for a company to strive in a competitive industry, it’s crucial to get your name out there. The logo has therefore been enlarged in the functional redesign, to be more noticeable.
Based on the current logo design a new one has been developed, in which the orange pattern at the end of the brand has been brought to the beginning of the brand.

This would call for more attention on the orange pattern that is used, because western people go through a website from left to right. This attentional guidance would mean that the orange icon in the logo will be perceived and noticed first, which is important because the icons will be used throughout the design of the website.

Template

As Afuture works in the IT / multimedia industry, a look has been given at templates of well known companies that work in the same branch. During this research, it became clear that these company’s contain the same template elements. Most of the important elements have therefore been incorporated, because it already has proved that it works, this integration will make user recognise the industry and the interaction on that the website has.

Branding

The website makes use of four main color codes: Orange, Gray, White and Black. As these colors define the house style of the website, a better look has been given at the colour palette. To enhance the visual pathway, the colour codes have been slightly adjusted to enhance the contrast of elements, which make the stand out. At the same time the colors create unity, because the continuously come back in different pages.

Buttons

The buttons used on the website have derived from the icon on the logo that has been described earlier. To create harmony and unity, the colours and shape of the icon are being reused as buttons.

Product page

The product page of Afuture contained very little visual feedback of the product. This option has been worked out in the redesign, making it possible to view more angles and picture of the product chosen.

User interaction (Product page)

To stand out in a competitive industry a new option has been given on product specification. People can now hover over a certain element of the product and will perceive a zoomed in product description on the specific element that has been hovered above. This new option, gives an new user experience and makes way for a new viewpoint on understanding products.

Functional Redesign

Considering what came out of the tests [eye tracker, visual search and change blindness], a functional redesign was made. First we show the old version, followed by the redesign:

[home screen & version 2.0]

[product page & version 2.0]
This redesign was based on our previously done analyses:

As we find the search lens important, there should be improvement to make the lens more apparent to the visitors.

With the visual search the elements that took longest were ones that are important to us. It was quite surprising that the logo took relatively long in the visual search while taking least time with the change blindness. Some redesign of the logo should be in order as it is an important element of a website.

Analysis of similar webshops

Home Page

Header
The webshop's header always consists of the following:

• Logo of the website/company  [left]
• A search bar [middle]
• A sign in element [right]

Sub header - menu bar
Underneath the header, most websites have a bar containing all different categories of which the webshop supplies goods.

Banner
Subsequently underneath the menu bar online shoppers always find a banner displaying new or sale products.

Promotions - suggestions
The lions' part of the home screen contains products with short to no descriptions. These serve to entice visitors with for instance special deals or suggestions based on their online behavior.

Product Page

Displaying the product
With many pictures of multiple angles the product is presented to the viewers.

Product description
On the right side of the product a short summation of the most important specifications is placed. Underneath this information the price is placed showing the price it "used to be", e.g. "from 1.589,- for only 999,-". The 'order now' button is placed right under the price.

Detailed descriptionIf the visitor require more information about the product, on the lower part of the page the full description is placed. The Mediamarkt has a slightly different approach by making the specifications responsive.