Designing the ESPN for eSports
The Story of Instant eSports Redesign
We all have childhood memories of having a video game party with friends. It’s more fun that way because sometimes watching other people play games is just as fun as playing the game on your own. What was once a bunch of kids gathering around arcade machines have now become tens of thousands of people cheering over their idol players in a huge stadium. It became a sports of its own — eSports, with professional teams, players, tournaments, coaches, and even trading windows.
When we follow soccer, baseball, or any other professional sports, we go to a central source to get information, learn more about teams and players, and talk about these with other fans. As eSports fans, we want that same place that traditional sports has, but for what we care about — eSports. That’s how Instant eSports began.
Growing up in Korea, the country where eSports began, the idea clicked with me the moment I met Rick and Jonathan from Kairos Society in 2013 (and later, Sebastian) — the founders of Instant eSports. I’ve been helping them with the first version of the design since last year as a contractor, and two months ago, I joined full-time as a Lead Designer. Since then, the team worked hard to redesign the entire app from the ground up to create the best experience for following eSports on mobile.
Shaping the Direction
Every product should start with a goal and a result that can be measured. Our goal was to build the best way for fans to keep up with eSports, with the success metric of of bringing up retention and engagement of the app. Since we launched Instant eSports last May, we have seen steady growths in user base, but the growth rate in engagement was turtling. The app had lots of features, but it wasn’t sticky.
The problem was that old Instant eSports experience ends at just getting the updates. User would open the app, check the news, see a few match results, very few would search and follow some players, and… leave. Each features were powerful, but discrete.
We looked at some of the ways people follow eSports, and even further, sports in general:
- People wonder what others are thinking about when they are watching a game. This is why people read Reddit comments after a LCS game, neighbors gather around for Super Bowl weekend, and have a huge viewing parties for World Series Finals. People are inherently curious about what others think, and want to experience the game together.
- Fans are also curious about teams and players involved in a match, and want to learn more about them. With almost every sports broadcasts, there are lengthy analysis on team and player stats before and after the match. These advanced statistics are incredible supplements to news and match that people will be following.
With these in mind, the redesign’s goal is to connect discrete features into a cohesive experience, with a target metric of increased retention and engagement.
To do this, we tackled three areas:
- Create a consistent design language
- Fulfill people’s curiosity for eSports
- Provide a room for fans to talk about eSports real-time
Drafting the Constitution: Design Language
Just like a nation starts with establishing a constitution, a design starts with establishing a design language. As such, we started with creating a cohesive and timeless set of design patterns and guidelines for Instant eSports.
Our goal with the design language is to create a design that’s unique to eSports: bold, edgy, and futuristic. At the same time, we still held onto core UX Principles, such as focusing on content and maximizing clarity.
We also set out to create product principles to keep in mind as we brainstorm around our design decisions. Think of it as a guiding beacon for the case when we might get lost:
- Go beyond people’s expectations: Never make mediocre apps. Always strive to exceed the quality standards of the industry.
- Function over Form: Keep it simple. Users don’t want novel interfaces. They want a good one.
- Iterate Fast: It’s much more effective to build quickly and iterate fast than to make guesses in a room.
- Think Months Ahead: Don’t make decisions that will be a quick patchwork. Every decision will make an impact months ahead.
- A bit of quirkiness doesn’t hurt: Games are meant to be fun. Embody this culture within our product to create delightful experiences.
The emotions that we established in design language takes form as our choice of brand color and typography. Our primary brand color is bright red — which our team call the “Salmon Red.” (As much as I hate to call it.) We moved from a sick salmon red from version 1 that looked way too faded out and a bloody red from version 2 that looked way too bright to finally the current “Fresh Salmon Red.” The new brand color is bright, energetic, and embodies the passion in eSports.
We chose Industry as our primary typography of choice. Its industrial, futuristic vibe is perfect for eSports. Industry will be used in our Heading, Display, and short-form body copy. For long-form body copy, however, we needed a type that’s more legible than Industry. That’s why we chose DIN Next LT Pro, which is highly legible, yet preserves the industrial, modern feel that pervades throughout the brand.
Applying the Constitution: UI Refactor
Before getting to new features, we applied our new design language to our existing application to clean up the information architecture and establish a consistent design.
Navigation
We moved to a tab-based navigation for both iOS and Android. Tab-based navigations are extremely effective for establishing a clear hierarchy and segmentation between features.
We also brought out key features from an ambiguous Hamburger menu to a tab bar in our Android app. With this improved navigation, users can switch between key features from anywhere on the app.
News
We focused on improving legibility and a stronger focus on content for the refactor of the News section. Each news article now features larger thumbnails, more spacing, and stronger attention to article titles to call out users’ attention. Users can also see which articles they have read already, which are greyed out compared to the rest.
In News article, all of the key actions that users can take — Back, Stats, Talk, and Share — are accessible from the bottom tab for better reachability. This is a theme that carries on throughout the app, for every detail / second-level pages. We will be talking about Stats and Talk in a more detail in a bit.
Games
Games is the most central feature of Instant eSports: It’s a place where users follow the latest schedule and check out a match recap. With the redesign, we cleaned up the information architecture, with time and date on the left and matches on the right. There’s also a clear indicator of state — Live / Reminder Set — and a call to action. Last but not least, there’s a stronger emphasis on context, i.e. which tournament each match is for, and a call to action to see detailed info about the tournament.
When designing the Match recap view, we focused on separating at a glance information from in-depth information. That is, most people are only interested in getting key statistics and leave, whereas some people are interested in learning more advanced statistics about the match. As such, we have at a glance info on the very top, including general match info, call to action, and picks & bans.
We also brainstormed around ways to give users experience the progression of the match without watching a half an hour replay video. The result is a Match Timeline, where users can see which team is ahead at a given time. We also automatically generate short highlight videos for important moments in a match. We are working on polishing Match Timeline before the release, and it will be available soon.
For hardcore fans interested in learning detailed stats for individual players in a match, they can scroll down to see in-depth stats. It’s the same content as the previous version of Match view, but we cleaned up the information architecture & legibility a little and applied the new Design Language.
Connect
Connect is a place where users can stay in touch with their favorite teams and players. It’s essentially an aggregation of the social media profiles of the teams and players users are following. Our goal was to help users focus on receiving updates from their favorite teams and players, without the noise of different formatting for different sources.
As such, we reduced emphasis on where each post is coming from to just a small social media icon. We then standardized each post’s formatting so that they look similar regardless of where it’s coming from.
Fulfilling People’s Curiosity: Explore
As we set out to fulfill people’s curiosity for eSports, we wanted top provide a fun, interactive way to learn about teams, players, and game characters. The analogy we came up with is baseball cards. Remember those childhood memories collecting baseball cards of your favorite players? These baseball cards are an epitome of a fun, yet easily digestible visual information.
For the new Explore feature, each team, player, champions, and tournaments are represented as cards. Each card has key statistics and information that allows users to quickly glance through important information. These cards are also embeddable and sharable across different platforms, even outside of Instant eSports.
Using these card modules, we created an all-new Explore page. Think of it as an encyclopedia for all your favorite teams, player, game characters, and more. If you are ever curious about the latest win ratio of SKT T1, or trending champions in NA LCS, or anything on professional League of Legends, you can use Explore to find out about it.
When you click on any cards from Explore, you can see more in-depth information about the entity. From biography and most played champions to champion history and upcoming matches, you can find almost any information you want on Explore. With Explore, you can check out detailed statistics whenever you want, not just on official LCS pre-match broadcast.
Most importantly, you can check out these statistics from anywhere on the app. Let’s say you are looking at a match recap between SKT vs EDG, and curious about detailed team statistics. You can simply click on the Stats icon on the bottom tab to see all of the statistics related to the match. Our goal is to give users easy access to these statistics from News, Match, or anywhere else on the app, so that they can fulfill their curiosity regardless of the context.
Hosting a Virtual Viewing Party: Talk
Sometimes, you notice that people love features that you least expect. Six months ago, we added a Live Chat feature as a weekend hack. It looked horrendous; it covered only half of a screen on top of connect, which wasn’t even related to Chat in any way.
It turned out, however, that this hacky, ugly chat was driving a ton of engagement — it quickly became one of the most interesting and lively section in Instant eSports. People discuss ongoing transfer rumors, who will win the World Championship, or just casually exchange “Merry Christmas.” This was a strong validation for us that we should go all out on this feature.
When designing the new Talk, we had to balance between pushing for innovation and keeping what’s already working. We still wanted to keep a general place for people to talk about anything, like the original Live Chat. That’s why we brought out Live Chat to its own tab and named it Lobby, along with major design improvements.
At the same time, we wanted to give each discussions a bit more of a structure. Now, you can participate in a discussion from any detail page — that is, News articles, Match recaps, and Explore pages. You can discuss about the latest transfer rumors in a news article, talk about who’s going to win in next week’s LCS, and more, in dedicated Talk rooms.
To put this all together, you can see all of the latest discussions in Discussions tab. With Discussions and context-based Talk rooms, we are making Instant eSports not just a news and schedule app, but an active community of eSports fans and players.
What’s even more exciting is that you would be able to directly talk to professional players. We will be having AMAs with players from teams we’ve partnered with to give fans an opportunity to talk with them real-time. We will be releasing future schedules for these AMAs after the tournaments kick off. Stay Tuned!
Looking Back & More to Come
We are super excited to roll out this redesign to the public this week, with some of the changes mentioned in this article rolling out in the next few weeks. You can try it out on App Store or Play Store. Or learn more about us on our website.
I want to personally thank the entire team at Instant eSports for all of the hard work. It’s insane to think that this project started last November, and it only took us just 2 months to ship this huge change. I feel fortunate to work with this incredibly talented team.
We can’t wait to share with you more about our journeys toward shaping the future of eSports, and more broadly — sports in the 21st century.
