A complete redesign and new Bootstrap build of the pre-login website for the popular horse and greyhound racing OTB (Off Track Betting) service.
When the marketing team at BetAmerica decided to create a brand new pre-login website, they decided to put their customers first, like always. That meant eliminating everything from the old site that didn't give the user the best possible experience, which ultimately meant giving users the means to get to the wagering interface as fast as possible, either by logging into an existing account or signing up for a new one. With those requirements in mind, I worked with the team to plan, wireframe, and design a homepage that makes it easy for existing users to log in quickly, but also showcases the many great reasons why new visitors should sign up and gives them the ability to do so. After finalizing the design, I developed the homepage and subsequent subpages using Bootstrap and LESS, adapting the desktop design for tablets and mobile devices on the fly.
Mobile Solutions Galore
Mobile-first is often the best way to design new sites nowadays, but in this case it made more sense to design for desktop-first because the old site was desktop-only and we had a tight timeframe. Adapting the new desktop design for mobile screens required clever thinking. I developed a custom header layout that does away with the default Bootstrap hamburger menu in favor of a more visually balanced button drop-down menu. Other solutions I worked on included dropping the hero image overlay text below the image on mobile, putting “As Seen On” logos into carousels as opposed to stacking them, and hiding footer links in toggle menus. Most of these solutions focused on prioritizing the most valuable information, while removing or hiding extra details.
Interesting & Informative Subpages
Since the homepage was designed for specific content, the subpages of the pre-login site couldn't just be templated from it. Rather, the subpages needed to be designed to accommodate various types of content. Instead of a large hero image like the homepage, subpages got a narrow header bar with a page title and description overlaying a background image. On the homepage, the images are used to grab attention and “sell” the content, while the images on subpages are more aesthetic and used to reinforce the theme of the page. On the Schedule of upcoming races page (below), I used my CSS skills to customize the design of the schedule by targeting the markup created by the JS plugin. I designed it to visually match the rest of the new site, resulting in a more consistent user experience.
*Please note the current BetAmerica website may differ in design and code from the original site I worked on.