Redesigning the Emerald Downs Website
Emerald Downs needed a website redesign to improve user engagement and better showcase their live racing events. The goal was to create a more user-friendly and mobile-responsive site to boost ticket sales and attract a wider audience, especially those attending in-person races.
Project Goals:
Simplify the ticket purchasing process.
Improve site speed and mobile responsiveness.
Increase user engagement and session duration.
Challenges:
The outdated design needs a refresh in order to compete with the competition.
The complex ticket-buying process resulted in high cart abandonment.
Launching the redesigned site before the next racing season is limited.
Final Results:
20% increase in mobile ticket purchases after simplifying the checkout process and improving mobile design.
35% faster page load times, resulting in better user retention and lower bounce rates.
There was a 15% rise in user session duration, as the new design made it easier for visitors to find relevant information and interact with the site.
Positive feedback from users on the intuitive layout and improved navigation, especially for mobile users.
Constraints:
Tight Deadline: The site must be launched before the racing season begins, requiring rapid design and development cycles.
Legacy Systems: We had to work within the constraints of an outdated content management system, limiting backend flexibility.
Mobile Responsiveness: Given the large percentage of mobile users, it was critical to ensure the site was fully responsive across a wide range of devices.
User Diversity: The site needs to appeal to both regular visitors and newcomers for continued use.
Step 1: Conducting User Research
To ensure that the redesign addressed Emerald Downs' users' actual pain points, I conducted a series of user interviews and usability tests. The goal was to gather actionable insights into how users interacted with the old site, what frustrated them the most, and what improvements they wanted to see.
Research Methods
User Interviews:
I conducted in-depth interviews with both frequent bettors and casual users. This helped identify two key user personas:Frequent Bettors: These users demanded an efficient and precise betting process with real-time updates and easy navigation.
Casual Fans: They wanted to check race results, explore upcoming events, and place occasional bets, but they were often overwhelmed by the site's complexity.
Usability Testing:
I ran usability tests with a prototype of the existing site, which highlighted specific pain points, including:Confusing betting steps: Users struggled to place bets due to poor labeling and excessive steps.
Slow site performance: Long load times, especially on mobile, significantly hindered user engagement.
Competitive Analysis:
I also conducted a competitive analysis to benchmark Emerald Downs against other online betting platforms. This revealed best practices, such as clear call-to-action buttons, simplified forms, and real-time updates, which would be critical in our redesign.
How Research Informed the Design
Streamlined Betting Flow: I simplified the betting process into three clear steps, reducing the number of clicks and improving clarity.
Performance Optimization: I prioritized site speed by optimizing images and code, which led to a 230% improvement in load times.
Mobile-First Design: The new design was responsive and mobile-friendly, ensuring a seamless experience across all devices.
Consistent Branding: The design system created visual consistency across the platform, increasing trust and improving user engagement.
Based on these findings, we identified key design challenges to address.
Key Findings
Complexity in Betting: Users were frustrated by the confusing multi-step betting process, which required too many clicks and often led to abandonment.
Site Speed Issues: Slow load times, especially during peak hours, caused users to leave the site before completing a transaction.
Lack of Mobile Optimization: Casual users accessing the site from their mobile devices found navigating the disjointed mobile interface difficult.
Inconsistent Branding: Users felt the site lacked credibility due to the inconsistent visual design across pages and devices.
Step 2: Defining the Design Challenges
I identified several core challenges that were hurting both user experience and business performance:
Confusing Betting Process: Users struggled to understand the betting process due to a lack of UI components, leading to high abandonment rates.
Slow Load Times: The existing site’s slow load times on both desktop and mobile drove users away before they could engage with key features.
Inconsistent Branding: Visual inconsistency between pages created confusion and distrust among users, particularly when switching between mobile and desktop.
With the business goals and user needs clearly defined, I designed a scalable, user-friendly interface to improve user experience and performance metrics.
Emerald Downs' Old Website
Step 3: Building the Solution -
The Emerald Downs Design System
I developed the Emerald Downs Design System, a comprehensive set of design rules to guide the website's visual and functional aspects.
Key Goals of the Design System:
UI Consistency: Reducing ambiguity and ensuring a uniform experience across devices and platforms.
Scalability: Enabling flexibility for future feature development.
Clarity in User Interaction: Improving the betting flow and simplifying navigation.
This system allowed the development team to implement updates faster and gave Emerald Downs the tools to maintain visual consistency as the platform evolved.
Typography and Iconography
I chose Montserrat as the primary typeface for its geometric structure and clear legibility, which are crucial for conveying information quickly to users making time-sensitive betting decisions.
For iconography, I designed simple, illustrative icons representing horse racing elements. These were used across desktop and mobile versions to create a sense of familiarity and enhance usability without overwhelming the interface.
Grid System for Responsiveness
To ensure seamless responsiveness across devices, I implemented a 12-column grid system for desktops and an 8px baseline grid for mobile.
This structure allowed the design to adapt effortlessly to various screen sizes while maintaining visual harmony.
With the design system in place, we implemented key features to improve usability and drive engagement.
Step 4: Implementing Key Features
1. Simplified Betting Process
The heart of the redesign was creating a streamlined betting interface that reduced friction. I redesigned the betting process into three clear steps, eliminating unnecessary interactions and providing users with real-time information during the betting process.
Before: The old process required too many clicks, poorly labeled buttons, and unclear paths to complete a bet.
After: A simplified flow that allowed users to place a bet in three steps: Choose Race, Select Bet Type, and Confirm Bet—all with clear labels and intuitive navigation.
2. Improving Load Times with Optimized UI
Minimizing heavy images and implementing more efficient code reduced the website load time by 230%, creating a faster, more enjoyable user experience.
3. Consistent, Intuitive Navigation
I created a new navigation system that clearly defined paths for different user types. Whether users wanted to bet, check race results, or explore upcoming events, the navigation was intuitive and aligned with user goals.
Before: Users struggled to navigate through cluttered menus, especially on mobile.
After: A clean, simplified navigation with prominent CTAs for betting, race information, and events.
Once implemented, we measured the impact of these changes on user engagement and ticket sales.
Step 5: Results and Metrics
The redesigned Emerald Downs website didn’t just look better—it performed better. Within the first three months after the relaunch, we saw:
230% faster page load times, leading to reduced abandonment rates.
Bounce rate reduced by 36%, as users stayed longer and engaged with the platform.
450% increase in betting sign-ups, showing a direct link between the simplified process and increased conversions.
Social media engagement grew by 45% on Instagram and 60% on Twitter, thanks to the redesigned and more engaging event pages.
Step 6: Reflections and Learnings
This project taught me the importance of balancing user needs with business objectives while staying focused on scalability and future growth. By building the design system, I ensured that Emerald Downs could continue to evolve without sacrificing the consistency and simplicity that users now expected.
Future Enhancements:
Accessibility Improvements: I plan to optimize the website for accessibility, including color contrast adjustments and keyboard navigation.
User Feedback Integration: Additional user testing will continue to refine the betting flow and navigation, making the experience even more user-friendly.
