Striking a Balance between Function & Form
How We Approach Design at Blitz
We’ve come a long way since our rebranding as Blitz (formerly Instant Esports) this February. Since then, we’ve transformed ourselves from just a news app to a high quality esports publication that not only reports on major LoL and CS:GO leagues, but educates audiences on the scene as well. On the product side, we did a partial redesign on our mobile app and launched a brand new Blitzesports.com that serves as a destination for esports fans on the web. Looking back on the past four months as Blitz, and the past year as Instant Esports, I want to highlight some key product lessons we’ve learned along the way.
The (true) story of Instant Esports redesign
Let us start from our original blog post back in last year: Designing the ESPN for eSports. In the post, we touted our new Explore feature which represented each team, player, champions, and tournaments as cards. We thought it was an elegant way to represent esports data in a digestible and shareable format, borrowing the analogy from baseball cards.
Wrong. As it turned out, we spent a whole month building that feature and scrapped it in the following month. It wasn’t as easy to browse as a traditional list, and most of all, hardly anyone used Explore to browse esports data. What people really wanted was just a simple display of team standings, not fancy cards with pictures that only fit 3 to a page. It was the epitome of Form over Function
Since then, we went through some roller coaster ride as a product team — a few pivots here and there, and learned numerous product lessons along the way. Most important of all is that in our design process, we should strive to strike a balance between Function and Form: Not one over the other, but a delicate balance that optimizes for both efficiency and delight.
Function
Users don’t want a novel interface; they just want a good one.
Design with (better) purpose
I firmly believe that there are three goals for design:
The vast majority of designers try to satisfy the first goal — focusing on aesthetics — but fail to satisfy the product goal, and far fewer satisfy the business goal. The evolution of our homepage is an example of how we went from accomplishing the aesthetic goal to the product goal, and then the business goal.
The original homepage that we shipped this February accomplished the aesthetic goal — it set the voice for the overall website with a large cover story, followed by a list of top news articles. After we shipped the site, however, we found that the majority of users who visited the homepage left the site without clicking on any links.
From this, we figured the initial version of the homepage had three glaring flaws:
- Cover Story dominated the users’ attention. More than 90% of users clicked on the Cover Story, and never bothered to explore other sections of the website. This is the mother of all the problems that follow below.
- Upcoming matches were buried. One of the key goals of the homepage is to get users to check out the latest matches. Because the Cover Story received too much emphasis, however, almost no one clicked on the schedule bar that showcased latest matches.
- Lists are suboptimal for news sites on the web. The purpose of landing pages for news sites is to surface as many opportunities for users to click on an article that they might be interested in. Lists, however, only showcase 1–2 news items above the fold. Scroll is “cheap”, but what we’ve gathered from our usage data is that most users just get off the site unless the top 3 articles above the fold are interesting enough.
The homepage didn’t really achieve the product goal: a destination for visitors to discover the latest news in esports. Because the homepage didn’t align with users’ intent, it naturally didn’t satisfy the business goal either, with a high drop-off rate and low engagement.
In turn, we set out to redesign the homepage with the product goal of improving discoverability of articles and matches, and business goal of increasing our retention rate.
Here’s what we did:
- Moved the top emphasis from a cover story to latest matches. Placing the latest matches as cards on top of a cover photo affords higher contrast and gets immediate attention from the user. The cover photo still gives the site a uniquely esports feel, while not taking up as much space as a full-bleed news article.
- Showcased top stories as a Grid. Grids use space more efficiently than lists on the web, surfacing more opportunities for users to discover interesting news items. One of the downsides of a grid is that it is difficult to establish chronology. (Ex. Vox and Engadget) In turn, we opted to feature the latest article on the top left instead of the center, so that it’s clear to the user which article is the latest.
Key Takeaway: Design must accomplish more than pleasing the eye — it must help users accomplish a task, and businesses reach a target metric.
Let your metrics guide you
Sometimes it’s difficult to figure out what’s next on your product team’s roadmap. Metrics come in handy here — they define the success or failure of your past product launches and guide you in determining what to tackle next.
Let’s take a look at changes we brought to our content pages based on what our metrics showed. We started shipping written content on our website and getting referral traffic from social media this April. This brought us a huge surge in new visitors from referral traffic, but the growth didn’t really mean much without the visitors staying on our website. The vast majority of users landing on our content pages left the site without clicking on any other links.
The dilemma for blitzesports.com is that it’s more than just a content website — it’s meant to be a destination for esports fans on the web, with the latest schedules and match stats that fans can use to keep up with esports. For the new visitors to blitzesports.com, however, the content pages that they landed on created the assumption that our website was just like any other news website.
To fix low engagement on the website, we introduced Match Cards to our content pages. Match Cards provide match stats related to the content users are reading about — ex. C9 vs. TSM pregame votes or postmatch stats on an article about Bjergsen.
Although we shipped this feature only recently and most articles currently lack related match information, we saw a 17% lower drop-off rate for articles with Match Cards. We also found that users who visit both our homepage and match pages come back to blitzesports.com far more frequently than those who have never visited our match pages.
Key Takeaway: Use metrics to evaluate your past product launches and decide which user needs and future metrics to tackle in your next product feature.
Form
We are not building just another news site. We are building a center for Esports. Not New York Times, not ESPN, but Blitz. That’s why our design must live and breathe esports.
What makes designing Blitz extra difficult is that it’s not just a news site, but an esports site. When designing most other apps and websites, you can focus mostly on creating an interface that helps users accomplish tasks. There are obviously emotions that you must embody in your interface, but in most cases they are rather general — trustworthy, delightful, intelligent, secure, so on. For an esports product like Blitz, we set out to create a unique design language that lives and breathes esports without sacrificing usability.
Design Language: Brand
At the heart of our design language is the emotion we want to convey with our brand. In both our content and product philosophies, we seek to embody 5 core values:
- Blitz is digestible: we deliver content that’s easy to consume and accessible to everyone.
- Blitz is creative: we strive for innovation in both content and product in order to satisfy the needs of esports fans.
- Blitz is accessible: we seek to expand the reach of esports to audience of all types.
- Blitz is playful: gaming culture is fun, spontaneous, and informal — Blitz embodies the culture to create delightful experiences.
- Blitz is exciting: we convey the adrenaline rush behind the plays at the heart of esports.
Based on these emotions, we ditched the old 14-letter product name Instant Esports and created a new logo with a new name: Blitz. The new logo is a geometric lightning bolt that signifies speed, passion, and futuristic vibe of the Esports.
At the same time, we retained some parts of the old design language that were effective — namely the primary color (Salmon Red: #F35353) and the heading typeface (Industry). We introduced a new secondary color (Blitz Orange: #FF9B3C) for better contrast in our content graphics, and a new body typeface (Maison Neue) for better legibility.
With this design language, we set out to create a unique voice within the world of esports. Blitz breaks down the complex world of esports with narratives supported by digestible motion graphics and visual aids. Our goal is not only to report the “what” of newsworthy events, but also to dig into the “whys,” the “hows,” and their implications — all in sleek formats that are easy to view and understand.
Design Language: Product
The design language we created for the brand and content carries over to our product as well. We established thematic components that make our products feel uniquely esports, such as skewed boxes in the schedule bar and yellow highlight in section headers that gives the site edgy, futuristic feel.
One particular page on which we worked really hard to convey the esports theme is the match page. Matches are at the heart of esports. Our match pages hype up fans before the game with head-to-head comparison of the two teams, and it archives the sick plays during the game with postmatch stats.
When designing the match pages for blitzesports.com, we set out to make sure:
- Present stats in a digestible format: Establish a clear information hierarchy with visual aids such as graphs to help the user understand what happened in a game.
- Convey the rivalry between players: Players represent the emotion in esports — the intense rivalry, sportsmanship, and passion. We present key players side by side in large thumbnails to bring them into the spotlight.
- Involve the audience in the game: Esports fans can be opinionated and vocal, and we wanted to reflect this in their match browsing experience. As such, one of the key call to actions in match pages is voting.
Of course, we wrap these key objectives with our design language, like bar graphs, player thumbnails, and vote buttons that feel uniquely Blitz. Our philosophy to product design is that an interface that simply works is not enough. We strive to make design that works and feels uniquely esports, and most of all — Blitz.
Going Forward
Since our launch in February, we’ve become a premier esports publication in just four months. That’s not to say our product and design have no room for improvement — we’re just getting started.
Looking back, and going forward, one thing we’d like to improve on is not half-assing our projects. We built many, many features in the past four months, from match stats and standings to chat and 30s highlight clips. We cut down on a lot of specs for these features to make them minimum viable products — experiments to see if they satisfy user needs first, instead of overbuilding them. The purpose of MVPs, however, is to be iterated on. If you find a good fit, then you should continue to iterate and polish these features. Rather, we took a breadth-over-depth approach to our product development, and built many features that we eventually realized were half-baked. Going forward, we hope to bring more polish to our features that bring good traction.
Most important of all, we want to listen to esports fans more. Our goal is to ultimately make the esports scene better for fans, and to do that we will try to loop in esports fans’ feedback in the process as much as possible. We would never have gotten this far without our users’ help, so huge thanks to our users — old and new! As we venture into the next frontiers in our roadmap, we hope to listen to fans’ feedback, and bring more products and content that fans really need and love. Stay tuned!
Made with Lots of Love and League at Blitz HQ in Berkeley and Los Angeles.
