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
Arriving at the right UI for the most important feature.
Definition Hint
Designing the best customized learning experience.
Avatars
Personalizing each user without sacrificing privacy.

Overview

Words With Friends EDU is an adapted version of the commercially successful Words With Friends game, made for fourth- to eighth-grade students. I oversaw the design process from the beginning and collaborated in a small team to produce UX work. The game launched successfully with proven improvement in students’ vocabulary.

													 	

Background & Challenge

With the goal to expand its brand into the educational games market, the Words With Friends team’s challenge was to design for a younger audience and to balance between fun and learning, all while staying on brand.

Team & Role

Small Team, Lead Designer
  • 1 Product Manager
  • 5–6 Engineers
  • 1 Producer
  • 1 QA
  • 1 Designer (me) with 3 supporting designers
  • Third-party team to develop teacher dashboard
My Role
  • IA, Flows, Wireframes
  • UI, Specs, Delivery
  • Admin (Planning, scheduling, delegating)

Sub-Case Studies

Jump to a sub-case study about these selected features, or just keep scrolling.

Power Words
Arriving at the right UI for the most important feature.
Definition Hint
Designing the best customized learning experience.
Avatars
Personalizing each user without sacrificing privacy.

Sub-Case Study

Power Words

Empower the students.

To help teachers satisfy the Common Core standards with this game, we worked with experts to create a set of more than 800 academically essential words that we wanted students to use. My challenge was to fit and display these Power Words, as we named them, in the existing three-panel UI structure so they were easily accessible and worked with the rest of the UI.

What’s the best location for the user?

Considerations

Center Drawer: A pain to use.

The center drawer covered the game board and was hard to access.

Right Panel: Easier to find, but not to use.

The right panel was less crowded than the left, but it became annoying to switch it back and forth with the Dictionary panel.

It’s less crowded to put Power Words on the right panel.
Left Panel: Best option

The left panel worked best for both location and interaction.

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

Solution & Results

Placing Power Words on the left panel proved to be the right call as a later feature (Definition Hint) also needed uninterrupted interaction with the Dictionary Panel.

Final design, with Power Words as the second left panel.

Return to start


Sub-Case Study

Definition Hint

Encourage the students.
Background & Challenge

The Definition Hint feature was designed to give students a customized experience to tackle and learn the 800 Power Words, and my challenge was to ensure students don’t get stuck by catching and resolving all the edge cases.

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

Process

As I fleshed out the flow, I came up with a key-and-lock system where students would unlock the hint as well as the answer when they get stuck, including a limit on how many they could do it per game.

Fleshed-out 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

For when there were no actions available, I designed a versatile and subtle 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

When students can interact with the feature, the UI scaled accordingly. I worked with a fellow designer to complete the visual design.

Results and Lessons

I was too strict.

After launch, the usage data made me realize that locking the hint wasn’t needed and we could improve student learning if we removed that first obstacle.

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

Return to start


Sub-Case Study

Avatars

Engage the students.

Background & Challenge

To comply with child privacy laws, I had to quickly replace profile photos with a solution that would not personally identify students and that would cost little to execute. To our delight, the result ended up helping students’ learning, too.

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

Process

My first suggestion to generate a diverse set of 50-100 generic, static images (e.g. soccer ball, flowers, etc.) was deemed too costly.

Avatar editors from PetVille (first) and Zynga.com (second).
Use what you got.

Drawing inspiration from my past Zynga projects (“PetVille” and Zynga.com social gaming platform), I designed a much simpler three-layer avatar building system where a handful of assets would yield more than 100 combination of profile images.

Three-layer avatar system.
Getting team buy-in.

My worry on the engineering cost was eased when I found out the lead engineer had worked on the Zynga.com avatar system and was totally on board with the idea.

Avatar assets are interchangeable.
Do what we do best.

I worked with fellow designers to turn my wireframes into high-fidelity UI and to produce the avatar assets.

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

During the production, the product manager suggested integrating the feature with an achievements/badges feature. Despite initial concerns with scope creep, I realized how this would motivate students to learn more in the game, so I supported the move.

Students earned new avatar items with each achievement.

Takeaways

Collaborating across disciplines to innovate on a solution that was fun, impactful to students’ academic progress, and compliant to legal requirements made this feature one of my favorite challenges.

Return to start


Overall Results & Lessons

A promising start.

Words With Friends EDU launched successfully with a field-study report showing measurable learning gains in Language Arts.

6000 Classroom users in the first month of launch.

40% of Students showed improvement in academic word use.

Promotional video for Words With Friends EDU

Lessons

  • Every user group mattered, especially teachers for offering invaluable insight to our development.
  • It’s not about doing everything yourself, as I learned to lead and manage my resources and delegate when appropriate.

The Reason I Love What I Do

My mission to lead an impactful career solidified when I saw a student’s face glow in joyous wonder when he was playtesting a feature and successfully answered a “Power Word Bonus” question. This motivation to empower people will stay with me forever.

Return to start

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

When Words With Friends was undergoing a major redesign, the responsive layout inadvertently cut off the game board, affecting at least 8% of users. After investigating the root causes and relying on expertise from other disciplines, I arrived at a systematized and future-proof solution that saved the game from user drop-off.

Background and Challenge

Players Not Gonna Play

During the Words With Friends redesign, the team began receiving reports that players with small desktop screens could not see or play on the game board. I needed to quickly deliver a low-cost solution that wouldn’t break or drastically change the existing UI so we don’t permanently lose our players.

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

The Team and My Role

  • 1 Product Manager
  • 3–4 Engineers
  • 2–3 QA
  • 1 Designer (me)
    • Analyzed screen resolution data with the PM
    • Tested UI options with engineers
    • Presented recommendations to the team
    • Delivered spec of changes to the engineers

Process

Focus on the fans.

As I pored over the screen resolution data with the product manager and discovered that 8% of users were affected, I realized how important it was to stay true to the spirit of backward compatibility and continue to support screen sizes that worked with the original version.

Question everything.

Tackling the problem, I asked, “Why is this a problem now? How is the new version different from the original?” After a thorough audit, I uncovered many issues:

  • Persistent Facebook header
  • Wider left panel
  • Extra footer row
  • Misguided responsive UI logic
  • Creative-director-mandated minimum game board size

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, drafted solution ideas for the rest, verified them with the engineers and product managers individually, and presented a few proposals with mock-ups to the stakeholders to examine and choose from.

One mockup in detail (20 total). The yellow circle means the design is functional, but the visual design is not optimal.

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:

  • Enable non-persistent Facebook header
  • Keep left panel width to minimize changes
  • Merge footer to one row when in limited space
  • Prioritize game board in responsive UI logic
  • Settle on middle ground with minimum game board size
A summary of the UI changes we made.

What about ads?

The solution proved to be future-proof when the product manager brought up the need to make an ad visible below the game. Using a responsive HTML prototype I built, I showed her how my solution can accommodate the ad at any screen size without having to start the design process over.

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

Results

We kept our player base.

With the UI changes implemented, the Words With Friends redesign launched successfully, remaining backward compatible and keeping the 8% of users with small screens from quitting.

Lessons

  • Listen to the users. User reports offer invaluable insight into not just how the audience uses the product, but how it’s very different from the team in the office.
  • Together is better. I could not have come up with as effective of a design solution without the expertise from other disciplines on my team.

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

Return to start


Additional Highlights

3 mockups of mobile devices, cropped to show UI screens of 'Suggest Words' feature on the game Words With Friends.

WWF: Suggest Words

Role
Research, User flows, Wireframes, Visual/UI.
Team
Small pod of engineers, product manager, QA, and designer (me) within the larger Words With Friends team.
Platform
Mobile

Overview

I helped streamlined the process for users to make suggestions to the “valid word” list on Words With Friends by designing a concise and intuitive flow within the app, using past data to optimize for common cases. Users would no longer have to go through the frustrating and confusing experience of finding the right section in the forums to make a suggestion and hoping it was received by the team.

I fleshed out all the UI states and interactions in one UI flow to make sure I covered everything. Scroll to the right to see the rest.

To further help my team, I added a verification step in the flow to prevent too many false suggestions. After many iterations, my design evolved into an alternative solution that led to the addition of 50,000 new words to the valid word list from user suggestions, accomplishing the original goal.

Web site with a row of games in the middle, and a right sidebar with a thick red border and a grid of profile photos.

Zynga.com

Role
User flows, Wireframes, Interaction Design, Prototyping, Visual/UI.
Team
Design team of 10. Full team of ~50, including engineers, product managers, QA, and customer support.
Platform
Web

Overview

Zynga.com brought the world’s most popular social games under one platform, creating a more diverse and engaging community of players. I helped design the most immersive game board experience for users, which was one of the platform’s core value propositions.

I owned the design of the Right Rail, which helped users progress in their game faster.

Working with product managers and engineers, I designed the interaction for the social Right Rail to deliver community help features that’s not seen anywhere else. The platform launched successfully with 8 million daily users after the first three months.


Let’s chat.

Schedule a call to see how we fit. Email works best:


Return to top