British Horseracing Authority

The Brief

Firedog were approached by the British Horseracing Authority to redesign their current website—starting from the ground up. The biggest concern with the previous site was that the navigation left users confused. The look and feel was largely dictated by the BHA rebrand (also completed by Firedog) and evolved where needed to meet their digital requirements.

Client
BHA

My Role
Iconography, UI Design, UX Design

Year
2015

[unex_ce_button id="content_ijumkgl4e,column_content_0wll9an1y" button_text_color="#333333" button_font="bold" button_font_size="16px" button_width="auto" button_alignment="left" button_text_spacing="1.5px" button_bg_color="transparent" button_padding="11px 32px 11px 32px" button_border_width="3px" button_border_color="#333333" button_border_radius="6px" button_text_hover_color="#333333" button_text_spacing_hover="1.5px" button_bg_hover_color="transparent" button_border_hover_color="#1e3276" button_link="http://www.britishhorseracing.com/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VISIT SITE ➞[/ce_button]
5_BHA5_BHA

The process was kicked off with a top-to-bottom visual exploration of colour palettes, typography, use of imagery and iconography. Along with thorough sector research to explore trends and best practice within the horse racing industry. From this several concepts were designed and a route was subsequently chosen by the BHA to further develop.

I worked alongside the digital director to design numerous page templates and push a consistent visual language across a variety of page templates. One of the biggest challenges on this project was reworking the way users navigate through the site. With such a wide variety of users—and each with their own unique skill-level—it was a tough challenge to appeal to all use-cases.

One way we overcame this was to split the site-architecture into five more regimented sections that provided a rigid backbone for the website. Secondly we introduced an improved way to access more of this better-organised content.

We brought in a fixed side navigation with direct access to the four key, colour-coded sections and search, which also allows you to access a second level of content on hover.

A photoshoot from two horse racing event locations gave access to a whole host of creative imagery for use throughout the website—resulting in a friendlier, personable and more approachable feel to the photos.

1_BHA1_BHA
3_BHA3_BHA
2_BHA2_BHA
4_BHA4_BHA
6_BHA6_BHA
7_BHA7_BHA

The Outcome

A clean, vibrant and appealing responsive website for the BHA. The new website is colourful and visually engaging with a focus on providing a simple way to navigate through the site for all levels of user. We managed to pack the site with more detailed and relevant information, yet we did it in a much more manageable, accessible and engaging way to the end users.

[unex_ce_button id="content_ioa4g3lit" button_text_color="#333333" button_font="bold" button_font_size="16px" button_width="auto" button_alignment="left" button_text_spacing="1.5px" button_bg_color="transparent" button_padding="11px 32px 11px 32px" button_border_width="3px" button_border_color="#333333" button_border_radius="6px" button_text_hover_color="#1e3276" button_text_spacing_hover="1.5px" button_bg_hover_color="transparent" button_border_hover_color="#1e3276" button_link="https://www.britishhorseracing.com" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]VISIT SITE ➞[/ce_button]