Anchor Top

The Jockey Club 14 Racecourse Website Re-Design & Build

The Problem

The Jockey Club, commercial owner of 14 racecourses in the UK including Cheltenham, Aintree and Newmarket wanted to re-design all their websites in order to:

  1. Unify and standardise all racecourse websites under The Jockey Club global brand.
  2. Inspire and excite race goers in order to increase ticket sales.
  3. Promote conferencing and events facilities to increase venue hire enquiries.
TJC logo
TJC Approach

The Approach

Proto-Personas

I created proto personas of key audience types based on some initial research my colleagues had conducted. These were used as artefacts to prioritise content and as tools in client and team discussions.

Content & GA Audit

I conducted an audit of content from the existing websites, in order to identify similarities, gaps and redundancies. This was backed by a GA audit, which showed where the most engaging content was on the sites.

Content Strategy

From this I was able to formulate a content strategy, which I presented to regional racecourse owners, convincing them to adopt the new content model. A content matrix was used to show how they could use the new content hubs to direct traffic towards their business goals.

Taxonomy & Tree Testing

I went through 2 iterations of taxonomy for the new website using tree testing to validate labelling and structure improving it significantly between rounds of testing.

Sketching

I worked collaboratively with the lead visual designer to explore the different templates for the new site.

User Journeys & Wireframes

I produced documentation to define user flow through the system and wireframes for each of the templates. There was a short round of light-weight user testing to optimise the templates.

Visual Design

I worked closely with the visual designer who translated the brand guidelines onto the new page templates.

Coding & Content

I worked closely with front end developers to ensure the responsive design implementation maintained consistency with the UX vision, and I worked with back end developers to create an effective CMS. I also helped lead final copy direction, which was handled by different regional stakeholders, before the sites were launched.

The Outcome

14 fully responsive websites, prioritised on user goals and business objectives.

The websites were rolled and benchmarked for performance uplifts.

Check out 3 examples below:

TJC outcome

Hoseasons UX Study

The Problem

Market leaders in UK holidays Hoseasons wanted to better understand UX issues on their existing website in advance of plans to re-design and brand their online presence to improve business KPIs.

Hoseasons logo
Hoseasons UX Study Approach

The Approach

Expert Review

Review of the current user journey as well as formulating lessons to learn from competitor good practise.

User Testing

User testing on their desktop website with 5 representatives of their target demographic, completing typical holiday booking task, in order to gain rich insights into usability issues and user behaviour.

Google Analytics Audit

Quantitative analysis of user behaviour from GA data, understanding user entry, engagement and exit points, conversion funnel analysis and KPI benchmarking.

Report & Client Presentation

As well as a report summarising key findings and recommendations, I presented to around 20 stakeholders at Hoseasons.

The Outcome

49 unique issues were identified from the user testing. Together with the other workstreams this led to 62 actionable recommendations, which were prioritised based on severity and impact.

After presenting the findings to senior client stakeholders, I was able to help upsell the larger design and build phase to optimise the website and fix existing problems.

Hoseasons UX study outcome

Hoseasons UK Holidays Website Re-Design

The Problem

Following on from a UX study I conducted for UK holiday company Hoseasons, we were briefed to re-design the website in order to:

  1. Position Hoseasons as a more premium brand in the UK holiday sector.
  2. Improve usability and create a more seamless customer experience across desktop, tablet and mobile.
  3. Generate higher online revenue through increased conversion rate and insurance upsell.
Hoseasons logo
Hoseasons Re-design Approach

The Approach

Content Matrix & Sketching

Based on clear business goals and user needs, I combined exploring the problem space collaboratively on whiteboards and defining core content in a spreadsheet. The core taxonomy remained the same as the current site but the user journey was adapted to solve some of the problems from the original UX study.

Clickable Wireframes
I went through several iterations of wireframes (desktop and mobile), which were turned into a clickable prototype in Axure, in order to run a round of user testing. I presented the new wireframe prototype to senior client stakeholders to obtain sign off on the new user journey and page layouts.

HTML Responsive Prototype
I collaborated with a team of visual designers and developers to quickly turn the wireframes into an HTML responsive prototype. A code based UI toolkit was used to layer look and feel onto the front end framework. This phase was challenging as the client kept changing their mind on their new brand identity.

Iterative User Testing
As well as user testing the wireframes I ran 2 further rounds of testing on the HTML Prototype to refine the content, layout and aesthetic.

QA Process & Handover
At the end of the project I managed a rigorous QA process to ensure the final delivery aligned with the UX vision and to identify and fix browser bugs. This production ready code was handed over for CMS integration with Hoseasons.

The Outcome

A fully responsive website, prioritised on user goals and tackling the issues raised in the original UX evaluation.

The solution was met with praise by the client, and the responsive code was passed over with integration documentation for integration by Hoseasons with a live date in November 2014.

Hoseasons Re-design outcome

TK Maxx UX Study & Checkout Optimisation

The Problem

Leading UK retailer TK Maxx wanted to understand the usability of their e-commerce website in order to inform conversion optimisation strategy.

TK Maxx logo
TK Maxx multi user testing study outcome

The Approach

Usability study

User testing on their desktop website with 6 representatives of their target demographic, completing typical shopping tasks. The most significant findings were around their checkout, matched by a very high cart abandonment rate found in their web analytics.

Competitor benchmarking

I followed the study up with a competitor analysis of e-commerce checkouts.

Mid fidelity wireframes

I provided annotated wireframes for an optimised checkout.

The Outcome

I provided 48 actionable recommendations from the original usability study across category, product, information and checkout pages.

The optimised checkout wireframes were implemented by the client and they subsequently saw a drop in cart abandonment rate of 25%, generating massive revenue gains.

TK Maxx user testing study outcome

TK Maxx Multi Device UX Study

The Problem

TK Maxx wanted to understand usability problems on their website for users on different devices.

TK Maxx logo
TK Maxx multi device user testing study approach

The Approach

Usability study

User testing on their desktop and mobile website with 15 representatives of their target demographic, across desktop, tablet and mobile device groups.

The Outcome

Similar issues were found on the main website as a previous study I had conducted with them, with some additional touch specific issues on tablet, leading to 36 actionable recommendations.

On the mobile site the evidence demonstrated good usability, with 25 actionable recommendations.

TK Maxx multi device user testing study outcome

Pfizer Quit With Help UX Design

The Problem

Global pharmaceutical company Pfizer wanted to re-develop one of their campaign websites, intended to encourage smokers to visit their GP. This was originally failing in its objectives so they commissioned my agency to lead content strategy, UX and design on a new website, which better met their business goals.

Quit With Hwlp logo
Quit With Hwlp UX Design approach

The Approach

Research Review

Pfizer had previously commissioned another research agency to conduct focus group work with smokers in order to understand internal motivations for quitting. I reviewed and provided a summary of this research to guide the planning of the project.

Content Strategy

I worked with our Content Strategist to develop a content model that better met the needs of the target user group. This involved some whiteboarding exercises with user journey mapping, eventually feeding into a content specification/inventory we developed.

Mid fidleity wireframes

I designed mid-fidelity wireframes for key pages in the user journey.

Usability testing round 1

I conducted a short “corridor” round of user testing with 3 users to refine the content and UI.

Visual design

I worked closely with an internal visual designer on a first round of visual designs of the wireframes.

Usability testing round 2

I conducted a more formal round of user testing with 5 users to further refine the design.

Responsive design

I used my experience of responsive design to guide the final implementation of the website.

The Outcome

A fully responsive website developed by a third party, with quality engagement content and a clear user journey targeted towards the conversion goals.

Quit With Hwlp UX Design outcome

Posturite User Research

The Problem

Posturite, the UK's largest ergonomic solutions company wanted to better understand their web users and e-commerce usability issues, so they could move forward with a mass re-development of their digital strategy.

Posturite logo
Posturite UX Research approach

The Approach

Project requirement elicitation

Scoping of the 12 month project including stakeholder management.

Expert usability heuristic analysis

Review of the existing website against best practice.

Competitor benchmarking

Review of competitor websites against the client’s website.

Interviews

Telephone interviews with online customer to understand user context and needs.

Survey

Planning, deployment and analysis of questionnaires using Survey Monkey.

Web analytics

Auditing of Google Analytics data to understand visitor behaviour and important benchmarking metrics.

The Outcome

A wide range of deliverables, including use cases, user profiles, and e-commerce design recommendations that were used to further develop work I later conducted with the company.

Posturite UX Research outcome

Posturite E-commerce UX Re-development

The Problem

Posturite, the UK's largest ergonomic solutions company wanted to develop on the previous UX research work I had conducted with them to implement UX strategies into their new e-commerce platform in order to generate higher revenue through improved conversion rate.

Posturite logo
Posturite UX Design approach

The Approach

Requirements

Documentation of requirements for the 12 month project with ongoing management.

Taxonomy development

Architecture of the new product catalogue and development of a site map for the e-commerce site.

Mid fidelity wireframes

Iterative design of e-commerce page wireframes and shopping user journeys.

Visual design

Collaborative design on the look and feel of the site.

Usability testing

Iterative user testing of designs and HTML prototypes.

Catalogue copy writing

I wrote standardised copy for all products in the catalogue.

Front End Development

Management and involvement of coding of the site in the Magento. e-commerce framework.

Benchmarking

Benchmarking and analysis post launch through web analytics and survey.

The Outcome

Posturite released their new e-commerce website, which was met with positive reception from their web visitors and an improvement in NPS. Conversion rates were also improved by 20%, with a boost in average order value that led to a 50% improvement in revenue over the proceeding months.

Visit the site at www.posturite.co.uk

Posturite UX Design outcome

Posturite Checkout Optimisation

The Problem

Following the successful launch of their new website I worked on, Posturite wanted to further optimize their checkout to increase conversion rate and uptake of registration.

Posturite logo
Posturite checkout Conversion Rate Optimisation approach

The Approach

Checkout Optimisation

Iimplemented a new simplified one page checkout and developed tooltips to create clarity on form fields.

AB Testing

An alternative version of the Basket was also AB tested aimed to address typical checkout concerns and clarify delivery policy.

The Outcome

The checkout conversion rate improved further from 70% to 85%. The new basket version A-B tested was also found to improve click through rate to the checkout.

Posturite checkout Conversion Rate Optimisation outcome

Accordance VAT UX Study & Re-design

The Problem

International VAT compliance company Accordance wanted to understand the usability of their lead generation website to gain better value from their visitor traffic.

Accordance logo
Accordance user testing study approach

The Approach

Stakeholder workshop

Initial consultation with the client to establish agreed goals, audience profile and user journeys.

Usability study

User testing on their desktop website with 6 representatives of their target demographic, completing typical tasks.

Taxonomy development

I create a revised taxonomy for their services and VAT guides, working alongside a VAT consultant.

Mid fidelity wireframes

I designed optimised wireframes based on their findings with considerations for best practise conversion optimisation.

The Outcome

The greatest issues were around trust and providing too much information at once.

I provided 44 actionable recommendations from the study evidence.

The client was impressed with the study and recommendations, implementing the wireframes through their internal IT department.

Accordance user testing study outcome

Kinetico UX Study & Re-design

The Problem

Leading UK home water system company Kinetico wanted to understand the usability of their lead generation and e-commerce website to improve conversion rates.

Kinetico logo
Kinetico Usability Testing Study approach

The Approach

Stakeholder workshop

Initial consultation with the client to establish agreed goals, audience profile and user journeys.

Usability study

User testing on their desktop website with 6 representatives of their target demographic, completing typical tasks.

Mid fidelity wireframes

I designed optimised wireframes based on their findings, in particular standardising their online catalogue and improving landing page design.

The Outcome

Major usability issues leading to 76 actionable recommendations from the study evidence.

The client was impressed with the study and recommendations and implemented the wireframes through their internal IT department.

Kinetico Usability Testing Study outcome

Ubuntu User Research Study

The Problem

The client Canonical wanted to work with a User Experience Designer to conduct an extensive usability study of the Operating System Ubuntu (9.04).
Ubuntu logo
Ubuntu User Research approach

The Approach

I ran a four month user research study that included a number of unique research pieces.

Needs and behaviour survey

A questionnaire survey of over 2500 regular users followed by cluster analysis of UX issues.

Contextual Inquiries

Computer task based contextual inquiries with expert users to investigate user-system interaction.

Net book trials

Ubuntu netbook trials with new users to investigate novice UX issues. This included an initial open ended user test and then a second session two weeks later after they had learnt the system.

The Outcome

I produced user profiles, usability/IA bug reports and design recommendations for the client.

Canonical learnt some important lessons about their users and usability issues for both novices and experts. Design recommendations were shared with the Open Source Community for future work of Ubuntu releases.

I learnt a lot from running one of the most extensive usability study of the world's largest open source operating system.

Ubuntu User Research outcome

Roche Taxonomy Development

The Problem

Global Pharmaceutical company Roche wanted to develop a taxonomy definition for one of their websites as part of a wider project to improve user experience.

Roche logo
Roche taxonomy approach

The Approach

Stakeholder Workshop

I worked with various internal stakeholders to gather content requirements.

Questionnaire Survey

I designed, conducted and analysed a survey using Survey Monkey to key user groups to gain insight into relevancy of content.

Content Inventory

I developed a content inventory in a spreadsheet to identify gaps, remove redundancies and standardise content.

Card Sorting

I conducted a card sorting exercise to inform labelling and organisation of content.

Sitemap

I developed a hierarchical sitemap diagram for the site in Visio.

The Outcome

An intuitive site organisation matching user mental models. The outputs from this were used by the client to feed into the wider project.

Roche taxonomy outcome

Impetus Charity Website Re-design

The Problem

Brighton based charity for vulnerable adults Impetus wanted to re-design their website with no budget.

Impetus logo
Impetus site design approach

The Approach

Stakeholder workshop

Initial consultation with the client to establish agreed goals and taxonomy direction.

Sitemap

I created a simple sitemap to document site organisation.

Low fidelity wireframes

I shared some initial sketches with the client to gain some preliminary feedback on page layout.

Visual design

I designed full fidelity mockups with considerations for responsive design and a greater focus on specific user goals.

The Outcome

A colleague of mine implemented the responsive designs in Wordpress. The client was incredibly grateful for the voluntary work and helping the Brighton vulnerable community.

Impetus site design outcome

Apollo Agile UX

The Problem

iCrossing needed ongoing agile UX design for their bespoke SEO crawler tool, to help develop intuitive and consistent UIs for the product, largely focused on forms, tables and data visualisations. The team of internal developers worked using SCRUM agile methodology with limited UX capability prior to my involvement.

Roche logo
Roche taxonomy approach

The Approach

Agile UX

I worked on an ongoing basis for 18+ months with the Development Team and Product Owner, to design and user test wireframes and prototypes. These were regularly implemented by the team to provide usable and useful solutions for the users. I also contributed to daily scrums, sprint reviews and planning, as well as facilitating discussions with the users to help generate new ideas.

The Outcome

Great UX on a highly bespoke SEO tool, which helped increase business efficiency to client teams using the tool. The NPS score for the tool taken on a quarterly basis was found to be between 8 and 9.

Roche taxonomy outcome

Zest Running App User Research

The Problem

Women’s health and fitness magazine Zest wanted to better understand their audience’s attitude to running mobile games.

Zest logo
Zest focus group approach

The Approach

Focus Group

I organised a team of researchers to run three focus groups of 8-12 participants, in order to elicit opinions from the target demographic. I ran one of the focus groups and then collated all the data into a report for the client, identifying key themes and providing insights on the research questions.

Conceptual model

I developed several conceptual models as ideas for potential apps that could work for the target audience. These were also presented back to the client.

The Outcome

The audience showed low interest to the idea of a running “game”, which saved the client from pursuing a project likely to fail. However good ideas came out of the focus groups on the kinds of concepts and features that would be fun and motivating. One of the more interesting ideas involved combining tracked running routes with real shopping vouchers rewards.

Zest focus group outcome

OISE User Research

The Problem

English language school OISE wanted to learn more about their stakeholders and users in relation to planning for a new website.

OISE logo
oise user research approach

The Approach

Telephone interviews

I conducted 6 telephone interviews with key stakeholders in the business and then drew actionable themes from the data.

Focus groups

I held a focus group at one of their schools with real students to understand their online needs and behaviour.

The Outcome

A report answering key research questions, which was handed over to the client to help them plan the remainder of the project.

oise user research outcome

Thames Head Shipping Advisors Design & Build

The Problem

The client wanted a basic website to showcase his freelance offering and provide contact details, with a very low budget.

Thames Head logo
oise user research approach

The Approach

Visual Design

I mocked the site up in Illustrator to give an idea of look and feel.

Build

I coded the site responsively using HTML and CSS.

The Outcome

A clean visually appealing responsive website built in HTML and CSS.

Thames Head outcome

What next?