My activities:

  • Developed persona
  • Developed user stories
  • Developed task flow and UI flow
  • Created Wireframes
  • Created screen mockups
  • Produced clickable prototype

Tools:

PROJECT BACKGROUND AND PROBLEM DISCOVERY

In this project I designed a new set of features for the Twitch web site, starting with the development of a provisional persona through clickable prototype using Sketch and InVision. 

At its core, this project focused on a page redesign that better reflects the mental model of an eSport fan vs. the original Twitch customer. Twitch is increasingly used by eSport leagues to stream and store video-on-demand content.

PROCESS OVERVIEW

For this project, I

  • started by creating a provisional persona, 
  • brainstormed user stories, 
  • focused on a main design objective, 
  • developed a task flow and UI flow, and from that 
  • made wireframes and the updated visual comps.  

I then created a clickable prototype using InVision which I was able to do some usability testing with to iterate on the design.

 

Additional info:

My Medium post about this project focuses on mental models in design.

Note that I am not affiliated with Twitch.tv.

 

Clickable Prototype Walkthrough

An example click-through is shown in this video.

 

PERSONA AND BRAINSTORMING

The provisional persona I created for this project is Hans. He is a teenager who follows StarCraft 2 and catches up on matches at night. 

Insight

One insight that came from this early brainstorming was that a core set of features I was considering helped to increase the proportion of time spent watching videos on the site, relative to the amount of time spent searching for videos. This helped me reduce the scope of my next steps to something that would work in my design sprint.

The provisional persona, Hans

Some sketches of how the new features can help Hans.

 

USER STORIES and TASK FLOW

Once some general ideas have been generated around Hans’ behaviors, needs and goals, I made a list of user stories (potential features) and a simple task flow tying these stories together.

Key design objective: save time!

 

UI FLOW AND SCREEN SKETCHES

With a focused task flow completed, I next drew out a interface screen flow diagram and sketched out some layout ideas to prepare for wireframes.

Organizational concepts inspired by other sites.

Screen flow sketch exploring ideas around marking Series as watched.

A six-up on organizing sets of videos.

 

SCREEN WIREFRAMES AND PROTOTYPES

Before making a clickable prototype, I needed to have some screens. This starts with wireframes to build the layout and elements that I needed to fulfill the user stories. Below I compare an existing screen with a wireframe mockup of a revised screen, and then a screen comp. 

 

THE HOME PAGE SCREEN

Current home page for the league -- a list of videos.

Wireframe for revised home page.

Final comp for revised home page.

THE SERIES VIEW SCREEN

Existing match (play video) screen.

Wireframe of revised series play screen (click to expand).

Final comp of series view screen.

 

CLICKABLE PROTOTYPE

Now that I had the screens, I was able to use InVision to put them together in a clickable prototype. The video of the flow is adjacent.  Note that it also includes the new league standings screen where Favorite teams can be marked.

 

INSIGHT

With improved metadata, other features can naturally be extended -- for example, a search system that recognizes the same mental model.

 

NEXT STEPS

Further usability tests on the prototypes are necessary to determine whether the specific implementation suggestions presented here are adequate to guide users in accomplishing the new tasks that are possible with the series-viewing interface.

 

Conclusion

By altering the represented model of the web interface to more closely match the user's mental model of how competitive games are organized, I was able to create a design that would improve the user experience. Not only could this improve the engagement of users on the site, but it could be used to intuitively expand features into search results, and potentially into other features.

An annotated page comp showing the potential for metadata-enhanced search results.