PROJECT BACKGROUND AND PROBLEM DISCOVERY
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.
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.
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.
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.
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.
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.
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
THE SERIES VIEW SCREEN
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.
With improved metadata, other features can naturally be extended -- for example, a search system that recognizes the same mental model.
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.
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.