So, you want to be theChess Champion?Interactive Storytelling Case Study // Isaiah Valera

Background

A while back, I watched a video on titled, “How to be Pope”, that detailed all of the specific steps and requirements in order to be Pope. It was fascinating learning about all of the different nuances and commitments needed in order to fulfill that role. Inspired by that concept and in love with one of own hobbies, I decided to make a detailed, infographic style website that demonstrates the steps it takes to be the official Chess World Champion.

Due largely in part to both COVID and sources such as Netflix series, The Queen’s Gambit, and Twitch’s “Pogchamps” streamer celebrity tournament, Chess has undertaken a cultural revival in the 21st century. More than ever, millions of players, both new and veteran, are flocking back to the game and making chess accounts online. And with more people globally in the pool of possible players, there are new aspiring grandmasters all over the world currently in the making. Me personally, I’ve been playing chess since elementary, and this cultural revival spurred up both a lot of nostalgia and fun, competitive memories within me.

Introduction

Background

The objective for this website was to both inform and inspire both current and prospective chess players on the step it takes to be the official world champion of chess. As a lot of this is also derived from my own experiences as a chess player, I wanted to use a lot of first-person style narrative + side commentaries + my own knowledge to make it feel both approachable and informative.

I wanted to create a journey as if the audience was undertaking the climb themselves. Undertaking the path somewhat myself, this site will be an informative pathway starting from humble beginnings with facing your Grandpa at home, to the top echelon of the chess ladder and seeing who your Super Grandmaster opponents. There’s a lot of weird nuances and requirements to get from one level to the other, particularly in the higher ratings, so it’s important to know what you’re getting into before you get there.

Direction

Chess in the Modern Age

PogChamps, an online chess tournament featuring a mix of prominent streaming personalities, actors, and celebrities. With commentary and analysis provided by prominent International Masters and Grandmasters, the last PogChamps event garnered over 16 million live views.

Netflix’s, The Queen’s Gambit, is its most most-watched scripted limited series to date, with 62 million household views within its first month of release.

While there’s currently no more over-the-board tournaments going on, here’s a look at what super-grandmaster chess tournaments look like during the COVID-age, complete with live-face cams and a professional casting studio akin to a sports analyst crew.

Audience PersonaMaxwell (26)

Job: Software Engineer

Bio: Played chess when he was younger, but slowly started to fall out later in life

Likes: Competition, Entertainment, Motivation to improve at something

Intent: Watched the Queen’s Gambit and was inspired to pick up chess again

User Goal: Played a few games of online chess began to reignite a competitive drive within himself and now he wants to try and get an official rank from FIDE. Wants to use site to see what the process of ranking up is like.

Strategy: Inform and inspire chess players on the steps it takes to become the world champion of chess, while using design concepts that stray away from the popular misconception of its lack of entertainment value.

Research

Moodboards, Questions, and Benchmarks

ResearchSections: - Chess Ranks

- Elo system- The hierarchy: estimation on average length

it takes to jump for ranks with constant practicing

- Titles: M, FM, IM, GM- The Chess Superstars: Who will you have to

beat- (optional) Where to start? Tournaments?- (optional) Ways to practice? What does GM

training look like?

Word Snippet of possible sections to use in website, including sections and topic points

Research

Messed around with a couple layout ideas and wireframes, but I generally wanted something that was a long strip with a winding path. I settled on having the end of the website be the end of the journey, but my debate was figuring out what way should the audience reach there.

ResearchMoodboards

I wanted to create some kind of Dante’s Inferno tier-style graphic containing multiple that descended lower and lower until you hit the world champion, as well as some kind of line or graphic that you could follow to go back or trace your steps.

Research

Finalized Idea on content organization

1) Humble Beginnings, playing with Grandpa

2) What is FIDE?

3) Climbing up the ranks

4) Titled Tournaments

5) The Super GMs

6) Magnus Carlsen

7) Winner! Yousa chess champ! Congrats!

- Motives for starting- Who are you playing against when you start?

- Understanding what FIDE stands for- This is the organization you’ll be going through

your tournaments through- “If you want to be champ, you need to go by their

rules and standards

- What different ranks look like- Pictures of a standard chess club

- Pep-talk, Great job for reaching this far!- These are the first few titled ranks you’ll reach- Events start getting more international

- You just hit GM!- You’re not satisfied with that- Who are you playing against now? These are the

champions all over the world.

- Magnus’ stats and achievements- *Cue Final Boss music*

- Congrats!- Grandpa is coming for you

Process (Concept Evolution)

Initial Prototype (snippets of one strip)

Opted to go for a gradient to show a “descent” into the difficulty

“Elo tracker”, as you scroll you can benchmark to see the approximation of what rank you are

Line that follows your journey, with little stops along the way

Starting homepage screen

Key Direction Ideas

Start as a lowly pawn, end as a king

How Grandmaster tournaments look like

Background type so you can see what milestone titled rank you’ve reached

Path becomes more centered and linear, as higher ranks start to delve into more of a extremely structured ladder ranked system over something more of a sidewinder

Side commentary + pep talk

Key Direction Ideas

Process (Usability Testing)

Critique

A lot of my critique involved the actual legibility of the site. The ideas and concepts were overall received well, but the execution of them was a little off. These three were the most commonly shared themes:

- Lines: Lines from the path are difficult to notice and follow until later down the site

- Hierarchy: Some text is too small, type hierarchy can be a little difficult to focus mainly because of inconsistent text placement

- Choice of color palette: much too blinding in the first half, making overall readability, and ultimately, accessibility of site much too difficult to follow. Gradient also doesn’t really give off a chess vibe.

Using Figma, I realized that the biggest goal of the site was the storytelling aspect, and fortunately for me, it was the most successful part of the project. The side commentary and little bits of knowledge made feedback mostly positive due to its fun and informative nature. A few of the positives that I sought to keep for the final iteration:

- Coming full circle, from humble beginnings with Grandpa

- ELO tracking on the left side- Able to understand the different levels

of competition at each chess tier - A solid glimpse of what tournaments

look like at each competitive level

Positives

Outcome

Page Selections from final

Page Selections from final

Outcome

Reflection: I’m not going to lie, this was a very difficult project for me as I felt a little restricted from what I could due to a combination of time-constraints and programming knowledge. I was mostly challenged with trying to find the right tool for the toolbox in the time we had for this project, and a lot of the process was learning how to use the javascript versus designing the page. It was also difficult for me to narrow down the ideas that I wanted to put in since I personally felt I could have gone more into depth with the project! I had to find try to find the balance in wondering what I could draft up versus what I could exactly make with what limited knowledge I had. If I pursued the same type of project again, I know I would do a lot better and be more experimental with the design overall, especially with discovering more javascript-type functionalities.

Outcome: I wanted to make an emphasis on making it clean and concise with negative space. The design for the site came out a LOT simpler than the original prototypes that I made for them. I was a little disappointed at first by what I ended up removing, but in the end, I learned to adapt to the new style using the elements I had left. The one biggest aspect that I removed came from feedback about the color palette choices, and that it mostly involved removing my color gradient in the first editions of my site, as seeing it on the actual site made it look cluttered and busy. Some things had to be cut, for better or worse, and while it was difficult, I’m somewhat happy with the result.

Thank you!