PROJECT: DoubleDown Casino's Lobby
PLATFORM: Facebook Desktop
CHRONOLOGY: Sept 2017
OUR STARTING POINT
We needed to take the old Doubledown Casino lobby on Facebook and give it a fresh new look. The established look and feel used a diagetic (in-world) interface, using casino signs as major navigational buttons. While initially popular with players who craved the casino atmosphere, it proved to be unwieldy to scale content. And while it replicated that casino vibe, it also duplicated the visual density that can disorient folks.
As you can see from the content map below, it felt both cluttered, and diffuse. Navigation to games took up the vast majority of the screen real estate--but sometimes new users didn't even understand that the signs were buttons. Or they stumbled around, clicking on everything, assuming that clicking on a slot would take you to a slot. With different TYPES of content scattered across the screen, there was no unification or pattern to what was placed where. This was the result of ad hoc design--shoe-horning in new features in whatever available space was afforded.
Screenshot of the original Doubledown Casino Lobby. Because it was so colorful, I desaturated it in order to lay a "heat map" on top, showing what types of information are being displayed, what items are interface objects, and how much room each takes up.
TYPES OF INFORMATION
I first took a look at what information was on-screen and broke it down into macro categories. These generally divided into use cases for the user (profile, content) or business cases (retention, monetization). Ideally trying to keep these grouped in the future would allow users to unconsciously train themselves where to look as new features were integrated.
And then from there I designed four major types of potential layouts based on which use cases we might decide to emphasize most. Major goals included: scalability of design to accommodate fresh new content and creating visual "hubs" to guide the user's actions.
V1: Side Navigation
Version 01: Monetization with Side Navigation
Look and Feel: You'll notice that our background here has shifted to an eye-height view of the casino vs the more lofty view of the diagetic interface. Because we are abandoning the diagetic components, a more intimate and immersive view of the casino--framing the content but not distracting from it--becomes the order of the day. (Background concept by Jeff Haynie.)
Navigation: Left side navigation provides quick links to major categories and favourites. The favs remain outside of the scrollable area, as the more important information is, the more persistent it should be on screen. The context of favs changes when content sorts, ie if Bingo is chosen, favs turn into Fav Bingo boards.
Logo remains consistently in upper left as a home navigation point.
Focus: Monetization. Content RIGHT puts the ads in the center and the Gift/Calendar/FreeCoins widget in lower right. (Hot spot in Z-pattern reading)
Social: Leaderboard is not a priority but strongly associated with gifts. Dual tab to switch between Global and Friends boards.
V2: Bottom Navigation
Version 02: Retention via Bottom Navigation
Navigation: The category content (slots, tournaments, etc) resides at the bottom while user content (avatar, level, loyalty, chips, coins) is up top. There is a slight return to the diagetic interface here, in that the major types of casino content is
Focus: The Free Chips/Logo/Gift patterns acts as a primary focus here. RETENTION is a primary goal. The logo would move to the center-top on sub-pages. Retention and content categories are centered and closely associated with social aspects.
Social: The leaderboard is split into two smaller boards (Global vs Friends) with a flyout affordance tab.
V3: Top Centered Navigation
Version 03: Retention Utilizing Top Centered Navigation
Navigation: In this iteration, the category content takes top billing, as it were, with user content (avatar, level, loyalty, chips, coins) crowning it, but remaining subservient. Logo remains consistently in upper left as a home navigation point.
This iteration introduced a timeline for Retention/Daily/Time-Limited actions at bottom above leaderboard and this idea seemed very attractive to stakeholders, so I iterated on it in the follow-up wireframe.
Focus: All the daily actions form a timeline, creating an unconscious check-off list. RETENTION is a primary goal.Retention and content categories are centered and closely associated with social aspects.
Social: The leaderboard is tabbed and kept minimal.
Hybridized Top Center Nav with Daily Actions Timeline.
THE DAILY ACTIONS TIMELINE
This version evolved from a desire to simplify the density of the top-centered navigation and to take the daily actions and boil them down to a visual checklist. (You will note that this version does not have the action color code of the prior versions and that was by request, as we were homing in on this particular design and no longer required the hot spot associations.)
WHY THIS WAS VALUABLE
Ultimately, this blue sky endeavor was rolled into research for the next project, Doubledown Fort Knox, but many of our early discussions about tiles, grouping of actions, and how we would approach the casino look and feel were informed by these preliminary iterations. Primarily, it opened up conversations among stakeholders about user personas, and balancing business goals with the user journey.