Animatic

Project Context

Animatic is a puzzle game in which players organize the frames in the correct sequence to reveal an animation! This was my NY Times summer internship project done with five other interns: a game design intern, two iOS engineering interns, a web engineering intern, and a data analyst. Although this game was not launched, it was a memorable experience to learn how game is developed at New York Times and collaborate cross-functionally at this unprecented time.

*This game is not launched, but we had an opportunity to present it to the NYT Games team.

Timeline ⌛

8 weeks – Summer 2020

Design Tools ✏️

Illustrator
Figma

Role ✨

Game Design
UI/UX



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. 

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




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! 🐝