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.
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.
"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.
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.
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:
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
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
Fandom is fun
There's an immersive, exciting, and festive atmosphere around sports events.
Sports media can be confusing
Sports media can be too detailed or technical for people who don't follow sports to understand.
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.
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.
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.
ESPN's Green Bay Packers team page gives a lot of information, like sports stats, that a new sports fan probably won't understand.
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.
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.
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.
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.
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.
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*
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:
Grow fan knowledge
Gradually grow the user's knowledge of the Packers, football, and how to show fan support.
.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:
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.
A place for offbeat stories
It will showcase the history, eccentric stories, and personalities behind the Packers in engaging ways.
A concise and visual resource
It will use short/simple descriptions, pictures, and infographics to aid in fan learning.
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):
The updated home page
The updated team history page
The updated game highlights page
The user could click the top of the page to get a quick rundown of the Packers and their history
A team news page with offbeat/engaging articles
A "progress" page that lets users know how the team is doing in simple and visual terms
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.
Jodie Foster, a new Cheesehead
Next Project