Enhanced Reading Experience

As The Players’ Tribune grew, it became evident that we needed an alternative way for fans to consume content and engage more with stories. The current reading experience was linear, long and felt more like a book rather then enthusiastic and exctiing. Our job was to give our fans a memorable experience in article.

While I was at The Players' Tribune, My role shifted from being a Visual Designer to a Product Designer. As the start-up expanded, so did the story and TPT was now a product first company. Below is a showcase of explorations, live deliverables and visual executions for a wide range of projects. Each section is divided with a brief explantion and a break down explaining the procress. Hope you get to enjoy and please visit playerstribune.com for more!

While I was at The Players' Tribune, My role shifted from being a Visual Designer to a Product Designer. As the start-up expanded, so did the story and TPT was now a product first company. Below is a showcase of explorations, live deliverables and visual executions for a wide range of projects. Each section is divided with a brief explantion and a break down explaining the procress. Hope you get to enjoy and please visit playerstribune.com for more!

Agency: The Players' Tribune  
Role: Lead Product Designer
Year: 2019

Client: The Players' Tribune 
Agency: The Players' Tribune  
Role: Designer & Product Design
Year: 2016-2019

Client: The Players' Tribune 
Agency: The Players' Tribune  
Role: Designer & Product Design
Year: 2016-2019

Overview      Ask      Research     Define Problem      Opportunity     Principles      Ideation      Iteration

The Ask

The Ask

Find a unique way for our audience to interact with their favorite athletes in a more humanistic approach.

Overview      Ask      Research    Define Problem      Opportunity     Principles      Ideation      Iteration

Research

Research

Before designing, my team and I started with defining research methodologies. The purpose was to find painpoints, behavioral patterns and learnings from our current audience.

Overview      Ask      Research    Define Problem      Opportunity     Principles      Ideation      Iteration

The Findings

The Findings

Not enough Excitement

Users become frustrated when a good story is finished. It became evident that our users wanted to experience more of what they recently read.Our users felt that photos weren’t enough of an editorial experience for them to feel attached. They needed an alternative media experience.

 

Not enough Engagement

Users become frustrated when a good story is finished. It became evident that our users wanted to experience more of what they recently read.Our users felt that photos weren’t enough of an editorial experience for them to feel attached. They needed an alternative media experience.

Overview      Ask      Research     Define Problem      Opportunity     Principles      Ideation      Iteration

The Problem

The Problem

Users don’t have a
streamlined experience into new content. They are blocked from experiencing a deeper connection with an athlete through reading.

Article_1
Article_2

At the end of each article, there isn't a way to explore new, recent or relative stories about that athlete. Through our findings we found that users wanted the story to continue.

Overview      Ask      Research     Define Problem      Opportunity     Principles      Ideation      Iteration

Opportunity

 

Opportunity

Help our audience read athlete stories more efficiently, while providing an immersed experience throughout the reading duration.

Overview      Ask      Research     Define Problem      Opportunity     Principles      Ideation      Iteration

Design 
Principles

Design 
Principles

1. Clarity

Define what a user generated story looks like while making the viewing experience extended by giving the user a seamless intigration into more content.


2. Efficiency

Help the users navigational path from one story to another while giving them a way to interact in a non competing way with the article, free of distraction.

Process Document

Design language is like any other language. Misunderstandings arise if the language is not shared and understood by everyone using it. The purpose of this is to align everyone on the same verbiage and understand how the process works. When beginning each of these prototypes we always start with Concepts. Concepts are the overall abstract idea that we want to discover. Within each of those concepts we can explore different ways to have the user accomplish the goal. We are calling those, Flavors. Flavors are a great way that we can explore variations of the concept. There can be multiple variations during this phase. After we have a breath of Flavors, it’s time to explore the Flows. Flows are the path taken by a user to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome. There can be a variety of flows for each flavor to achieve the goal.

Design Flow Chart

Overview      Ask      Research     Define Problem      Opportunity     Principles      Ideation      Iteration

After defining the problem and strategy, my team and I developed concepts to help define and validate our hypothesis.

We did these through 3 concepts.

Multimedia Article
Timeline

Our team wanted to explore two different ways to give our audience a new experience while in story. The idea was to split users, and A/B test the concepts. We explored two ways to dig into the athletes life experience through the story. One way we did that was designed a timeline experience to help the reader understand visually the time frame they were in.

Product Mock
Article Homepage
Desktop HD
Desktop HD Copy
Desktop HD Copy 2
timeline_1
timeline_2

Multimedia Article
Parallax

This concept allowed us to recreate the story telling process which included multimedia assets via parallax paging. This gave our user much more access with engaging with an article. These pages were a slide up sheet that exposed a brand new experience per page.

fullscreen_1
Article Homepage
Audio Telling Story
Audio Telling Story-
Desktop HD Copy 2
paralax_1
paralax_2

Epilogue Style

Fans were extremely excited to read an article produced by their favorite athlete, but whenit was over, they were sad. Our mission with this concept was to have a continuous reading experience where there would be bonus content at the end of an article. Exposing more of an opportunity for the user to read more.

Epilogue Flow_Annotations
low-mid wireframes

Interactive Content
In Story

Through research our team unearthed that our users wanted to interact with the content in article. After brainstorming numerous options and designing wires, we prototyped a concept that would allow the user to tap in-line content. This would provide a deeper detailed description of the article highlighted.

Annotated screen
Rap Genius Concept
Desktop V

Testing & Feedback

We test not to prove that it works, but to test for behaviors and pain points. Testing was conducted during the discovery phase to identify the biggest pain points for our users. The way we approached this was through a think aloud protocol. It allowed the user to clearly state what was on their mind. Taking notes and organizing them into a doc helped us stay the course.

A quick over view of how we structured testing: 
• Hypothesis/Conjecture
• Considerations
• Open Questions

This would help me when setting up individual interviews. After synthesizing the notes, I would share with my team and get their consolidated feedback on learnings we have found. This would help the team decide what direction and concept would make sense to pursue.

Impact to Users

After days of brainstorming, sketching, having healthy conversations and developing we created 3 prototypes for our users to interact with. We don’t have full analytics from this project, but from an overall perspective, fans and consumers who helped us test it seemed very excited and enthused with the explorations presented to them. They felt that the TPT experience would be their daily dose of sports news.

Project Learnings

We don’t know what we don’t know. User research in the early development stages is very important. Engineers are just as much of designers as we are. We must understand and work cross-functionally to fully understand feasibility and restrictions. Always ask Why. Ask your users deeper questions and allow them to be comfortable when answering. Give them time because the answer they may give, won’t always be what they truly mean. Try and dig a layer deeper when unearthing and synthesizing notes, because the golden answercould be there.

Process Challenges

One of the most exciting challenges I encountered along the way of this project was creating a new experience for our fans. To be apart of something that was new at TPT was going to be a big hump to get over. Another one was working with engineering on feasibility. It was evident that we needed to work hand and hand, so a big challenge was having empathy and understanding their limitations. The goal was to get prototypes developed quickly get into the users hands for feedback.

Interested in working together? Let's connect.
Email me krisgross07@gmail.com

© Kris Gross | San Francisco | 2019