Thumbnail interactive puzzles (3).png

Interactive puzzles

Interactive puzzles

The Economist is sometimes seen as catering only to a specific intellectual group, and we want to change that perception. On top on including a wider range of subjects (e.g. culture, art, sports, and science), we plan to create a dedicated section in the Espresso app for puzzles and brain teasers. This space would house our already existing daily quiz, weekly crosswords, and any new puzzles that our Editorial team develops. The vision is to also introduce it on the other Economist platforms.

  • The project: UX/UI design, user flows, stakeholders engagement, research and usability testing

  • My role: I led the User Experience and User Interface of the Espresso app

  • Collaborators: Espresso app team, editorial, legal, senior leadership, user research, content design

  • The impact: Improve engagement with the app and driving user habits

 
 

Problem statements

  • Some users aren’t happy with the current state of the quiz and crosswords. In addition to the Editorial team's interest in trying out new puzzles, some users would like puzzles to be interactive, whilst others say the current placement on the Espresso app distracts them from reading other articles.

  • There's a strong desire to provide editors with an easier way to identify correct answers. Users currently send the answers to the puzzles via email, which means our editors have to manually review and select winners. This process becomes quite labor-intensive, as editors have to verify correct answers and randomly pick winners by continent.

 

Data, User feedback and main hypotheses

 

Current process for daily quiz and weekly crosswords

 

Where puzzles are across platforms

 

Plan of action

  • Make the existing puzzles interactive (Daily quiz first, then Weekly crosswords)

  • Conduct an A/B test to monitor success (daily engagement, number of responses, Editors’ process changes)

  • Find a new “home” for the puzzles on the Espresso app

  • Discovery on “How might we“ introduce interactive puzzles on The Economist app and on Web

 

Discovery for the “Daily quiz“

After carrying out the usual activities to find out what information we already know, I’ve identified some areas that needed more investigation:

  • We have no deeper knowledge of the experience of people playing the quiz

  • Fragmented knowledge of the Editors’ process of planning, publishing and reviewing the answers for the Daily quiz

 

Initial user flow to validate how people playing the quiz

 

In order to find out those information, I carried out a couple of discovery activities involving the key stakeholders:

  • Ran an “assumptions workshop”, which aimed to share an high level flow of what we believe the users process of playing the quiz is and gather our stakeholders thoughts on what could be the main assumptions to test. This also helped me identify some ideas to test too

  • Conducted some stakeholder interviews with the editors to better understand their process of planning, publishing and reviewing the answers for the Daily quiz and to find out if they have any other issues we can help them solve

 

These are the assumptions gathered during the workshop

 

Both activities were key to help me and the User Researcher (which I collaborated with during this phase) plan the next steps. We were able to:

  • Gather our stakeholders thoughts on the what should be the main assumptions to test. Based on those assumptions, we came up with a list of initial ideas to validate

  • Finalise the editor's daily quiz process, which involves planning, posting, and checking answers. The problem we've found is that editors have to open emails by hand to see if answers are right and to figure out who the potential winners are and where they're from. We need to find a simpler way to get this info quickly so that editors can easily identify the winners

 

Ideas that came out of the assumptions workshop

 

Finalised editors’ flow

 

Align on how to make the quiz interactive

Before planning the user research, I engaged in discussions with our engineering team to explore the best and quickest way to make the quiz interactive. We all agreed that adding text fields to the "Quiz page" is the optimal solution, aligning with industry standards. Following these discussions, I swiftly created wireframes to illustrate two versions of the same page:

  • The page layout from Monday to Thursday when questions are published without text fields

  • How it changes on Friday when text fields appear for submission.

 
 

Align on the research goals

We then had sufficient information to guide the user research. The researcher and I delved deeper into our research goals and how to test our identified ideas efficiently. We reached a consensus on the following:

  • We aim to gain insight into participants' experiences, behaviours, and expectations regarding daily quizzes and interactive games.

  • We want to understand how our subscribers currently access and use the daily quiz on the Espresso app and identify any missed opportunities.

  • We plan to present our identified ideas and wireframes to participants and collect their feedback

 

User research findings

After the researcher carried out 10 user interviews, we learnt that:

  • All respondent, to some degree, played interactive games for mental stimulation and challenge

  • All subscribers said the daily quiz was valuable to their Espresso app experience

  • Almost all participants felt submission by email was inefficient and requested a native alternative

  • A majority of participants reported playing games by themselves, and sometimes verbally asking for help

  • All participants found the current quiz instructions easy to understand and follow. They found repeatedly listing the questions throughout the week (like in the wireframes) distracting

  • Some felt city and country should be automatically filled in, to lower the amount of labour they have to do

  • Most of them expected some sort of recognition message once they submitted their answers

  • All of them liked the idea of having text fields on the page, with the only remark of having them directly below the related question

  • Quite a few said it would be great to have the possibility to fill in and save the answer every day as they get published

 

Some quotes from the participants

 

Defining and designing the MVP experience

After presenting the research findings to all our stakeholders, the next step was to engage with my engineering team in order to delineate the requirements for both the MVP and the post-MVP phase. The primary outcomes of these discussions were as follows:

  • MVP: Develop an experience that enables users to submit their answers using text fields every Friday

  • Post-MVP: Provide users with the option to input and save their responses on a daily basis, allowing them to store their answers within the application and have them readily available for submission on Fridays

With these requirements established, the focus then shifted to creating high-fidelity designs and soliciting feedback until they reached a state of perfection. Following reviews from our stakeholders, engineers, and the design team, I was able to finalise the entire MVP experience and propose designs for the post-MVP phase.

 

MVP experience - Friday submission

 
 
 

What about the editors’ process?

After discussing and agreeing the different phases of the quiz project with the Editorial team, it has been agreed that for MVP they’ll still receive emails. However, the ones coming from users submitting from the Espresso app:

  • Will be bookmarked as such to differentiate them from the ones coming from other platforms. This will give us an idea of how many users play from the Espresso app and show us if we see an increase of the overall number of submissions

  • Will all have 5 answers and a clearer indication at first glance of the users name and location

After the MVP, the team will discuss the next steps to improve the Editors’ experience.

 

Proposed second iteration

Post MVP experience

 

Discovery for the “Weekly crossword“

Defining what I know

When I began exploring the interactive crossword project, I had a wealth of information to draw from, thanks to the research conducted for the Daily Quiz. These insights provided a solid foundation, and the team and I saw an opportunity to leverage them to develop a basic version of the crossword puzzle as a strong starting point.

Our main challenge at this stage was to make sure the crossword worked smoothly, and this depended on the technology we would use to build it. So, the initial steps I took in this discovery process included:

  1. Exploring our technology options, keeping in mind that we wanted to start with a simple solution that we could improve over time. Discussions with engineers generated some proposed solutions, but none of them were quick or easy to implement.

  2. Conducted competitor research to identify industry standards in crossword design. The analysis revealed that most crossword apps follow a traditional square grid layout with a single type of clue, offering a familiar and uniform user experience. This insight raised concerns, as our product features a distinctive 'E'-shaped grid and incorporates two clue types—cryptic and factual—setting it apart from competitors' simpler designs.

  3. Stakeholder interviews with the editors which revealed that the crossword creation process was almost identical to the quiz one.

Based on these findings, the team opted to use text fields for the MVP, similar to the Daily Quiz. This choice reduced build complexity, allowed us to leverage existing work, and enabled quicker learning about engagement. Future iterations will explore more interactive grid designs like our competitors'.

 

Current crosswords page on the Espresso app

 

Designing the experience to test

It was time to start the design exploration. I worked on an initial round of designs during which my primary focus was on exploring how to present two distinct sets of clues within a single interface. Additionally, I explored how to position the text fields in relation with their respective clues.

I reviewed the initial designs with the design team and the main stakeholders, collected feedback and refined the, narrowing it down to two designs variants, which were translated in two prototypes to test.

 

First prototype

This version is the simplest to develop and has the potential to serve as our MVP. The clues will be displayed as plain text, similar to our current approach, with submission forms for answers placed directly beneath the list of clues.

 

Second prototype

In this second version, each clue will be directly linked to its corresponding answer form field. Additionally, cryptic and factual clues will be separated using tabs for clearer organisation.

 

Testing the experience

The next step was to validate the prototype through user testing. I defined test objectives and put together a test plan, which was reviewed by the Research team. The objectives were:

  • Understand if the proposed format of interactive crossword with form fields is well received from users

  • Test the two flows of submitting the answers and understand which one is the clearest

After getting the plan approved, I built and launched the test on UserTesting, analysed the results and presented them back to stakeholders. The main results are:

  • Variant 2 (tabs) was preferred by everybody because there’s no need to scroll up and down to read the clues and write them down in the text field down, it takes less space, it’s easy to switch between the two sets of clues and each clue is close to the related text field

  • Using text fields for MVP is not a deal breaker. Almost and equal split of people preferring the interactive grid or the text fields

  • The purpose of the page was clearly understood. Everyone understands that the answers can be given on the page, that there is a deadline to give the answers and that the winners will be announced on Friday

  • Clear that they should write the answers in the text fields. Everyone understands that the two sets of clues refer to the same words and that they're a different way to hint to it

  • Everyone mentioned that the "E" represents the crossword itself and half of the participants expected to see the letters of each word to automatically appear in the correspondent space on the "E" whilst typing a word in the text field

  • There is some work to be done post MVP to improve the confirmation page and make the next steps clearer

 
 
 

What’s next?

  • Conduct A/B testing on the MVP experience, starting with the quiz and then moving to the crossword. While the test launch is currently on hold, it is scheduled to go live next year

  • Defining where on the Espresso app the puzzles will be showcased (we’ve done an ideation workshop already)

  • Based on the test results, pick-up the conversation with other platform teams to see if/how we can have interactive puzzles there too