TASK

Promoting Starz Originals with a few simple clicks. A website activity for affiliates of Starz to filter genres of entertainment resulting is recommended Starz Originals based on similar interests.

TEAM

Hyung Kim - Interactive Designer and Developer
Karlee Boillot - Interactive Designer

ROLE

Concept Development, Visual Design, Interaction Design, Prototyping

01. Problem
Identification

We needed to determine how short this activity could be to ensure the attention span of both the user and the customer. We also needed to identify and utilize the most common categories to filter by.

Demo Video

The user

Known Variables
Works with a headset on and has a computer with a secure internet connection in front of them.
Has access to Starz affiliate site where application will be hosted.
Can read to effectively communicate brief sentences regarding content.

Image attribution to Wikimedia and can be found at http://www.proglobalbusinesssolutions.com/

‍The intended user is a call center agent for a tv provider that should recommend packages including the Starz channels if the customer has similar interests to a Starz Original. This filtering system utilizes multiple categories for many types of consumers: Genre, Trending, and Popular Names, etc.

A Moodboard

A quick search on how to present visual imagery paired with short, valuable text. After a discussion with Hyung and the project manager, we decided to wireframe a menu that expands out and takes the user from one panel to the next as well as screens that load based on what the user selects.

wireframe sequencing

The first set relied on a boxed grid system that would populate a new page with content based on what the user selected. While this layout would remain clean, the user would have to click forward and backward numerous times to get the results.

Pros
One question at a time so it’s not overwhelming for either participant.

Cons
One question followed by another is time consuming and does not meet the needs of the agent.

Starz Wireframe 1
Starz Wireframe 2

The second layout set had a slide out menu anchored on the left that is always present so the user can always have access to edit information without starting over. A start over button is also placed on the screen to wipe information quickly for each new costumer our user is helping.

Pros
Access to all categories at once. Everything on one screen minimizes amount of clicks.

Cons
Agent has to be more open with questions rather than having guided questions.

Starz Wireframe 3
Starz Wireframe 4

02. design

The wireframes above work as multiple cards to select to then display similar Starz shows. The problem with this is the lack of categorization. Here the cards would have basic filtering terms all lumped together such as: "romance," "comedy," "50 Cent," or "teach me."

It was pertinent to have all of this activity to be hosted on one page utilizing screen real-estate optimization therefore choosing the second wireframe sequencing.

Invision Prototype

Project Details

Categories

Genres
Hit Shows
Star Power
Content/Themes
Mood

Interaction

Keeping all of the action on one screen, there is a left aligned main menu that reveals pushes out to reveal a submenu. Once the user selects at least one checkbox, content will then populate on the right side of the screen with a thumbnail of the Starz Original with a brief synopsis.

Final changes

This layout was approved but the visual design needed to be more on Starz branding. We inverted the colors to black and grey and added a tag line for each recommended show.

03. demo video

To give managers an idea of what the activity would look and function like, I created a demo video mockup before Hyung developed the working product.

04. retrospective

At the end of each project a retrospective helps me reflect on the challenges and success of the project.

CHALLENGES

Advocating for proper interaction design to non-designers.
Keeping the attention span of the user (call center agent) and the customer.

surprises

How simple we were able to make a filtering system with a limited amount of clicks.

tools used

Sharpie & paper, Sketch, Invision App, Adobe After Effects

Thanks for checking out my work.

Connect with me or shoot me an email at karleeboillot@gmail.com