Mystery Game Design System – Maps

Component objective:

In addition to the obvious objective of giving players a digital version of any paper maps included in their mystery box, I wanted the map component to help provide context for all the pieces of their mystery. Using hotspots to link to other maps and locations, and allowing players to add their own comments and notes with custom map pins, I attempted to elevate the map experience.

Design challenges:

I wanted to leave the system flexible for game designers to use any kind of map relevant to each box, including examples as diverse as high-level city maps of streets, detailed neighborhood maps of houses, a floor plan of a single house, or even an image of a crime scene with multiple areas to investigate.

As the primary point of context, the “maps” component would carry a heavy burden, and its success or failure would largely drive players’ response to the digital gameplay. And with component versatility comes inherent complexity, so I worked hard to make functionality for navigating between maps and adding annotations intuitive.

The map pin feature within this component also serves as players’ primary way of tracking notes, comments, and questions throughout their gameplay, and identifying relationships and links between parts of the case, like a digital mystery board. Bringing something as iconically complex as a huge cork board to a small screen experience proved challenging, but I’m pretty happy with where I ended up.

But before I’d try to commercialize this design system, this component would need the most testing.

Other components:

• Introduction: Project overview
• Screenflow: Tracking mystery boxes and buying new ones
• Screenflow: Mystery box home screen and component list
• Component: Maps + annotation functionality (THIS PAGE)
• Component: Locks (2 variants)
• Component: Cipher solver
• Component: Image puzzles (2 variants – PENDING)
• Component: Logic puzzle grid (PENDING)
• Component: QR Code scanner (PENDING)