Project Review: Appleyards

By | January 15, 2012

Brief: A website owner has approached you to redesign their site. They are convinced that with an improved design, their site will do better. They have asked for advice on colour, page layout, branding etc.

Home Page, Before & After: New home page contains all the same content as the original design plus a search box and social media links. Clear visual hierarchy with SEO page titles and links to key site content. Tone of the site has changed with the new site feeling more professional and giving a much greater sense of trust and experience than the original site.

Service Page, Before & After: Layout of a service page completely changed to put a stronger focus on the copy. Outline of the page summarised in a few bullet points with more detailed information below the fold if the user is interested. Again the page has been marked up for improved SEO which is also improved by breadcrumb trail. Page includes links to share via social media.

Contact Page, Before & After: Again the layout has completely changed and it is immediately obvious from the visuals what page you are on. Elements now align to a grid making seem a lot tidier and more organised. All company offices are shown on the map and social media links are also directly relevant to the page content.

Site Identity: conventionally this would be placed at the top left of a page but Appleyards’ brand guidelines state that the logo should appear at the top right. Visually this works as it contrasts well with the rest of the page content and the curves of the logo are designed to appear more natural on this side of the page.

Visual Design & Layout: 960 grid system with a 16 column layout to give greater flexibility as there are a lot of page types and variable content types. Use of column helper classes means that page layout can be tailored to content while still keeping the site easy to manage and update by internal staff.

Font: original site uses sIFR, which relies on Flash, for page titles in company font (Bliss 2) – still accessible but adds needless overhead which increases page load time and has a flash of unstyled content. New site uses @font-face to avoid the shortcomings of sIFR and allows different font weights to be included for the best visual experience. Also, the site completely alters use of font size, colour and whitespace to create a clear and visually interesting hierarchy.

Colour: company has a brand purple as well as a colour for each of the company business units. Business Unit colours used on the main navigation but nowhere else – this reduces the meaning of the colours and simply makes the menu look messy. The new design adopts a “monochrome + 2 complementary colours” approach. This uses the brand purple and unit colours while keeping a completely consistent layout above the fold. The effect is to create interest and clear visual cue about where you are in the site without distracting from the content or appearing messy.

Information Architecture & Navigation: original site lacks a search box and has 3 sets of navigation – top, main and footer. Navigation behaves inconsistently (not all items are links) and colours for each business unit on main menu items are distracting. Due to split navigation the site hierarchy is confusing and unintuitive. Excessive navigation options do not properly address Hick’s law.

New design has greatly improved navigation all located at the top of the page. Site content is essentially the same but reorganised into 5 top level categories with icons. CSS popup menus appear on hover giving the user more options as necessary. Search box is now available at the top of each page. Additional navigation element below search boxes for Online Services also serves as an “advert” for prospective clients/employees for how the company works.

Both versions use breadcrumb trails as there is a lot of content on multiple levels, but the new design makes them more prominent and places them at the top of each page as recommended in Don’t Make Me Think.

SEO: correct use of semantic HTML tags creating a page hierarchy which is independent of the user’s device (i.e. more accessible). Breadcrumb trails and customisable page titles and meta data to ensure best page rank. Use of Google Analytics and Adwords implemented with an ongoing review process and simple CMS ensure that the small marketing team will be able to continue to monitor traffic and optimise site cotnent.

CMS: existing site based on a custom CMS which – any changes, improvements or tech support can only be provided by one developer. New site uses WordPress so can easily be managed and improved by internal staff at minimal cost.