Skip to a Sub-Case Study
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.
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.
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
- IA, Flows, Wireframes
- UI, Specs, Delivery
- Admin (Planning, scheduling, delegating)
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.
- Personalizing each user without sacrificing privacy.
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.
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.
Left Panel: Best option
The left panel worked best for both location and interaction.
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.
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.
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.
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.
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.
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.
My first suggestion to generate a diverse set of 50-100 generic, static images (e.g. soccer ball, flowers, etc.) was deemed too costly.
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.
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.
Do what we do best.
I worked with fellow designers to turn my wireframes into high-fidelity UI and to produce the avatar assets.
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.
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.
Words With Friends EDU launched successfully with a field-study report showing measurable learning gains in Language Arts.
- 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.
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.
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
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.
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
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.
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
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.
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.
- 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 email@example.com.