Zynternship

I spent this last summer at Zynga as a UX design intern on Words with Friends 2 (WWF2), where I set brand guidelines, designed a new icon, and led an internal Hackathon design team. I also re-worked a complex flow to make starting new games more intuitive 🙂

Skills

  • UI UX Design
  • Game Prototyping
  • Iconography

Summer 2019

  • Project 1 — 10 weeks
  • Hackathon — 3 days
  • Project 2 — 5 weeks

Tools

  • Sketch
  • Illustrator + Photoshop
  • Flinto
  • Zeplin.io

 

PROJECT 1 – Daily Word Play

Designing a New Icon
With a recent name change from Daily Challenge to “Daily Word Play,” WWF2 needed a new icon. My team decided where and when this Daily Word Play icon would surface within the app, and indicated this with a puzzle placeholder.
 

Daily Word Play

The ultimate goal in Daily Word Play is to accumulate a certain amount of points. You earn these points by playing a single word on the provided game boards. You can only play one word per board, and you keep moving through game boards until you’ve collected all the points you need. Swapping tiles is not allowed, which increases the difficulty of finding high-scoring words.
 

Daily Word Play


To help decide the best representation for Daily Word Play, I talked with the product managers and designers on the team. My top considerations were:

  • Brand: making sure this icon fits in the set
  • Meaning: How does this icon support the gameplay?
  • Mood: Active/passive, exciting/relaxing
  • Context: How will this look on separate pages?
  • Scalability: As WWF2 evolves its style, is this icon still usable?

I eventually chose the apple icon with a word tile inside. The apple helps reinforce the “daily” idea because of the phrase “an apple a day keeps the doctor away.”
 

Daily Word Play

After deciding on the idea, I developed the form and color choice. I narrowed it down to 2 gradients, either green or red, and went with the green to match the actual game board.
 

Daily Word Play

The Daily Word Play icon is now viewable in-game. By completing this project, I learned how helpful silhouettes are during the ideation/exploration phase. If an icon is difficult to recognize in silhouette form, it may indicate weak form/meaning.
 

 

PROJECT 2 – Create Game Flow

During ramp-up, new designers critique WWF2 and provide suggestions on how to make it better. For my game report, I looked for times when the user flow is frustrating and time-consuming. When creating a new game, I was confused by the lack of logic in-between steps.

 

Current Create Game Flow
Current Flow Problems
  • Why does the Create Game button from the Friends page lead me to select from friends again from the list of game options?
  • Why do I need to select Create Game on the Start New Game page?
  • What is the definition of a Friend on the Friends page? Facebook friends or people I’ve played before?

 

Original Information Architecture
Solution
In the case of first-time user experience, the learning curve is steeper than expected. I found that even after going through the flow once, it was difficult to remember due to the multiple entry paths and unnecessarily lengthy flow. This friction could cause new users to leave the Game. Create Game is the most important flow in WWF2 to gaining new users. My main goal in re-working the information architecture was to improve conversion.

 

Modified Information Architecture

Solution


KPI Metrics that rely on Create Game include Retention, New Users, and K-Factor. Consolidating the game modes into one section reduces ambiguity and streamlines the task flow.

 

Proposed User Flow

 

PROJECT 3 – News System

Problem Statement
For my capstone project, I was given the opportunity to find a problem within the app and propose a solution. After thoroughly familiarizing myself with the game as a reactivated user, I discovered inconsistencies. I identified that various patterns and layouts exist for the same or similar purpose.
 

PROJECT 1 – Announcement System
For example, pop-ups that present the same type of information are often styled differently. They differ in font, pattern, title bar, etc. Inconsistent tooltips are another example. These differ by shading, color and alignment.
 

 

Project Proposal
My mentor suggested that I create documentation based on the knowledge that the game would continue to scale up. Due to my 12-week time constraint, I decided to focus on dialogue boxes and prestitials for this project. WWF2 needed a new announcement system. My goals:

  1. Have clear definition and standard for each
    component. Provide examples and scenarios.
  2. Get rid of unnecessary components. Merge
    similar components.
  3. Avoid creating too many new components
    when designing new systems.

Merging Similar Components
My next step was to study an audit of all the different types of dialogue boxes that appeared in the app. From there, I would decide which ones served the same purpose and should therefore be consolidated. I conducted comparative analysis and referred to WWF2’s brand documentation to help choose which layouts should stay and be included in the style guide.
 

 

Audit Findings
To better define these pop-ups, I graphed them on a two-by-two. The y-axis, level of explanation, ranks pop-ups by the amount of information needed to explain an announcement. For example, I placed the prestitial-like pop-up lower on this axis because it requires a low level of explanation. The x-axis ranks pop-ups from a low level of interruption to a high level.

Audit Findings

I sat in on focus groups and usability testing. In both settings, users have been trained to dismiss/graze over overlays. Their immediate response is to find the exit, treating important news announcements as advertisements. The problem stems from having so many different pop-up moments that it feels convoluted and more interrupting than celebratory.

Solution Recommendation
In moments when pop-ups are the most appropriate, have the proper feature FTUEs appear when more relevant & contextual to the user. We can accomplish this by

  • Feature Gating
  • Trigger when user interacts with it
  • Consider moving some pop-ups to news section
  • Updated Style Guide

Below is a page of the style guide I created.

prototypes


As part of the News System, I prototyped high-fidelity interactions with Flinto. Both explorations allow players to flip through news headlines and tap on the news that interests them. To help players distinguish game news from ads, I changed the exit from an X in the upper right-hand corner to a “Got it, thanks!” button.

 

 

PROJECT 4 – Light Tunnel

Zynga’s San Francisco headquarters features a light tunnel, a tube of 20,000 programmable LED lights. The interns competed in programming a new LED lighting design. For my team’s submission, game assets explode from the bottom of the screen and bounce around the edges of the tunnel. Because each light corresponded to a pixel in the program, it was easy to have collision detection.
 

TrackMe: Food Intolerance Discovery App
Alloy Automation