FanDuel
Dark mode
I took a hackathon winning project to a releasable feature to millions of FanDuel users across our range of product verticals.
01
Summary
Background
FanDuel is a sports betting company available in the US. FanDuel has multiple product verticals in different gambling spaces including Casino, Sportsbook, Fantasy and Racing.
We knew from direct feedback that dark mode was something customers wanted. However it was always deprioritised in favour of projects more likely to increase revenue and deliver more value.
I worked with an Engineer during a FanDuel hackathon which led to dark mode finally being released on the Sportsbook app.
Other contributors
Senior Engineer, Product Designer
02
My role
Project lead
I created the team that went on to win at the FanDuel hackathon. The goal of the project was to investigate the requirements to launch dark mode and demonstrate what was needed to key stakeholders.
I also wanted to convince those stakeholders that dark mode isn't a nice to have anymore and more of an expectation.
03
The hackathon
Why dark mode is important to customers
A big part of the pitch I made during the hackathon was how FanDuel fit into a customer’s ecosystem of applications and experiences. We weren’t staying up to date with customer expectations which meant that our app stood out like a blinding light.
Manipulating the design system
FanDuel already had a sophisticated design system. And when I dug through the code, I discovered that the project had been set up in a way to already support different themes, including dark mode.
The FanDuel design system utilised a token based system. So I could create a new theme file and re-allocate colors to the token aliases so that an appropriate color was used when dark mode was turned on.
I did need to add shades of black to the design system as navy blue was the darkest color we had. Once these were added in and named, we were in a good position to test the new theme.
The engineer who I was working with created a new project that targeted the theme. This allowed us to see our work for the first time in-situ.
Different sources of code is spoiling the party.
We quickly realised that creating a dark mode wasn't going to be as simple as first suspected. As I mentioned, FanDuel has mutiple product verticals that all cross sell. And each product vertical has it's own codebase. So when we previewed dark mode for the first time, we had a number of areas of the app that weren't being targeted. This was going to be a part of the project that would require some collaboration and more investigation outside of the hackathon.
Presenting dark mode
In order to raise the excitement about dark mode, I produced a promo video to showcase the new designs during the hackathon where the project was started.
04
Solution
Compromise...
We knew that delivering dark mode would take a massive step back if we had to make all cross sell product verticals work. So we made the decision to compromise and ensure the most visited parts of our application would work with dark mode. That meant things like the account settings page would be in light theme. These are things we could fix over time with future releases.
We utilised native OS experiences when possible
To make the delivery of dark mode as simple as possible, the team relied on the native experience of the operating systems. This was possible even though the app front end was built using React Native. This had the added benefit of being able to follow the app wide appearance settings chosen by our customers.
Logos and dark mode didn't mix well
One of the issues we uncovered whilst building dark mode was the presentation of team logos and country flags. Some team logos were hard to see when in dark mode. We accepted this as a limitation for version 1 of the release and would fix it with UI design in a future release.
The long awaited dark mode feature was finally delivered to FanDuel Sportsbook
We faced far more challenges than were predicted. A number of compromises had to be made but dark mode was finally made available on the Sportsbook app. Soon after releasing on the native applications, we were able to make dark mode available on the web app as well.
05
Results
Feedback from customers
We had great feedback through social media and from our community after launching dark mode. The main issues our customers identified were the ones we were already aware of.
