PopCap Crafting UX

Design Challenge: Let players make items within their game

Plants vs Zombies Adventures was a social game for Facebook, that combined the tower-defense gameplay of Plants vs Zombies with a harvesting mechanic (like you'd find on FarmVille). My job was to create a way for players combine objects they'd find in the game into new, useful items.

Step 1: Requirements, Research, Ideation

The crafting concept would be used to create plants, buildings, and city objects. Recipes would need to be clear. Some objects could be bought with cash. After meeting with stakeholders, I started brainstorming and sketching ideas. Should the interaction be abstract? Should it be a garden? A Rube Goldberg machine? I invited stakeholders and other interested parties into the brainstorming process, and came up with a dozen viable ideas.

A million different solutions could work at this point. I wanted to see how other games had solved a similar problem. I researched the competitive set to understand conventions and any existing design patterns. I color-coded similar functions across different UI.

Step 2: Define User Flow, Identify Key Screens

I created the user flow to identify key screens and interactions to wireframe. These screens helped solidify the concepts, and gave concept artists direction.

Step 3: Create a User-Centric Experience

At the heart of the ux was the crafting interface. I designed a grid-selection system that led to an inventory and recipe section. I presented wireframes product management and engineering stakeholders, and we discussed improvements and balanced engineering costs.

View wireframe in new window

Step 4: Prototype & Usability Testing

Usability testing was vital at this stage. During testing we introduced new ways to create plants, and we moved from crafting toward planting/harvesting. The UX design was flexible enough to accommodate this pivot in the game design.

Step 5: Launch & Feature Support

At launch, players understood the feature and were able to complete their tasks. The flexibility of the design allowed product management introduce hard-currency purchases.

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

View final art in a new window