Redesign Case Study.

Case Study: Redesign of a local golf club website.

The Carrick on Suir website is due a redesign which I will elaborate on in this document. Below are images of the old and proposed new website following a redesign:

Redesign Flow

The flow that I followed for this redesign project.

Critique of the original site

Initial Sketches, Wireframes, Planning Documents, Style Tiles

How the redesign addressed the issues

Color, Type and Layout

Typography

 Critique of the original site.

Below follows the critique of the current site which is broken down into various sections.

Background Image

Grid

Centered text

Clear call to action (CTA)

Responsive/mobile first

Color

Footer area

Initial Sketches, Wireframes, Planning Documents, Style Tiles.

Creative design flow.

Initial Sketches

Bootstrap Wireframe Boarding

Wireframe with Bootstrap Grid

Wireframe without Bootstrap Grid

Style Tyle

initiial-sketch
bootstrap-boarding
with-grid
without-grid

Redesign proposal.

Background Image:

The current website offers very nice and good imagery of the golf course, however, the images are used in full background and at times compete with the content in the foreground (Gestalt Principles). The images also rotate every few seconds and while this may look all right at first I believe this functionality or ability to change the images should lie with the user.

I would suggest introducing a hero slider above the fold where the user can change the slides with the help of forward/backward buttons.

Redesign proposal.

Grid:

There appears to be an HTML or CSS issue of some sort as the main content seems to have dropped to the left and there appears to be no consistent use of a grid system.

I would suggest using the Bootstrap 3 Grid system that offer a grid that contains 12 columns. This will allow us to design the various content containers in equal proportions providing consistency throughout the homepage and other landing pages.

Redesign proposal.

Centered text:

In 3 of the content containers, the text has been centered which is not great for readability.

Align text to the left will improve the readability of content.

Redesign proposal.

Call to action (CTA):

One thing I do not like about call to action is the wording “click here”. These CTA could be easily changed into buttons with a clear CTA text.

Introduce clear call to action with the help of buttons and or clear hyperlinks

Redesign proposal.

Responsive/mobile first:

The website is not responsive at all and is not designed with mobile first in mind.

The proposed redesign is built with the Bootstrap 3 framework in mind which will take care of the responsiveness of the site. The menu will collapse in a Hamburger menu and the various content container sections and call to action buttons will stack vertically.

Redesign proposal.

Color:

The chosen colors appear a little dull/outdated.

Freshen up the site with more vibrant color combinations. Use a brighter green in combination with a darker green in the footer section. Introduce some white space so other containers will stand out more.

Redesign proposal.

Footer area:

There is no clear footer area.

Add a distinct footer area at the bottom of the site with helpful information such as frequently accessed content, contact details such as address and phone number.

Color, type and layout.

Color, type and layout:

I have opted to keep the color/brand palette very simple with green as the primary color offering two hue’s and then 3 accent colors, black, white and grey. The type and layout of the website are based on the Bootstrap 3 responsive framework.

Typography.

Typography:

I have been using the Google Roboto font on a number of projects recently and have found it to be a clear and optimistic font that offers six weights in total that can be used across a multiple of platforms. I did not opt for another font combination as I feel the various weights within the font offer sufficient opportunity for a variation on this particular project. Typeface Roboto Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic.

%d bloggers like this: