Brisnet Site Redesign
-
Responsive Web
Duration
2024
-
2025
Tools
Adobe CC, Figma
My Role
UI Designer
An Introduction
Brisnet is the leading site for detailed performance data and tools for race horse handicapping. It helps people who are interested in the sport of horse racing succeed by providing them access to a large database of information from past races and performances as well as speed figures generated by Brisnet, which can help predict how well a horse will perform in a race.
The Status
The Problems
The original Brisnet design was cluttered, with an outdated navigation that lacked organization. Key product information was hidden beyond tabbed navigational UI without a clear path to specific destinations. Aesthetically, the site was dated and failed to keep up with design standards. It used a narrow fixed width layout that did not respond to resizing which was a normal limitation of the times it was originally designed in.
Along with the previous problems, the content management system of the original site was built in Wordpress and was a major limitation for the marketing team. It had become difficult to manage due to the sheer size of articles and content on the Brisnet site.
Along with the previous problems, the content management system of the original site was built in Wordpress and was a major limitation for the marketing team. It had become difficult to manage due to the sheer size of articles and content on the Brisnet site.
Our Goals
Our aim with the redesign of the Brisnet site was to modernize it in a few ways:
We wanted to transition the content management system from Wordpress, to the same system that the TwinSpires site was managed with. This would allow marketing to publish content that could be shared between the two sites without much effort, which is a big win across multiple teams.
The next goal was to increase the monetization and transaction opportunites like adding banner ads, links to CDI affiliates like TwinSpires, Churchill Downs, KY Derby Pages, and more, as well as better showcase the Brisnet products. Since we were moving Brisnet to the same CMS as Twinspires, we would be able to use the native banner carousel from Twinspires on the new Brisnet home page.
We also wanted to modernize the interface and make the site more aesthetically pleasing to users, along with improving the user experience and consolidate some of the links across multiple pages and make navigation less confusing.
And finally, improve search functionality by having the search function encompass all brisnet content including tags and article titles as well as populate results by relevance to search terms.
User Flows
To improve the Brisnet website's navigation, I implemented a 'Mega Menu' UI, which allowed us to organize complex content into clear, easily accessible categories. This direction was more intuitive and allowed users to scan the menu items quickly and easily. The mega menu not only streamlined navigation but also reduced the number of clicks needed to access key areas of the site.
One big limitation that I had with the Brisnet redesign was with the product store pages, including this area of the site was out of scope with the first phase of this project so I needed to work around it. So with this in mind, the mega menu helped in this aspect by listing the sub categories of all of the products even though we were not able to anchor links directly to every one of those pages.
One big limitation that I had with the Brisnet redesign was with the product store pages, including this area of the site was out of scope with the first phase of this project so I needed to work around it. So with this in mind, the mega menu helped in this aspect by listing the sub categories of all of the products even though we were not able to anchor links directly to every one of those pages.
Ideation
Low Fidelity Wireframes
Working through the initial iterations for the home page, I was focusing on finding the best way to organize pertinent information in a scalable way.
The mega menu was one of the more important components I was working on for this project. My thoughts behind the layout was to eventually have the top level headers link to the main section of each grouping of past performances, while having each lower level item link to the specific corresponding past performance page.
