Project Overview

Words with Friends is a multi-player word game developed by Zynga. Words With Friends EDU is the educational version of the original game that brings the fun of Words With Friends into a classroom setting. Students learn new words as they play in a safe environment with their classmates, and teachers and parents can track students’ progress using custom teacher dashboards. 

My Role

For this educational version of WWF, we redesigned some part of the game experience for the younger audience. Not only we adjust UI scheme, we also introduce a new system of avatar builder and badge collector to encourage the student in participating the game. As the UI motion designer, I was in charge of creating illustrations that include the avatars, accessories, wallpapers and badges. I also created a motion library that go along with the new UI system.

 

 
Words-With-Friends-EDU.jpg
 

Avatars

Before we jumped on making these fun avatars, we had a number of meetings on the style, color, and theme. Once all the team members agreed on the direction, the fun part started. Here is a peak of what had been created for Words with Friends EDU. All the items are only partially free to the players, some of them need to be earned by playing hard.

 
nwwfedu_avatars_KL4-2.png

Accessory Design

nwwfedu_avatars_KL4_fix.png

Background Design

nwwfedu_avatars_KL4_fix_bk.png
 

UI Elements

Apart from the illustration, I also worked on the UI that includes the badge collector, the avatar builder and the relating dialogs and toasters.

 
 
edu_badge_container.png
Untitled-1.png
storyboard-01.png
 
 

Motion Design

After we finalized the UI, I worked on creating the motions. One is showcasing the moment when the players get their rewards. The other is the interactive toaster only shows up when the player’s cursor hovers over the badges.