Challenge

Zynga’s Puzzle creative team melded richly painted art, original composed music, and spirited animation into some of the company’s most gorgeous games. When given full game design requirements and a defined template to follow, the team executed quickly utilizing a waterfall method of deliverable phases. However, this method did not work well with large complex UX features that required a more iterative process and working with cross disciplines. Discipline teams from creative, product, and engineering were not entirely aligned on the creative vision. Product team often defined the business and creative requirements in their spec document, leaving no room for interpretation for creative team. Once the art and animation is created, it became much harder to make change. However, this method did not work well with large complex UX features that required a more iterative process and working with cross disciplines. Discipline teams from creative, product, and engineering were not entirely aligned on the creative vision. Product team often defined the business and creative requirements in their spec document, leaving no room for interpretation for creative team. Once the art and animation is created, it became much harder to make changes.

Approach

My goal was to make sure the game delivered a great player experience for players and the team was well-equipped to build better features on time. In my first few weeks, I interviewed several stakeholders, game leads, and my direct team. What are the strengths and weaknesses? What is the creative vision for casual puzzle games? What are the known issues and what are the unknowns?

I organized a team workshop that lasted two days. I utilized mind maps so we could begin to align goals and commonalities between all stakeholders. One mind map was to jot down “What makes a good casino experience?” and the other “How can we communicate better? We discussed creative process and core design principles that everyone could align on.

Key takeaways from the session were:

• Design alignment with product managers and engineers

• Hybrid pipeline of “waterfall” and “agile” for concepting features

• Rapid prototyping for concept testing before production begins

• UI guidelines and toolkit to build visual parity across all platforms

Pipeline Optimized for Efficiency
Based loosely on Google design sprints, I worked out a pre-production process which the UX team could complete in less than three weeks. The UX team worked closely with product and engineers to define what can be built that satisfies both business and design goals. One of the key deliverables to the rest of the team was a clear path forward with high level wireframes and user stories. The new process allowed the the entire production team to collaborate and be more invested from start to end. Since the required assets and tasks were more clearly defined, costing and scope was more accurate, and from there, the team was able to prioritize and focus on important tasks. The next two to three weeks remained for the UX team to focus on prototype refinement and quick testing with the internal team first, then actual players.

More Efficiency and Higher Fidelity Interactions via Rapid Prototyping
Among the four designers including myself, we used Illustrator, Photoshop, Sketch, Adobe XD, and Axure. For complex interactions with multiple states and edge cases, the UX team went one step further by creating an interactive prototype. It was critical to be able to put our designs on an actual device and test with real players. After weighing options and conducting research on what works the best for a multi-platform game, we chose Axure as the primary tool for wireframing and prototyping. One of the senior UX designers and I worked on developing a UI toolkit within Axure in order to lessen the learning curve for other designers while standardizing the look. We identified the most commonly used design patterns in our game: carousel navigation, horizontal and vertical scrolling, pagination, and side drawer. For each, we developed Axure widgets that the design team could then drop and customize for their own feature prototypes.

By building a good design system and widgets, we were able to reduce the learning curve, increase feature parity, and improve our pre-production time.

Styleguide
Along with the UX/UI team, I worked closely with the Art Director of Hit It Rich to establish a styleguide in an effort to refresh the UI style of the game. The art director wanted a festive ‘Carnivale’ meets ‘Old Vegas’ feel with organic forms polished with rich gold and illuminated with neon lights. In order to achieve this goal, I had to break down which UI elements could be unique one-offs and which could be standardized. The goal was to strike a balance between the two so that the game was always a feast for the eyes but also lightweight on the app size.