PopCap Saga Map UX

Design Challenge: Create a saga map for PvZ Adventures

Midway through development of PvZ Adventures, the team hit upon the idea to add a "Map" element to the game. Players seemed to enjoy seeing new levels that looked like an entirely new place. My job was to take the map idea and run with it.


Step 1: Requirements, Research, Ideation

A saga map is a fairly understood concept in social games. With our map, I wanted to do something different and memorable. I came up with an idea of a "Road Trip," that alluded to 1950s Americana and Route 66. I brainstormed with artists and game designers for themes and key art.

Click to view wireframe in new window


Step 2: Define User Flow, Identify Key Screens

Working with product managers, I developed a gating system that would slow player progress and explain what players needed to do to advance to new levels. This is a standard free-to-play system, but we put our own spin on it.


Step 3: Create a User-Centric Experience

As this was a Facebook game, I created wireframes within Facebook's flash game canvas size. The wireframes explained concepts to artists and engineers and gave specific instructions for rollovers and other interactions.

Click to view wireframe in new window


Step 4: Prototype & Usability Testing

Road Trip was an entirely new concept for our game, so we tested it through a longitudinal study. We selected 12 people living in the bay area who played social games, and asked them to play our game and keep a record of their progress. After 14 days we brought them in and interviewed them about the experience. I created decks for the findings and wrote UX recommendations for design and product management.


Step 5: Launch & Feature Support

Through testing we discovered dozens of tweaks and polish tasks that made the game tighter and much more fun. When it launched, the Road Trip section of the game kept players engaged and returning.

Note: The final art shown here was created by the PopCap art team, not me.

Click to view final art and annotations in new window