How we designed Polygon’s Final Fantasy 7 oral history

Even if you never played Final Fantasy 7, a groundbreaking role-playing game from the seminal video game company, Square, you certainly know someone who has. The game is celebrating its 20th anniversary this month, and Polygon tracked down unparalleled access to the people behind one of the most influential game companies in the world.

Polygon approached the Storytelling Studio after spending one and a half years reporting this story. It took that long to track down key players that had since left the company and to get access to art and photography. Separate from all of these elements was the scope of the narrative itself; the final edit came in at a whopping 30,000 words. You can explore the piece here.

Staying true to Polygon branding

Final Fantasy 7 was one of the first role-playing games to employ 3D graphics and an immersive universe and storyline with characters that gamers actually cared about. The franchise had a devoted fanbase but this particular iteration brought worldwide fame and a new legion of fans. When composing mood boards for this feature, it was a choice of staying true to the nostalgia bent of the ‘90s or sticking close to Polygon’s own branding.

We opted for the design that’s more closely aligned with Polygon, so we can reinforce the brand and build brand equity. Not wanting to go too left field, I used many elements from Polygon’s original style guide but incorporated details, such as pull-quote styling and photo treatments, to differentiate it from their other features. Keeping true to Polygon’s voice also helped when passing the style to their social and video team; the assets still felt like Polygon but are unique to this story.

Using repetition to track number of characters

The scope of this story follows multiple people at Square over 20 years. People changed roles, some had quit, some operated on a freelance basis. How can you make sure that the reader keeps all of these names straight and stays cognizant of that person’s role?

The first element I wanted to experiment with, that varied from how Polygon had done oral histories in the past, was to introduce a “cast of characters.” Seeing some names, dates, and job titles up front can begin to give the reader a feeling of familiarity.

At first I intended to surface all of the people featured in the story upfront but, after multiple tries at wireframing, I realized that trying to fit so much information would be overwhelming for the user.

To solve this, I looked at who had the most dialogue – there were about 10 people who carried the most dialogue – and then chose to introduce others in the story text. We used head shots, names, and job titles as a way to remind the user who was speaking to who and what role they played in the development of the game.

Since we were using a very detailed identification system, it was easy to introduce other “characters” in different eras. On mobile devices, we used sticky navigation for the head shot and names as a way to remember who is talking while reading a long monologue. Once you scroll past the end of that person’s dialogue, the name fades away.

Enabling return users through bookmarking

This entire story clocked in at 30,000 words and we knew few people would experience it in one sitting, unless they were on a very long train ride. Our project engineer, Kavya Sukumar, and I decided to make this story one page, based on past analytics that tell us a user is more apt to scroll through a story than to navigate multiple pages. In addition, we had to solve for the problem of trying to get users back to the story if they wanted to finish it later.

Kavya created a bookmarking functionality that would bring the user back to the very spot they had left off. The user is given an option to copy a link to save or send/text it to themselves. This was a feature where we user-tested the functionality, wording and design.

The library Kavya created for this bookmarking feature is open-sourced for all to use.

User testing often

As a team who builds experiences and works very closely with the journalists who create the content for these experiences, we know it’s important to step outside of the bubble of what we think we know. Our senior designer, Kelsey Scherer, breaks down why this is important in this blog post.

Among other things, we learned to give users more signposts for wayfinding throughout the story, such as progress bars, and write detailed subheads. Even elements as subtle as language used in the bookmarking module were tweaked to be clearer after testing.

All in all, this feature was an interesting experiment, where we discovered a myriad of different reader behaviors for longform journalism, solved for how to get repeat visits and how to make a well-designed experience where the copy is at the forefront.