Task:  Re-Design “Gates & Fences” according to your knowledge about user friendly web design.

First Impressions after seeing the original site for the first time:

stsite

(Original Site’s Home Page ^ – www.gatesnfences.com/)

  • The site did not have a responsive design – it only worked on the computer;
  • The colour scheme was too bright and unaesthetic – too many contrasting colours;
  • No proximity, no closure – you cannot figure out what belongs to anything;
  • No symmetry – the search bar falls out of place and does not belong where it is;
  • Too cramped – hard to understand what is going on;
  • Too many buttons and same font size/colour almost everywhere – makes everything confusing;
  • Too much information;
  • Poor use of “Hick’s Law” – it would be hard to click on any of the options on the top of the shop page.

stsitegg

We ran 3 different user tests in the classroom regarding to the design of the original website and what should be improved :

The “5 – second” test (conducted by me);

The “expert’s opinion” test (conducted by Adriel Noach Premer);

The “trunk test” (conducted by Ying Liang).

The solution:

After running the tests listed above, we took the main problems noticed by the users and made a to-do list based of the results:

  • The main menu needs to be more organised: more concrete main options and dropdown menus;
  • Reduce the text and descriptions to the essential – get rid of the unuseful descriptions and pages – For example: “5 reasons why steel gates are good”. Who cares about it?);
  • Better defined options – the buy button needs to be more accentuated and in a better place so that the user can see it more easily.
  • Needs a simplified design – better use of proximity;
  • A new colour scheme that highlights only the important items and information on the site.
  • Needs responsive design (it only works on desktop, as of right now).

report-buy-pageThe work process:

First, to have an idea of what we will do in terms of design for our improved version of the website, I have been sketching the design for the desktop and mobile versions of the final product:

1

(Mobile Version – Home Page – Shot Menu – Shop Item)

2

(Desktop Version – Home Page)

7

(Desktop Version – Shop Menu)

5

(Desktop Version – Shop Item)

Secondly, we continued the designing process by making a visual image for the website, so I made the Logo of the website using Adobe Illustrator:

logo69

As for the top of the page, we decided to go for an “inviting picture” for a banner on the top of the site menu. We were first thinking of using pictures of fences only but after some  more user testing (on the improved site this time) we realised we drew to the conclusion that only showing fences looks too plain, cold and boring.

Therefore, we went for pictures of wooden fences and flowers, which gives the user a warm and fuzzy feeling of home – which makes the connection with the products that we are trying to sell trough this website as most of the potential customers are looking for something to secure/decorate around their own houses!

Here are some of the pictures that we considered using for this task:

jardin

bb2

bb1

picket-fencing

Lawn Care After one

Lawn Care After one

In the end, we decided to go for a white fence – white flowers top banner for the final version of our product as it made the website look more clean and spacious (considering the multitude of products that we were going to display – especially on the shop page):

Tablet/Smartphone:

mobile-home

mobile-shop-menu

mobile-shop

shopitemsmobile

Desktop:

gandf

(Home Page ^ )

shopdesktop

(Shop Menu ^ )

shophover

shopdesktop2

(Shop Items ^ )

~The credits for coding the website go to Adriel Noach Premer~

What we could have done better:

The top picture is actually misleading for the users because it’s 50% flowers 50% fence – which makes viewers really confused as to what we are trying to sell (fences or gardening products).

There is a disruption in the design of the webpage because of the cartoonish/cozy feeling of the site’s Logo & banner picture VS the cold feeling of the buttons & the fonts used.

The 2 different buttons that both lead to the shop page are making users really confused as to what do they need to click on in order to get where they want to.

Link: http://toonstalesandtools.com/assignment/index.html