Ivan W. Lam

UX & UI Designer

ivan@ivanwlam.com

LinkedIn


Case Studies

Words With Friends EDU

Make Education Fun

I led the design of a new product that changed how kids develop their vocabulary. It’s my proudest work yet.

Skip to a Sub-Case Study

Power Words
How I fit the most important feature into an established UI.
Definition Hint
How we designed an effective learning experience.
Avatars
How we turned law compliance into a learning motivation tool.

Overview

Looking for ways to expand the brand, the Words With Friends team decided to explore the educational games market. A small part-time team was assembled to create a modified version of Words With Friends made for schoolchildren.

I joined the team from the start and worked as the primary designer for more than a year, overseeing the design process and producing UX and UI work. After 1.5 years of active development and beta testing, Words With Friends EDU launched on the web and on tablet, with 6,000 classroom users in the first month.

													 	

Background & Challenge

Grow the Brand

The Words With Friends team, having achieved evergreen success in the social gaming market, wanted to grow its brand and audience. Players often remarked how the game helped build their vocabulary, so the idea of creating an educational version for students was worth exploring. Seeing the potential impact, I jumped on board.

Educational. Young. On brand.

Compared to the existing Words with Friends, which was competitive, social, and for the general public, our challenge was to create a product that was educational yet still fun, for a young audience in a classroom setting, and also aligned with the Words With Friends brand.

Team & Role

A small team was formed with a few Words With Friends team members working part-time, since officially this was our nonprofit partner Zynga.org’s project. The core team consisted of:

  • 1 product manager
  • 1 in-house engineer
  • 4–5 contract engineers
  • 1 producer
  • 1 QA
  • 1 designer (me)

We also worked with an external organization to handle the teacher dashboard that evaluated student progress.

My Role

As the primary designer, I managed the overall design process, which included:

  • Planning—scheduling and costing design tasks of 8–10 features and assignments
  • Information Architecture—sitemap, user flows, wireframes
  • UI & Delivery—mockups, assets and design specs for developers
  • Feedback—ensuring quality on builds

I also asked my WWF design teammates for additional UI support as the project got closer to launch.


Sub-Case Studies

Jump to one of the 3 sub-case studies of my process designing different features on Words With Friends EDU (WWF EDU), or just keep scrolling.

Power Words
How I fit the most important feature into an established UI.
Definition Hint
How we designed an effective learning experience.
Avatars
How we turned law compliance into a learning motivation tool.

Sub-Case Study

Power Words

Empower the students.

From our research, teachers told us that it’s easier to include something in their already-packed curriculum if it satisfied the Common Core standards. So we worked with academic experts to create a set of more than 800 words that were crucial to students’ academic success and should be interacted with in the game. We called them “Power Words”.

Challenge

As this was the most important feature of WWF EDU, and that other features in the game would build upon it, its placement would cascade onto future design decisions. My challenge was to insert Power Words into the existing UI structure, to have it be easily accessible, and to have it interact smoothly with the rest of the UI.

What’s the best location for the user?

Considerations

Center drawer: a pain to use.

In the existing UI structure, there were three basic areas: left panel, center drawer, and right panel. The center drawer was literally front and center, but it covered the game board, and students would have to constantly toggle between the game board and the list that covered it to check which words they could play. This was simply unacceptable.

Right panel: easier to find, but not to use.

One pro to placing Power Words on a right panel was that the students could find it easier from the three right panels compared to the five on the left.

It’s less crowded to put Power Words on the right panel.

However, I ran through the user flow for getting the definitions of Power Words using the Dictionary panel (also on the right), and I realized that the right panels would swap every time, making students lose their place easily and their overall experience less smooth.

Using the right-panel Dictionary with a left-panel Power Words didn’t require swapping panels.

Solution

Left panel: most usable, despite a slight inconvenience.
Final design, with Power Words as the second left panel.

Therefore, I decided to set the Power Words feature on the left side. (I also merged two left panels—profile and badges—into one, reducing the total to a more manageable four.)

The one inconvenience was that the students would have to look back and forth across the game board when looking up definitions, but that was much less disruptive than the swapping panels. It may not be the perfect experience, but it was the best within the constraints.

The users’ eyes had to move across the game board with every Power Word look-up.

The decision to place the Power Words on the left was validated in the Definition Hint feature (see next sub-case study), where students could also use the Dictionary on the right to match the definition.

Return to top


Sub-Case Study

Definition Hint

Encourage the students.

Giving students more than 600 academically essential Power Words was a great first step, but they still needed help figuring out which one they should learn. That’s the basic idea of “Definition Hint”:

Basic flow
  1. Student receives definition of a Power Word.
  2. Student figures out Power Word.
  3. Student plays Power Word.

Challenge

However, from this basic flow, my mind naturally started asking “What if” questions and seeing possible states and cases that could break the intended goal of learning and playing the Power Word. My challenge was to steer students, as much as possible, toward learning the Power Words.

Process

Starting with the basic flow above, I asked “What if” questions that could prevent the student from figuring out the Power Word. I would come up with a workable answer, integrate it into the flow, and repeat the process with more “What if” questions.

For example, on the question, “What if the student cannot figure out the Power Word?”, I imagined the student struggling like someone stumped on a riddle, so I proposed to reveal the answer with the click of a button, and that would trigger a learning moment as they mentally connect the definition to the word.

“But what if students misused this function and just clicked for the answer right away?” Then we should limit how many times they could do this so they’re more selective. From there, I continued fleshing out the idea with my teammates through more “What if” questions to figure out other details like the number of reveals students get, whether that number was per game or for all the games, etc.

Fleshed-out states of the flow
  • Waiting for turn.
  • Student’s turn.
  • No playable Power Word = No Definition Hint
  • Defintion Hint available
  • No keys to unlock hint
  • Hint unlocked
  • Student figures out Power Word
  • Stuck!
  • No keys to reveal Power Word
  • Power word unlocked.
  • Power Word played.
Actual user flow I delivered for the team. Scroll to the right to see the rest of the flow.

Wireframes

Inactive states

I uncovered a few steps in the flow where no actions could be done for the feature. In these inactive states, which shouldn’t draw the students’ attention, I designed a versatile catch-all area that displayed a simple line of text explaining the inactive state.

I kept the UI minimal for inactive states to avoid attention.
Active states

Of course, I designed the active-state wireframes as well. I collaborated with a fellow designer during this step before she turned the wireframes into full UI.

Results and Lessons

I was too strict.

While the final version functionally worked, the data revealed that even when students unlocked the definition, they still had difficulty figuring out the Power Word. The first lock was an unnecessary barrier to learning, and removing it would have improved the students’ learning experience.

An inactive state, final UI
An active state, final UI

Return to top


Sub-Case Study

Avatars

Engage the students.

Background & Challenge

Bringing Words With Friends to the classroom required us to remove profile photos to comply with child privacy laws. Our job was to replace profile photos with something that was not personally identifiable and that costed little to produce. Even though this began as a legal exercise, our solution evolved into an engaging tool that motivated students to achieve more.

The commercial version of WWF had user-submitted images, which WWF EDU prohibited due to privacy laws.

Process

The first idea that came to mind was to generate a set of generic images for students to select (e.g. soccer ball, flowers, etc.). This was a relatively simple solution, but to have enough variety, I estimated that we would need 50-100 images, which was deemed costly to produce.

Use what you got.

I then recalled my experience on past Zynga projects (“PetVille” and the “Zynga.com” social gaming platform), where players customized their avatars with different facial features and clothing.

Avatar editors from PetVille (first) and Zynga.com (second).

I tested this idea by repurposing a few PetVille characters into static profile pictures for a classroom playtest. The students’ reactions were mixed, partly because they didn’t choose those avatars. But that proved that students were open to the idea of making their own avatars.

Let math work in our favor.

Our budget limited us from doing anything as elaborate as PetVille or Zynga.com, but I floated the idea of having a simpler system that stacked three layers of static, transparent 2D images: the head, accessories, and the background. Through only a handful of images for each category, we would create more than 100 combinations of avatars.

Three-layer avatar system.

While this would reduce the cost on the design and art side, I worried about the engineering cost. Fortunately, the lead engineer also worked on the Zynga.com avatar system, so he knew how to build it, and he was on board with the idea.

Avatar assets are interchangeable.
Do what we do best.

I delegated the avatar asset production to a fellow designer since she was very skilled in illustration. She also took my avatar builder wireframes and produced the UI.

Final design of the Avatar Builder UI (produced by colleague).
Give them a purpose.

During the production, the product manager suggested awarding the avatar items to students via an achievements/badges feature. I was initially hesitant about the idea because it felt like scope creep.

Ultimately she won me over because I realized this would actually increase both student engagement and learning: the more that the students achieved, the more they could customize their avatar. Conversely, a student seeing more rare items in a classmate’s avatar could motivate them to work harder to earn more achievements.

Students earned new avatar items with each achievement.

Takeaways

Our solution for this feature went beyond the legal and basic requirements, and the students benefited. Furthermore, building this feature was a highly collaborative effort, where we made the best use of everyone’s talents and resources, built upon one another’s ideas, and created something that’s both fun for the students and supportive of their academic progress.

Return to top


Results & Lessons from Words With Friends EDU

Off to a promising start.

Words With Friends EDU successfully launched to 6,000 classroom users in the first month. A field study reported that students showed measurable learning gains in Language Arts from gameplay. The study also highlighted that 40% of students showed improvement in Power Word use over time.

Promotional video for Words With Friends EDU

Lessons

Every user group mattered.

That was the most important lesson I learned working on this product. While the product centered around students, the teachers offered a trove of invaluable insight to our development and were key to bringing a worthwhile product to the students.

It’s not about doing everything.

I also learned to plan and manage the design production of a project. Having tried to do everything, I learned to be more aware of when I needed to ask for help and to delegate certain tasks to others who could do it better.

The Reason I Love What I Do

I will never forget the moment during a classroom playtest when I saw a student’s face light up when he correctly answered a “Power Word Bonus” question. His expression perfectly characterized surprise, delight, learning, confidence, and empowerment. My design affected someone’s future for the better, and that inspired me to devote my career to do more work like this.

Return to top

Tiled words spelling “What’s the thought process”

Redesign Complication

Make Players Stay

Angry fans couldn’t play in the Words With Friends redesign. To fix it, I had to ask a few questions.

Overview

In the first major redesign of the Words With Friends game, the public web beta used a responsive layout that inadvertently cut off the game board for users with small monitors. Risking permanent drop-off from at least 8% of users, I investigated and discovered a series of past decisions that caused this problem.

Using wireframes, prototypes, and a lot of math, I addressed each of these issues in several options I proposed to the team. We implemented a fix that’s a hybrid of the options and averted losing our valuable players when we officially launched the redesign.

Background and Problem

Players Not Gonna Play

The popular game Words With Friends (WWF) was undergoing its first major redesign, and I joined the team during the beta phase (five months before launch) to manage the design of the web version. We began receiving reports that players with small desktop screens could not see the entire game in the new design and threatened to stop playing.

Beta of redesign on Facebook at 1024x768. Players could not play with covered game board, tile rack, and action buttons.

Challenge

To prevent players from leaving the game, I needed to quickly deliver a solution that would make the redesign work for small-screen players without breaking the UI structure or adding more design and code changes than necessary.

The Team and My Role

The web division of the WWF team consisted of one product manager, 3-4 engineers, 2-3 QA, and me as the only dedicated designer. In handling this problem, I evaluated screen resolution data with the product manager, mocked up and tested out layout options with the engineers, and presented my recommendations to the team.

Process

At first, I was surprised this was an issue, since I assumed that the new responsively scaling UI would take care everyone, including small-screen players.

Work with the data.

Wondering how many players were having this problem, I pored over screen resolution data with the product manager to understand the distribution of our user base and to determine the smallest screen size we should support.

Support the fans.

Ultimately, because the WWF team promised to be backward compatible on the technical side, we needed to follow that spirit and support screen sizes that worked with the original version.

Question everything.

This brought us back to where we started. Taking a different approach, I wondered, “Why is this a problem now? What are all the ways that made this new version different from the original?" I audited every piece of UI on the screen for comparison. I uncovered many issues:

  • Facebook’s header was persistent (not the case with the original version).
  • The left panel was wider than the original.
  • The tile rack and action buttons were on two rows (one row in the original).
  • The responsive UI logic shrunk the game board before scaling down less important UI components (ex. right panel, borders, margins).
  • The minimum game board size was increased because the principal designer and creative director felt that a game board that went any smaller would’ve been too difficult to interact with.

The many ways that the redesign took up more space.
Lay it all out on the table.

I examined each issue, defined the quick wins and non-negotiables (ex. Facebook’s persistent header needed to go), and evaluated possible solutions with verifications from engineers and product managers. I then bundled these into four proposals and outlined the trade-offs (ex. lowering minimum game board size and having a consolidated header and/or footer). With each proposal, I produced mockups at different screen resolutions to illustrate its strengths and weaknesses.

Finally, I presented these proposals, along with my recommendation to all the stakeholders (not just my immediate web division team, but also the creative director and principal designer, who were opposed to reducing the minimum game board size).

I printed out each square for the presentation so the team could evaluate the trade-offs in detail before deciding.

Solution

My presentation opened my team’s eyes; they realized how complex the problem actually was. It also helped them decide on the solution that best balanced player needs, business needs, workload and turnaround time:

Easy wins/non-negotiables
  • Make Facebook’s header not persistent.
  • Re-prioritize the responsive UI logic in a way that optimized the gameplay experience (ex. Game board size first, tile rack and action buttons second, everything else third).
Complex decisions
  • Keep the left panel design since redesigning it would open new UI and interaction questions that were far beyond the scope and timeframe of this problem.
  • When space is limited, merge the tile rack and action buttons into one, like the tablet version.
  • Let the game board go below the size preferred by the principal designer and creative director, but only if nothing else can get smaller.
A summary of the UI changes we made.

Easy Ad(d)

As these changes were being made, our product manager brought up the need to make our banner ad visible below the game. Instead of redoing all the calculations and presenting a new set of mockups to the team, and because we had decided the priority of the the responsive UI (i.e. game board first), we just needed to decide the priority of the ad relative to the rest of the UI, and insert that into the responsive UI logic.

HTML Prototype

In lieu of new mockups, I created a responsive HTML prototype to show the product manager how the ad would behave at different screen sizes. At the smallest size, we agreed that the ad would not appear. But once there was vertical space, it would gradually peek out.

HTML prototype that included a banner ad in the responsive UI logic.

Result

After making these changes, the user reports stopped. We confirmed with players that they could play the game again. Effectively, we kept the (at least) 8% of our player base who used small screens from quitting.

And we stayed true to the spirit of backward compatibility by allowing players with small screens and those who played the original version to continue to play comfortably in the redesign. As a result, the redesign successfully launched and continued its evergreen success.

Lessons

Listen to the users.

I admit that when I first heard about these user reports, I did not take this problem seriously. I had since learned that user reports offered a great insight into what our audience was experiencing, and I needed to pay closer attention.

This experience also reminded me to regularly test our products from our users’ frames of reference, and not just from our large monitors and fast computers, for example.

Together is better.

Even though this problem was primarily about UI, I learned how important it was to rely on my teammates and their expertise in programming, stats analysis, and business strategies to uncover the underlying issues and generate the best solution for both the users and the team.

To learn more about my work on Words With Friends, schedule an interview at ivan@ivanwlam.com.

Return to top


I’d love to show you more.

Let’s schedule a call to see how we fit. Email works best:


Return to top