Sea Levels are rising.
Can you save L.A.'s coastal cities?

Play the game >>

Overview

view of the webpage on mobile
  • Design Lead & Front-end Developer
  • Design Lead, Reporter, Developer (myself and one other)
  • 2018 - 2019
  • Los Angeles Times
  • Reporting
    Game Design
    Hi-fi Mock-up
    Mid-fi Mock-up
    Product Management

Users

Readers of the Los Angeles Times

This was the second in a 2-part investigation into the California coastline. The story was in production for more than a year and published late 2019.

Problem Space

Create a news game

We were tasked with creating a news game that explains why coastal communities dealing with rising sea levels cannot easily address the problem.

Solution

Text adventure

The game put players in the shoes of power and had them try moving residents away from the coastline. Though this, the user can develop empathy for coastal communities.

Understanding the problem Space

Interview & synthesis

Rosanna Xia, a reporter at the Los Angeles Times, was introduced to this problem space through her beat as an environmental reporter. Rosanna conducted interviews a variety of environmentalists, beach-goers, homeowners who had beachside properties and more. Together, her and Editor, Ben Muessig, created a concept map about what they felt a newsgame could be.

Post it notes stuck onto a wall which we used to brainstorm

Diagrams show initial mockups of how game could progress (Swetha Kannan, Rosanna Xia / Los Angeles Times)

Key Insights

  • Current State - Professionals combat rising sea levels by adding sand to beaches, creating rock walls, or moving coastal communities inland.

    Result: Players can employ all these solutions in the game
  • Stakeholders - There are multiple stakeholders in this argument such as beach-goers, scientists, homeowners, and more.

    Result: Characters were added to represent stakeholders who provided mulitple perspectives.
  • Moving coastal communities - Often, money is not enough to convince coastal communities to relocate.

    Result: The main objective of the game became finding out what will convince communities to move.

Competitive analysis

screenshot of the Financial Times' Uber story which took the form of a game

The Uber Game by the Financial Times was a huge inspiration for us.

Meanwhile, Terry Castleman and I also assessed the state of newsgames at the time by doing market research into the existing landscape. We found what worked and what did not and also observed what tools other newsrooms used to envoke empathy.

Key Insights

  • Show value exchange: Some newsgames turn money, effort, etc. into a points system. This worked to demonstrate the value flows in any particular situation.

    Result: We used existing money flows to model similar flows in the game.
  • Skip tutorials: Newsgames with too much tutorials often lose audience interest.

    Result: We made a game that copies design patterns from other common games (such as the Oregon Trail) to skip the need for explanations.

Goals

We wanted to show the primary stakeholders in this problem space - it is not just the home owners who are affected but also goverment workers, scientists, and everyday beach-goers.

We also wanted to show how difficult it is to convince actual homeowners to leave their property, even with a sizable financial incentive.

Finally, we wanted to demonstrate just how hairy this process is. It’s not an easy solution, even though scientist insist that it’s the only one.

Design considerations

Engaging visuals

The visuals needed to be aesthetic, easy to implement and load, and representative of the Times' brand identity.

Responsive design

The game needed to perform well on all platforms, since over 40% of the Times' audience at the time used mobile devices to access the site.

Accessible game mechanics

The Los Angeles Times has an aging audience that needed to play the game with minimal tutorials.

Gamifying real problems

A big part of this problem space was how average homeowners are resistant to moving inland despite that being the only sane option. This nuance had to be shown in the game.

Creating empathy

When designing the game we had to be factual while also relating the struggles of people involved in the situation. Above all, we wanted the audience to develop some empathy for the problem.

Showing mulitple stakeholders

The game had to show what beachgoers feel about the issue and how that differs from environmentalists, politicians,homeowners, and others involved in the problem space.

Ideation

User testing with Mid-fi

Mid-fi mockup shows a beachside view with a city at the edge of the water

Mid-fi mockup (Swetha Kannan / Los Angeles Times)

We playtested the game, using a text-only version created using twine.js, with 5 users.

Rosanna also sent the test game to her sources who gave us expert insight into how accurately the game portrays the problem space.

Key Insights

  • Inaccurate setting - Experts were confused about the location since the mockup screens did not look like a California coastline.

    Result: I replaced high-rise buildings with a large highway, typical of the California coast, and a few one-story houses.
  • No character interaction - Players did not click on characters meant to represent stakeholders in the game.

    Result: I had the characters speak automatically without user input and without disrupting the flow of the game. Thus, players can see what they want to say and can choose whether or not to ignore it.
  • Too many value flows - Players were not able to easily jungle or understand the point systems (funds, beach health, and popularity).

    Result: The beach health and popularity point systems were scrapped leaving only the funds system.
  • No empathy for coastal communities - Users got too frustrated trying to move coastal homeowners.

    Result: We made speech bubbles for homeowners and assigned them children, families, etc. to make these characters feel fleshed out.

Implementation

I used Cinema 4D to make all the 3D elements you see in the game and then used After Effects to create all the animations. Afterwards, I exported these animations used in the game into Javascript by using the the Bodymovin library.

Animations

A large part of this project was all the animations that I created for the game. Below are a select few.

People

The results

view of the initial desktop screen of the webpage

The story published alongside it’s written version on July 7th, 2019.

The page published to great success. It was met with steady and increasing traffic for a week, a time frame almost unheard of in a fast-paced news cycle, and was one of our top viewed project pages of the year. Beyond the initial publishing week, the game has been used by professionals to teach students about the complexities of our beaches and to train local city officials before they began their duties assisting the development of beachside neighborhoods.

Play the game >>

Awards

award icon

2020 Pulitzer Prize, finalist for explanatory reporting

award icon

2020 Online Journalism Award, Finalist

award icon

2019 California Online Journalism Awards, 3rd place in Public Service Journalism

award icon

2019 California Online Journalism Awards, 2nd place in In-depth reporting

Let's connect