Jeopardy! Playshow

DIRECTION, UX/UI DESIGN

The Jeopardy Playshow Game is a Windows 10 UWP cross-device companion experience that leverages the multi-service offering within Microsoft. The Playshow Game was looked as a “transformational app experience” because of its cross-device leverage and use of Azure.

Jeopardy_logo-e1552398042840-2.jpg

Sony wanted to monetize episodes of Jeopardy and make them accessible to the public through Windows 10. They were especially excited in creating an experience between Xbox and phone for a true companion gaming experience. I was asked to come work with Sony and help give design direction and design out screens for Xbox and phone to help create the overall experience.

x-box-console-joypad-activity.jpg

Designing for a game show app

Sony was very excited about creating this app for Jeopardy but also wanted to ensure that it was flexible to use for other apps like wheel of fortune or others in the future. So, the first thing that I needed to consider was flexibility and ability to templatize the app. The second set of considerations were ensuring that it was accessible for all types of phone users, adaptive for varying group sizes or single play and that it was easy to use. So not a small amount of considerations… but not impossible.

 

With all that taken for account, the first initial round was of sketches and flows to define the uber relationship and interaction between devices. Because the two devices were working asynchronously it was important to make sure that they were aligning correctly and all pages were accounted for. Next, I worked on wire framing out the UX for both Xbox and phone, keeping in mind the need for flexibility of Xbox to go to desktop or laptop, templatizing, and group vs single play. 

       UX
Playgame _WireframeFlows_XboxApp_Page_1.
Playgame _WireframeFlows_XboxApp_Page_2.
Playgame _WireframeFlows_XboxApp_Page_3.
Playgame _WireframeFlows_XboxApp_Page_4.
Screen Shot 2019-11-13 at 4.55.45 PM.png

Making it Jeopardy worthy

Now for the fun stuff! Because the app needed to be flexible and agnostic regardless of the system it was on, aside from Xbox. I had to ensure that the system controls were as neutral as possible for common UI controls like buttons, list etc. that might be branded.

 

As for branding for Jeopardy, it too needed to be flexible as there were many types of set design branding depending on the season, championship, or special episode that the team wanted incorporated for users to know what game they were on. Jeopardy had also rebranded their digital branding and had introduced 6 primary colors that they used throughout their properties.

 

With all the things to consider, I decided to leverage the new Jeopardy color palette maintaining as much consistency from their other branded media to create cohesion. As for the different set design branding, I ran with representing it in the background image and swappable areas in key spots as indicators of the episode, season or special show.

  INITIAL UX
Jeopardy_XboxAppScreens_JeopardyHomeScre
Jeopardy_XboxAppScreens_JeopardyHomeScre
Jeopardy_XboxAppScreens_JeopardyHomeScre
Jeopardy_XboxAppScreens_JeopardyHomeScre
Jeopardy_XboxAppScreens_v2_JeopardyEpiso
Jeopardy_XboxAppScreens_v2_JeopardyBundl
Jeopardy_XboxAppScreens_v2_JeopardyBundl

Syncing up your devices

One of the most important pieces of the game was the use of both a phone and secondary device. Because of this it was extremely important to ensure that the setup and syncing between the device was simple and easy, both for the user and also with the system itself. Thankfully there was a wonderful team working on the coding and getting the system to sync like it needed. So, the focus on the UX/UI was in my heads. Again, for this the UI design needed to be agnostic of the device it was on and but also needs to carry out the universal look of the Jeopardy game. 


For the phone interaction and user flow it was a simple few steps of launching, creating a signature with user color selection, then submitting and waiting for the second device to send a code to sync, entering the code and launching.

 

For the second device it was more about prompting the user to initialize the setup on their phone than providing visual cues and the code to sync the two devices. Of course, with the second device there were additional screens needed like remembering the device and if you were in wait mode for other parties to join but I tried to minimize the extra weight of added screens just for the sake of having them vs the need.

  INITIAL UX
Jeopardy_PhoneExperience_Phone_Splash.jp
Jeopardy_PhoneExperience_Phone_Signature
Jeopardy_PhoneExperience_Phone_loading.j
Jeopardy_PhoneExperience_Phone_loadingCo
Jeopardy_PhoneExperience_Phone_EnterCode
Jeopardy_PhoneExperience_Phone_DisabledB
Jeopardy_screens_XboxInitial_Xbox_Splash
Jeopardy_screens_XboxInitial_Xbox_Downlo
Jeopardy_screens_XboxInitial_Xbox_Loadin
Jeopardy_screens_XboxInitial_Xbox_Loadin
Jeopardy_screens_XboxInitial_Xbox_loadin
Jeopardy_screens_XboxInitial_Xbox_codeSc
Jeopardy_screens_XboxInitial_Xbox_Dialog
Jeopardy_screens_XboxInitial_Xbox_Dialog

A guide to make it easy

Another important section that was needed for this experience was a guide to help users understand how to play the game. While the Jeopardy itself can be challenging, we didn’t want the part of using the game to be. I wanted to create a quick guide that was fun and easy to go through. That you could walk away with the gist of the game in four quick steps than jump in and play. To make it more fun each screen had a quick animation with a little personality to show the action needed in each step. When the steps were done the player would select to start but could always reference the guide if needed either from their phone of the secondary device.

Jeopardy_screens_Learning-01.png
Jeopardy_screens_Learning-02.png
Jeopardy_screens_Learning-03.png
Jeopardy_screens_Learning-04.png
Jeopardy_screens_Learning-05.png
Jeopardy_screens_Learning-06.png
Jeopardy_screens_Learning-07.png
Jeopardy_screens_Learning-08.png

Showing your knowledge with pride

We had also talked about creating some sort of reward system for game play. Both Sony and I agreed that when played on Xbox, it would be great to create badges to celebrate victories from level of mastery, to championships and other special noteworthy moments and levels. After initial ideation around leveling, grouping and overall direction for the badges, I had one of my designers work on fleshing out the series of badges shown below.

BADGES
badges-2.png
badges-1.png
Jeopardy_badges2.png

This is Jeopardy!

It was a great privilege and adventure working on this project. From start to finish I thoroughly enjoyed working with the Sony team from concept to final product. I also felt extremely lucky to have been able to experience first-hand a Jeopardy episode taping, seeing it from the contestant and audience perspective, as well as getting to stand in a contestant’s spots. It really exposed a different view of the game and helped me think through the different ways to share that with the home Jeopardy players.

bottom-padding.png