At the end of 2017, Al Jazeera a published a news quiz to mark the end of a momentous year. However, rather than just create a standard quiz, we wanted to try something new. How could we leverage gamification to find out more about our loyal readers — who they are and why they come to Al Jazeera?
The challenge was: How do we convert users playing the game into users who would complete the survey?
It turns out there’s a phrase for this kind of integrated audience research, guerrilla user research. The idea is summarised very well by Feli Sanchez in her NiemanLab article about the main predictions for journalism in 2018.
She says:
“Creating valuable products first requires news organizations to understand the people for whom they are designing. We need to commit to learning what their goals and motivations are, and what they are trying to accomplish when they sign up for a newsletter, download our app, or visit our site.”
In our case, we wanted to take our readers on a visual journey around the world so they could explore where a news story happened. As a payoff, for every correct answer, the user would collect a stamp in their virtual passport.
Designing the game
We had two main objectives in creating the news quiz. First, the quiz had to recap the main news stories of the year in an interesting and fun way. Second, we wanted as many of our loyal readers to complete the survey as possible.
To solve the first problem we looked at two existing news games. The first was Geoguessr, a game developed by Anton Wallén in 2013. The neat thing about using Google Streetview is its ability to easily transport you to a new location and allow you to explore your surroundings in 360 degrees. The second game that we looked at for inspiration was the UBER game developed by the team at the FT.
MVP in the newsroom
We had just over one month to take our idea from inception to completion. To stand the best chance of achieving this in time, we opted to follow an interesting take on the minimal viable product (MVP) approach.
In a nutshell, rather than thinking of MVP as a product, we thought of it as a process. In their article, Multidots point to Yevgeniy Brikman’s diagram which shows how your idea should go through a series of proof-of-concepts with early adopters to decide which features your users will need to achieve their goals. Once it stabilises, you’ve reached your MVP. With one person dedicated to the project and two on it part-time, we went through the following phases:
Week 1: Concept, defining goals, proof-of-concept.
Week 2: Story script, Alpha, User-testing.
Week 3: Beta, More user-testing.
Week 4: User-testing, shipping the project, translation and measuring engagement.
While everything had to move fairly quickly, there was a lot of back and forth on how the quiz should flow. We were faced with a lot of questions such as: How long should the entire experience be? How difficult should we make the quiz? When should we introduce the survey? How can we keep readers focused on completing the quiz? What’s the payoff for completing the game?
We ended up with the following answers:
- How long should the entire experience be?
The consensus among 20 user testers was “no more than 5 minutes”.
2. How difficult should we make the quiz?
Easy enough for people to want to share their score.
3. When should we introduce the survey?
Best to do it “right at the end” so as not to interrupt the flow of the quiz.
4. How can we keep readers focused on completing the quiz?
Don’t provide links to articles or any other distractions that may lead readers down a rabbit hole. We wanted to include links but found even opening an article in a new tab lost us a few readers.
5. What’s the payoff for completing the game?
This remained the most difficult question to answer. We ended up offering two incentives. The first was letting readers share their virtual passport on social media. The second involved giving 15 lucky winners a prize for correctly identifying all 12 locations on the map.
The technology under the hood
Using a front-end web application framework is critical for rapidly prototyping and incrementally scaling your news app.
The framework we chose for this project was Vue.js. It seemed to be a good option because it allowed us to easily control the state of the presentation layer (what the reader could see) without writing too much code. One of the strongest features in Vue is its declarative rendering and data binding. This keeps track of all the data that is passed along throughout the game. To store the survey responses we wrote a Google App Script which stored the data directly in a Google spreadsheet.
One of the difficulties of building a custom looking application is in choosing the right look and feel. We wasted a lot of time writing and debugging our CSS, especially for mobile. Looking back, it would have definitely been better to have used a framework such as Quasar to handle this.
Also, it’s worth mentioning that this modularised approach allowed us to translate the entire site from English to Bosnian in one day.
Engagement:
The survey ran from 22 December until the end of the year. During that time we collected 10,000 complete survey responses from the 40,000 unique visitors who came to the page. The average time spent in the game was 04:25.
Overall, the most interesting insights from this experiment came from reading through and analysing the survey responses. These insights are incredibly valuable in building a loyal audience around Al Jazeera’s content.
We’re working on our next news game. If you’re interested in helping us out in any way by offering us any advice or expertise please reach out to us on Twitter.
Follow us on Twitter and Instagram or visit our webpages:
