Derby Jackpot Mobile Redesign 

MOBILE DESIGN, USER INTERFACE, USER EXPERIENCE   


Overview

The Problem

Derby.com's mobile site has a lot to offer—it's a portal to mobile versions of all our desktop users' favorite games, and a great way to onboard new users looking for a way to bet on the go. However, the first page most users saw on the site, the mobile version of Derby Jackpot, often left them confused about how to interact with it and whether they could trust our company with their info and money. 

We had to figure out a way to unify our desktop and mobile sites a bit better for the users coming from desktop, and onboard new users with a visually pleasing and more usable mobile experience. 

Duration

2 weeks


Original Screens

 Homepage (far left), bet types page, and Win bet page.

Homepage (far left), bet types page, and Win bet page.

Issues with the original design:

  • Unclear, confusing calls to action and CTA button colors on homepage, resulting in drop-off of potential new users
  • Too much dependence on the Back button to move between important pages, such as bet types
  • Tiny, hard-to-read text in some areas
  • Important navigation hidden in hamburger menu
  • Lack of user chat, which is an extremely popular part of the desktop product
  • Too much dependence on users scrolling down homepage to find important info
  • Not a clean, modern design—purely functional

My Redesign

New Nav
Nav Bar Specs

New Navigation

To begin, I had to create a new navigation system that took important in-game navigation out of the site's hamburger menu. Users would still have to use that menu to switch to different games, but sub-navigation would be moved into the game itself. I determined from months of discussion with users in the desktop site's chat, email feedback, and watching users interact with the site that the most important items to include it were the homepage (with a countdown to the next race), a page for watching the current race, a page to view your most recent bets and their outcomes with a tap, and a chat screen. 


The Screens

DJ-Home-Screen-Shorter.png

Home Screen

With the new nav bar providing necessary context for where you are in the game site, and the bet types you can choose from above the fold and easy to switch between, it was no longer unclear how to interact with the homepage of the game.

The changes:

  • Tab navigation between different pages of the app
  • More obvious calls to action
  • Addition of player chat screen
  • Only most important info about current race called out 
  • Swipe navigation between bet types for easily placing multiple bets
  • Individual horse race history expanded/made readable instead of displaying tiny text
  • Bet types explained when user taps to them
  • Simple indication of whether you've starred or won money on a horse
  • Betting flow more unified with desktop version

Secondary Screens

Watch page
Bet Screen
Chat screen

Results

After my redesign, the mobile Derby Jackpot site experienced an over 30% jump in new user retention over the following month and increased use by current players, and it got a ton of great feedback from people who'd been waiting for an update like this.