Spelling Bee iOS Widgets

Project Context

Apple recently updated its iOS 14 with a whole new homescreen widget experience. Advanced from tiny, square widgets, iOS 14 widgets lets users customize their homescreen in unique ways. For NYT Maker Week, an annual event where employees from different disciplines are given an opportunity to collaborate on self directed projects, I had an opportunity to experiment with iOS 14 widgets for Spelling Bee. I worked with three other engineers.

*This project is not launched. It’s a self directed project with engineers.

Timeline ⌛

1 week – Maker Week

Design Tools ✏️

Illustrator
Photoshop
Figma

Role ✨

Research
UI Design




Through Spelling Bee iOS 14 Widgets, users can have more personalized experience with Spelling Bee. They give users access to meaningful content like number of words found or even encourage them to come back to the game to reach the next level.

Users can also interact with the widgets uniquely by displaying them in three different sizes: small, medium, and large. As the size gets bigger, the information that they have access to becomes different.


Small Widget

The small widget consists of player’s level, score, number of words found, and number of points needed to read the next level. Before the player starts today’s Spelling Bee game, homescreen displays a yellow widget with instant access link to answers to yesterday’s pangram.

Medium Widget

The medium widget has an additional information of today’s letters. Users can keep finding words without being on The Crossword app. This reminder of letters motivates users to go back to the app when they think of words.

Large Widget

The large widget has a direct link to the word list where they can see what words they discovered so far. For users who haven’t started today’s Spelling Bee, they can instantly access “Yesterday’s Answer”.

Genius and Queen Bee

Once users reach the highest rank in Spelling Bee, the widgets will display the “Genius” Bee with a scholar hat. Spelling Bee does not reveal total number of words possible. However, users who find every single word will get the secret “Queen Bee” with a crown on a yellow widget.



00. INTRODUCTION

“Will I become an iOS 14 widget expert?” –me (hopeful)

At the start of Maker Week, I was looking for a project that I can collaborate with people I never worked together before. My manager suggested that the iOS engineers, Danny and Izza, are looking for some design support and asked if their iOS 14 widget project is something that interestes me. At first, I had no clue what iOS 14 widgets were, but I was up for the challenge.

Coming together with engineers, they told me that they planned on creating Spelling Bee widgets. 
01. RESEARCH

I first researched on Apple Human Interface Guidelines for designing iOS 14 widgets.

In order to find out the purpose of iOS 14 widgets and how to design meaningful widget experience for Spelling Bee players, I researched through WWDC and Apple Interface Guidelines.

There were three key insights I gained: 
(1) There are three sizes for iOS 14 Widgets: small, medium, and large.
(2) Make sure offering your widget in different sizes adds value. Don’t just fill up space.
(3) Avoid creating a widget that does nothing but launch your app. People appreciate widgets because they provide instant access to meaningful content, not because they provide another way to open your app. – Apple


How can I create Spelling Bee widgets that are personal, delightful, motivational, and informational?

Thinking about what widget experience I was grant to users, I wanted to create Spelling Bee widgets that accomplishes two goals:

(1) Widgets that feel personal and give a moment of delight
(2) Widgets that encourages users to go back to play the game throughout the day (which can lead to higher traffic in Spelling Bee and higher conversion rate)

02. UNDERSTANDING SPELLING BEE

I analyzed the Spelling Bee game to see which features/information exist on the game.

Looking at the Spelling Bee game, I listed down the features/information in order to see what content I can possibly add to the widgets. Spelling Bee users can find out user’s score, user’s ranking & points, current level, next levels, words found, yesterday’s answers. 


03. EXPLORATIONS

Thinking of the two goals, I started to explore possible directions for a small widget.

Although I did multiple explorations with various groups of information and hierarchy, I came down to widgets with user’s current rank & score, next rank, number of words found, and a cute beatrice. I assumed the widget will motivate and remind users to go back to the game when the widget shows “next rank”. The beatrice was added to give a moment of joy and delight.


04. USER RESEARCH

Talking Spelling Bee users gave me insights on what users think about when playing and what motivates users to go back to the game.

Intended to design widgets that users will actually use, I wanted to understand users’ behaviors and thoughts during their game play moment, and what triggers users to go back to the game throughout the day. Showing my small widget explorations, I casually asked few questions to Spelling Bee users around the company: 

(1) How do you think of progress when playing Spelling Bee?
(2) In terms of hierarchy, what information is important to you when playing?
(3) What motivates you to go back the game?
04a. INSIGHTS

Not all Spelling Bee users have the same behaviors and thoughts, but there were still interesting patterns.

︎ Most Spelling Bee users think about x points to [your next rank]. This also acts as a source of motivation for those users.
︎ In some cases, current rank isn’t too important for users who reach GENIUS (highest rank) everyday.
︎ They often look at Yesterday’s Answers when they didn’t get pangram (using every letter).
︎ Having a beetrice icon on a widget does act as a moment of delight.

In terms of hierarchy and layout, this Spelling Bee widget was the one that was favored the most because of its clarity.

Based on the feedback from designers, I decided to further iterate on the widget below. Other two widgets have 79 (current score) separate from current rank in the layout, which raises questions on what the number means. However, this widget below makes it clear that 79 indicates user’s current score by having these two information grouped together. Also, having the current score as the largest type size displays more clarity to users.




05. SMALL WIDGET

Based on the insights and feedback from designers, I came down to final small widgets.

Thinking about the use case for people who didn’t start today’s Spelling Bee, I decided to create a widget for before starting the game. The background is yellow to give a strong indication that it’s different from a regular widget (after starting the game). “Help Beatrice uncover today’s pangram!” again encourages users to start today’s Spelling Bee. Instant access to Yesterday’s Answers fufills the need for users who check answers from yesterday. 
Instead of keeping Next: [rank], x points to [next rank] was added because this is how most users think about while playing. To give more encouragement for those who got less than 5 words, the total number of words is indicated as <5 instead of “3 words found”.



06. DIFFERENT STATES

Don’t forget Genius and Queen Bee!

I wanted to provide an extra layer of value to users who get Genius and Queen Bee, which are special ranks. At this point, users don’t need to know how many points needed to reach the next rank. Phrases like “You reached the highest rank” are included to celebrate users’s accomplishment. Users who get genius get a beetrice with a scholar’s hat. Queen Bee, highest of all ranks/secret rank, gets a special yellow background and a beetrice with a crown.

Each size provides unique layout and additional useful information.

For a medium size widget, I wanted to offer an experience where users can think of words without physically being on the app. The medium widget has a tiny version of the beehive with today’s letters, which acts as a reminder of letters.


For a large size widget, I wanted to provide an experience where users can check the words they found so far so the words they think of outside of the app don’t overlap with the ones already discovered. There is also a deep link to the full list of the words within the app.

07. TECHNICAL CONSTRAINT

Based on the conversation with engineers, there were technical constraints to the large widgets. 

Through close collaboration with engineers, I communicated with engineers to make sure there are no technical constraints. According to engineers, Apple widgets unfortunately don’t provide scroll-like behaviors. Instead, I figured out a solution where users can just directly tap to see the word list.

08. VALIDATION

How can we measure the success of these widgets?

We had an opportunity to share our widgets to NYT Games Team. We’re not sure if we can get this on the roadmap right now, but these designs could possibly be validated through AB testings or more in-depth interviews with Spelling Bee users. The only way to measure its success is to launch these widgets in real life and measure traffic to Spelling Bee from clicking on the widgets or the deep links within the widgets.
09. REFLECTION/NEXT STEPS

Thank you Beetrice!

Although there was only a week to complete, this maker week project was a valuable experience because I learned how to create a meaningful user interface by asking myself “How do I want users to interact with the product?” and “What kind of behaviors and emotions do I want to elicit through their interaction?”. In this case, I wanted to the widget that motivates users to go back to the Crossword app to play Spelling Bee. I believe the most challenging part was to think of an widget experience for multiples types of users. There are Spelling Bee users out there who can complete the game in few hours, while there are users who take longer time to complete. Researching on what users have in mind while playing, keeping x points to [next rank], was helpful to this challenge.

So, what are the next steps?: 

• According to Apple, it recommends that widgets provides “dynamic information that changes throughout the day.” How will widgets change depending on the day? (i.e. Lunch time: “Beetrice is hungry for words!” / Night time: “You have last chance to find the words!”)
• How will the Crossword widgets look like if I take this project further?
• Apple supports both light and dark modes for iOS 14 widgets. Dark Modes could be fun!


Special Thanks to:

Designers: Caroline Oh (My manager), Deanna Destefano, Andrew Dore, Robert Vinluan for guidance, support, and awesome feedback! 🐝
Software Engineers: Danny Wu, Izza Nadeem, and Shandler Mason (intern) for giving me confidence and collaborating with me! 🐝