Sometimes it Works, and Sometimes it Doesn’t

One of the biggest pulls I feel coming from the world of design is the desire to share ideas. Design has a wonderfully collaborative community, and this is exactly why design is improving and spreading so rapidly. While I tend to stick to harmless lurking on my personal hobby sites, this overwhelming sense of camaraderie really inspires me to want to share my ideas. Below are two contrasting examples I see while I scour some of my favorite hobby sites. I will be going through a few aspects of their design and explain what can be learned from them.

TempoStorm.com

One of the fastest growing e-sports teams out there has to be TempoStorm, and it is due in part to their website. The TempoStorm website brands itself as being a center for learning and development for its patrons. The team does this with the slogans like “become legendary today” or “learn from the best.” But it also does this subtly through its front page.

The site menu at the very top is followed by a second large hierarchical organization of games. But even these low-saturation images do not stand out on the front page as much as the vibrant blue bar cutting across the very center of the screen. This blue bar announces a few specific teaching features that exist on the website, but ultimately showcases to all users exactly why they will benefit from checking out TempoStorm. It re-enforces their brand of instructing while showing off a lot of different tools (with cool UI) right off the bat.

Below this blue bar we see another part of the website that lends itself to the overall success: the premium article cards. These articles can only be immediately accessed in full through paid subscriptions; however, there are two features I really like about these article cards that push uses to pay for subscription. Firstly they look almost exactly the same as the regular article cards except for their golden tipped corner. There is no way to filter out premium articles as you are looking through content (you can only filter by game), and this is great. Users skimming articles will see the preview and get excited about reading the article (premium or not), and they let themselves get excited about an article this way. This is because they are doing the same action when previewing premium content as they do when they are simply looking for a free article to read. Secondly is the decision to make premium content noticeably free after two weeks. This decision is effectively asking users to pay for impatience instead of just content. It is a sneaky trick, but it works. Impatience is something we see consumers pay for all the time — going to the movie theater instead of waiting for a movie to appear on a Netflix subscription they already own — waiting in a long line for a new iPhone instead of ordering it for delivery to be received the next day at your own convenience.

The last component of TempoStorm’s site that I will discuss is the deck list navigation page. The two presentations on the left further reinforce TempoStorms brand of being a teacher in the community. The fact that the TempoStorm decks are larger and featured at the top purposely present them as being more legitimate and special. The list format for the community decks implies that a community member coming up with a deck is just one in a pool of many, and none are worthy of being a role model as much as the TempoStorm Decks are. Its also worth noting that the page also has filter and search capabilities when a user wants more specific guidance.

Overall, TempoStorm made a lot of good design decisions on their website for their business. It is important to remember that decisions about user experience are as much about how to make it easy for a user as it is about how to facilitate business needs. In this case those needs are to strengthen TempoStorm’s brand.

TeamLiquid.net

I have gone in and out of being a huge Starcraft fan during my college days. And anyone who has been with the scene long enough knows that one of the first and best websites for all community news was Team Liquid’s. Back when I was visiting the site daily, it would have been hard for me to find opportunities for improvement; not only was I missing a UX lens, but I also was an experienced user. Interestingly, now that I have a basic foundation in UX design, the site is five times more difficult to use; however, in reality nothing has changed. Team liquid will always have a special place in my heart, but lets take a closer look at some of the design decisions on this page.

Above the fold
Below the Fold

The first big item that stands out is the visual hierarchy displayed above the fold. Not all members of a particular layer in the hierarchy are visible. In the left screenshot we see “News,” “StarCraft 2,” and “Live Events” (shown on the both edges). They are formatted to be hierarchically equivalent to “Brood War,” “Live Streams,” and “Upcoming Events” (only shown on the edges below the fold). Thus not all of these elements get the same attention. Now this could be the website’s intention — if these three top page items pull the most traffic then I understand why they opted to use top space. Unfortunately though a user might not even know that those other major sections exist on the website or how to get to them without having to do some scanning. On top of this while you are scrolling through you’ll quickly notice that some of the information is duplicated twice above the fold: Many of the the ‘featured news’ links and ‘community news’ links appear in both the left column and the middle section. Some restructuring above the fold can help focus on an entry point to the best content while still showcasing even more of what the website has to offer.

The next item is a bit more detailed. To the left we see a list of articles either being featured by the website or written by a community member, and beside each article it has a number. Now, I know that this number denotes the number of comments associated with that article. How? I know this because I clicked on the number. Wait. Its a link? Yes, and it links to the comments of an article (separated from the article itself). The number of comments is shown beside the article to show users which articles are creating the most dialogue — as these are likely the more interesting articles to check out first. In general, its a nice feature. The linking functionality seems best suited for repeat visitors or active community members. Once you read (or write) an article shown here, you can quickly access the replies as you see the number of responses growing. The biggest opportunity with this ‘news’ section is to include a signal as to what that number represents (such a table header or a a speech bubble icon). I would not be inclined to try to click on the numbers if I suspected they were simply views, ‘likes,’ or even a relative measure of length.

The last item I will discuss relates to branding and rewarding users as they build a knowledge base of how to navigate the site. At the very top of the pages, team liquid presents links to their other community sites. In order, below are the above the fold views of each of these links.

Team Liquid Pro
Liquipedia
Liquid Hearth
Liquid Dota
Liquid Legends
Liquid Poker

LiquidHearth and LiquidDota do look and behave very similarly to the Starcraft page, but none of the other websites have that same homogeneity — not with the original TeamLiquid page, and not with each other. This almost certainly is a consequence of the business itself being segregated and decentralized between the different e-sports, but the visitors who interact with these pages are not likely to be as segregated (maybe with the exception of the gaming wiki existing for a different purpose than a community page). This implies that users in their larger community might have to learn multiple different experiences to follow news for different games.

As you can see, even where there seems to be opportunities for improvement in a design, there are always reasons which lead the experience to be designed that way. It is vital to consider all of these reasons when suggesting any kind of change. Otherwise you could be suggesting away an important aspect of the design instead of incorporating it into the new suggestion.

Not Just Lurking Anymore

It has been very interesting to revisit to these sites to think about their design. Even though I may return to these sites tomorrow as a regular user, I will always remember the lessons I learned from applying this new perspective to some very familiar parts of my life.

Like what you read? Give Maxwell Dubs a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.