Ivan W. Lam

UX & UI Designer

ivan@ivanwlam.com

LinkedIn


Case Studies

Words With Friends EDU

Making Learning Fun

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

Overview

Words With Friends EDU adapted the commercial hit Words With Friends to improve 4th- to 8th-grade students’ vocabulary.

I helped design the product to be fun, educational, and on brand, working in a core team of only 7 people (mostly borrowed resources, including me).

															 	

Role and Responsibilities

  • Lead UX Designer
  • Full: IA, Flows, Wireframes
  • Partial: Research, UI, Production

Results

The product 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.


Select Features

Power Words

One of the first challenges of the project involved fitting the UI for the key feature of WWF EDU, called Power Words, into the existing three-panel UI structure.

Not only did I consider the visual layout of the three possible options (left, center, right), I examined their interactions with other features in the UI to ensure the flows were smooth.

The ultimate decision to place the feature on the left panel proved correct as a feature developed later (Definition Hint) avoided similar UX problems.

The left panel works best for the Power Words feature.

Definition Hint

To help students figure out and learn the Power Words they could play, I designed a flow that guided them to the answer without giving it to them outright.

Scroll to the right for the rest of the flow.

It involved asking “What if…” questions at each step of the flow, fleshing out the edge cases for when students get stuck, and directing the user’s paths toward learning the Power Words.

These cases became different UI states that I wireframed before delegating to a fellow designer to complete the visual design.

Example states of Definition Hint feature.

Avatars

To comply with child privacy laws, I needed a low-cost solution to replace profile photos with something that would not personally identify students.

Combined with our engineer’s expertise building avatar systems, our fellow designers’ illustration talents, and our product manager’s idea to integrate an educational component, this feature exceeded our expectations and became popular among our users.


Lessons

  • Teachers are heroes. On top of their stressful job, they patiently provided valuable insight on the best ways to engage with student and encourage learning.
  • Delegation is vital in managing a project. As much I felt the need to hold my own, leveraging other teammates’ talents and including different perspectives led to a much better outcome.
Tiled words spelling “What’s the thought process”

Redesign Complication

Preventing Attrition

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

Overview

During a major redesign of Words With Friends, something caused the core UI to become too large to fit the screens of at least 8% of users, making it unusable.

I audited the entire UI to uncover the causes, consulted other disciplines for possible fixes, presented design options to the team outlining the costs and benefits, and produced the approved solution.

Role and Responsibilities
  • UX Designer
  • UI, Prototype, Production
Result

With this fix, we successfully launched the redesign, prevented the 8% of our users from leaving, and future-proofed the problem from happening again.

8% UsersDrop-off Prevented

Process

Discovery
A complete audit and dissection of every piece of UI revealed a history of decisions across disciplines that culminated to an unusable UI.
Mock-Ups
With possible solutions for each design flaw, I mocked up four options that uses different combinations of the mini-solutions, optimizing for different goals (ex. business, user, cost, visual).
Collaboration
Using the expertise of everyone on the team, not only did we fix original problem, we created a responsive design layout logic that worked better than before.
Prototypes
The new layout logic was put to the test soon after implementation, as shown in this responsive HTML prototype I built to show my product manager how the UI adapts to a banner ad at different screen sizes.

Lessons

  • Empathy for the users. CS reports offer invaluable insight into how users experience the product, and it’s most likely different than everyone on the team.
  • The best solution requires all disciplines. Even though it was UI problem, I relied on the expertise of my product manager, engineers and everyone else on the team to find the optimal solution.

Let’s chat.

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


Return to top