Sherlock Chromes

A gamified training experience
Provide a gamified training experience to help Best Buy sales people learn more about Chromebooks.
An escape room style game in which players have to use the facts they learn about Chromebooks to solve the mystery.
Project Type
3 months
UI Design, Prototyping, Dev Handoff


24G is a digital experience agency in Troy, MI that creates and builds software and digital solutions for some of the world’s biggest brands. Sherlock Chromes was a gamified training experience that 24G designed in 2020 for Best Buy employees to learn more about Chromebooks.

google sherlock chromes game user interface

My Role & Responsibilities

My area of focus on this project was more on the user interface rather than user experience or research, though UX principles were taken into account throughout the process. My responsibilities included user interface design, prototyping, development handoff, and design quality assurance. I spent a lot of time gathering references images from the Google Chromebook site as well as other Google products (Meet and Forms).

google sherlock chromes game design references

User Interface Design

Our game designer had determined the user flow of the game, and the project manager had relayed to me the screens that were needed. I was tasked with designing how exactly the interface would look. I studied Google’s brand guidelines and referenced a few escape room interfaces to determine the most common placement of the navigation controls.

Story Introduction

After entering their login credentials, players are introduced to the story via a few pages of images and text with a voiceover narration. They are able to toggle the sound on and off throughout the game.


Users navigate around the room using the four arrows in the top right and the zoom in/zoom out. To enter a different room they click on the blue arrows on the floor.


Clicking on a colored object would reveal a clue to help them solve the mystery. Most of them are based on facts about Chromebooks.

Knowledge Checks

Throughout the game there are knowledge checks to make sure the information about Chromebooks is sticking.


I created a prototype in Adobe XD to simulate the user flow and show how certain interactions such as hovering over an answer in the trivia game would look. This provided the entire team, but especially the client and the developers, with an idea of how the final product will look and function.

Other projects