Cheesehead Cheatsheet

To help new sports fans connect with their new team, I created a prototype for a website that would grow fan knowledge in a friendly and unassuming way.

CC home page with screen.png

The Context

Often people grow up being sports fans and learn everything they need to know about their team from a young age. But, what about adults who are considering being sports fans for the first time? Where would they go for information? What would speak to them? What would make sense to them? What would convince them to be a fan? These questions led to the two questions that would frame my research process. 

packer giphy.gif

"Cheesehead" is a nickname for Packer fans

The Challenge

What should a site that welcomes new sports fans look like? What should it feel like? 

I looked to address these central questions, eventually using the Green Bay Packers football team and their potential fans as a test case. Though I’m not a Packer fan myself (Go Niners!), I thought it would be helpful to look through the lens of a team/team culture I wasn't familiar with to better uncover potential solutions. 

newjapanese.jpg

Japanese Cheeseheads during a pilgrimage to a Packers home game

My Role

I was the only person working on this project, making me the user experience researcher and designer. 

Chris Cheesehead_edited.png
dog.png

I tried to think like a new Cheesehead during the design

process; and they could come in all shapes and sizes 

The Design Process

I followed the class' design process, which was geared towards thinking about the problem broadly, and gradually narrowing the focus to more tangible solutions. 

 

The process steps were:

1. Interviews

2. Personas 

3. Competitive Analysis 

4. Alternative Sketches 

5. Story Map 

6. Paper Prototype and Testing

7. Finalize Goals and Concepts

8. Digital Prototype 

1. Interviews

To gain a better understanding of the problem space, I interviewed long-time sports fans, newer sports fans, and non-sports fans about sports culture. 

Here's a few things I heard: 

cap.png

Sports knowledge is learned over time; most often, someone initially picks up this knowledge  by living in a sports-loving environment early in life.

Fandom is learned

support.png

Fandom gives fans a built-in community, something they have in common with strangers, and rituals and traditions to learn and look forward to. 

Fandom is community

confetti.png

Fandom is fun

There's an immersive, exciting, and festive atmosphere around sports events. 

Sports media can be confusing

maze.png

Sports media can be too detailed or technical for people who don't follow sports to understand. 

theater.png

Stories drive interest

There’s on and off-field drama, comedy, and human interest stories that keep fans constantly engaged (and could engage non-sports fans).

2. Personas

Based on the interviews, I created personas of new and potential sports fans. These fictional profiles gave me "people" I could empathize with and solve needs for throughout my design process. 

Persona - Ben Vu.PNG

Ben wants to learn about a soccer team so he can understand the action on the field when he goes to games with his girlfriend. 

Persona - Ada Okafor.PNG

Ada just moved to a football-crazed town and is excited to learn more about what that craze is about. 

Whether it's to spend more meaningful time with loved ones or help adapt to a foreign culture, I realized that I made personas whose new interest in sports are all linked to their want to belong and connect with others. Knowing that my site could help them address their deep-seated motivations made my job as a designer even more compelling and important to get right.

3. Competitive Analysis

Then, I compared different Packers-related websites and how they presented information. Doing this gave me some ideas I could incorporate into my website and design concepts to avoid.

Screen Shot 2019-03-09 at 8.30.39 PM.png

ESPN's Green Bay Packers team page gives a lot of information, like sports stats, that a new sports fan probably won't understand.

Screen Shot 2019-03-09 at 8.29.18 PM.png

Packer Forum, a site for fan-generated news and gossip, does a great job of building fan community. However, its text-heavy interface could get tiring. 

Screen Shot 2019-03-09 at 8.28.27 PM.png

Packers Everywhere, a place to see fan photos and find Packer friendly bars, is a great visual reminder for fans that there are many more like them. 

After viewing these sites, I realized I wanted my site to have news about the team, but thought it should add more context behind team news and include definitions for sports terms. I also thought it should emulate these sites' ability to make fans feel like they're part of a large, proud family. 

 

This step also made me appreciate how much Packers content is already out there. It made me think that my site could act as a way for new fans to "kickstart" or ramp-up their Packers knowledge to the point that the other sites could make sense to them. 

4. Alternative Sketches

Websites are, of course, one of many ways to learn about sports. I brainstormed a few other methods, which also gave me ideas for features and feelings to incorporate into the website. 

Alternative Sketches.png
Alternative Sketch 2.png

Reading about sports is one way to learn, but this step inspired me to think of more interactive and engaging ways to give information in the site, like short video clips and "Buzzfeed-style" quizzes. 

5. Story Map

I thought of different activities a new fan may want to do and different topics they would need to know, including some of the unspoken etiquette of fandom. These would serve as guideposts when creating the paper prototype.   

Cheesehead Post Its.png

Through this exercise, I realized how much the new fan needs to learn, which led to me thinking about ways to introduce those topics in the website.

6. Paper Prototype

I sketched pages and interactions for the website based on all the insights up to this point. This step was important because it let me ideate quickly and easily, and gave me a way to get real feedback from others. Below are a few sketches from the prototype, but if you want to view all the pages and how they interact with each other, please see the video a little further down.   

Mich Oral History darj.png
Mich Home Page dark.png

The landing page provides a short description of the site and exciting reasons to be fan. 

The team's oral history, told by fans and players, is one of the ways to learn about the team's past. 

Mich Gam3 6 dark.png
Mich Quizzes dark.png

The game recap has game highlights, short summaries, and infographics of team progress.  

Quizzes are a fun and interactive ways to build fan knowledge.

A paper prototype demonstration 

The paper prototype acted as a rough draft to what the digital prototype would be. It allowed me to demonstrate layout and content ideas that were then refined after receiving prototype feedback from classmates.

 

Changes I made as a result of feedback include:  adding more offbeat content to the news page, reordering main menu items, reorienting some of the site's buttons, and adding 'about the site' and 'how to use this site' features to the footer menu. 

Note*

2000px-Michigan_Wolverines_logo.svg.png
Screen Shot 2019-05-01 at 11.04.06 PM.pn
1280px-Green_Bay_Packers_logo.svg.png
Screen Shot 2019-05-01 at 11.04.02 PM.pn

You may have noticed that my paper prototype is about the University of Michigan Wolverines football team, not the Packers. For a moment, I had considered switching the site to be about the Wolverines. However, days after I sketched the prototype, Michigan lost badly to archrival Ohio State. My heart was broken and I couldn't bear spending the rest of the class reliving those bad/sad memories... so I switched back to designing a Packers-centric site. 

7. Finalize Goals and Concepts

After user testing the paper prototype and having some time to reflect, I made the following goals for the digital prototype:

Cheesehead Cheatsheet will:

plant.png

Grow fan knowledge

Gradually grow the user's knowledge of the Packers, football, and how to show fan support. 

link (1).png

Build fan loyalty and connection

Make users feel like they're part of the Packers' living history and something bigger than themselves.

Cheesehead Cheatsheet will feel like:

laugh.png

A patient friend and translator

It will talk to the user in an accommodating and friendly way, translating football concepts into well-known words and ideas the user likely already understands.

unicorn.png

A place for offbeat stories

It will showcase the history, eccentric stories, and personalities behind the Packers in engaging ways. 

contract-arrows.png

A concise and visual resource

It will use short/simple descriptions, pictures, and infographics to aid in fan learning. 

bridge.png

A bridge to more

It will build knowledge to the point that the user could keep up with/ connect with traditional football media and long-time fans if they wanted to. 

8. Digital Prototype

This digital prototype, or wireframe, does a great job of embodying what the final, fully-functional website would look and feel like. As the culmination of my three-months of design research, I was able to pour everything I learned into the prototype. The following are sample pages made with Sketch (and site interaction made in InVision): 

Home Page.png

The updated home page

Screen Shot 2019-03-26 at 9.44.28 PM.png

The updated team history page

Game Recap.png

The updated game highlights page

Quick Start.png

The user could click the top of the page to get a quick rundown of the Packers and their history

Team Stories.png

A team news page with offbeat/engaging articles 

Season Progress.png
Screen Shot 2019-03-26 at 9.44.28 PM.png

A "progress" page that lets users know how the team is doing in simple and visual terms 

Screen Shot 2019-05-02 at 10.23.07 PM.pn

Interactions in the prototype 

To see the full Cheesehead Cheatsheet prototype (for desktop only), please click this link. 

Next Steps

To further develop the site, I would create more iterations of the site's concept and layout with potential users, do in-depth Packers research, and start populating the site with content. I would also look to bring in talented Packer fan-writers to help create content for the site --- welcoming the Cheeseheads of the future with clarity, enthusiasm, and heart.   

5vXp.gif

Jodie Foster, a new Cheesehead

Next Project