Mental Models in Design

An example using eSports on Twitch

Rob Tapella
About eSports

--

Have you ever used a product that was so perplexing that you needed to learn a bunch of new vocabulary just to understand the instruction manual? Have you ever given up on a product because it didn’t think the way you do? Do you want to improve user engagement by helping people love your product more?

If so, understanding mental models can help you to:

  • Make something more intuitive.
  • Increase engagement (time/user/visit) by making users’ time with your product more effective and rewarding.
  • Evolve your product to better serve new markets.

How Twitch works

As a example of how mental models can be used to impact design decisions, I will use the video game streaming site Twitch.tv. The site has garnered a huge following and was recently acquired by Amazon for almost a billion dollars. Video game players can use Twitch to live stream their games with commentary while interacting with the live audience via chat. Videos can also be watched after the live stream has completed.

Mental models vs. represented models

Due to its origins as Justin.tv — effectively a self-produced live reality TV or video blog — the represented model in the Twitch interface uses is focused on video streamers who produce videos. Viewers watch their favorite streamers. This implementation reflects the initial market that Twitch has developed, and has matched the viewers’ mental models well. This means that the viewers internalized concept of the world (my favorite streamer produces videos) matches the way that the Twitch web site has represented it (streamers can create videos and publish videos).

Mental model vs. represented model for the existing Twitch product and target user.

Simple enough. So what’s the problem?

Enter a new market: eSports

One increasingly popular use of Twitch is to live stream eSport competitions and to publish the resulting videos. Twitch became fundamental to many eSport competitions because it was a reliable live-streaming video platform. eSport is basically competitive video gaming that is organized into leagues, seasons, or tournaments in a manner similar to traditional sports or gaming competitions.

The base functionality of live-streaming video was initially adequate, but the growth in eSports encouraged many fans to create alternative interfaces to better incorporate the mental model of an eSport fan.

The eSport mental model looks something like this: a series of games is played by teams that have players. The teams are ranked. A fan has favorite team and favorite players as well as leagues that they follow. You can see that this model is more complex and rich than the existing represented model in Twitch. The eSport streamers have attempted to work around the existing limitations by creative use of video labels and the streamer information page.

Mental model vs. represented model when considering eSports.

Twitch has not updated its product to reflect this, which could be an opportunity to form deeper engagement with eSport fans — for example, many eSport leagues now post their videos-on-demand (VODs) to YouTube because it is slightly easier to organize than Twitch is. Thus, Twitch may start to lose viewers of VODs to other services. Whether Twitch believes that it is valuable to cater to eSport viewers vs. their traditional live stream audience is another story, and up to the business strategy and growth priorities.

Design suggestions

Based on the mismatches in the eSport fan’s mental model vs. the represented model, here are some suggested screen revisions.

A comparison of the existing and suggested revisions to the home screen.
A comparison of the existing and suggested revisions to the match view screen.

Design Details

I have highlighted the elements of the revised screens that fill the missing elements of the eSport fan’s mental model.

Some suggested revisions to the main video list — here converted into a list of best-of-five series played in the league.
Some suggested revisions to the view video screen: it now shows an entire series of games, each annotated appropriately. Information about the series is clearly split out and favorite teams are indicated.

How can I understand users’ mental models?

To find mental models, you need to do some qualitative user research. Other than listening to users and watching them perform whatever task is relevant to your product, you can also try things like having them draw out and label their view of the task. It may also be enlightening to do card sorting exercises to discover how your users organize things on their own. Comparative research of similar or analogous products may also be useful — for example, you could look at the FIFA or NBA sites to understand how team sports are organized and presented vs. how eSport might be presented.

The key is to avoid leading the users with your represented model. Instead let them lead you to their mental model.

Tell me more about this project

Oh, so glad you’re interested. Visit my portfolio site to see more depth on the process of developing a provisional persona, coming up with user stories and task flows, UI flows, and ideating around the interaction design.

Note that I am an no way affiliated with Twitch. I am a user of their product and an eSport fan.

--

--

Rob Tapella
About eSports

UX Designer @nasajpl in Los Angeles. Previously a product manager @pacbio and @appliedbio. @tradecraft alum.