CHEESEHEAD CHEATSHEET
INTRO TO INTERACTION DESIGN CLASS | FALL 2018
To help new sports fans connect with their new team, I created a website prototype that would grow team/sports knowledge in a friendly and unassuming way.
The Context
I was assigned with developing a project based on any subject of my choice for class. As a huge sports fan and huger fan of community building, I knew I wanted to create a tool to help a sports fan community become stronger and more inclusive.
This got me thinking: Often people grow up being sports fans and learn everything they need to know 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.
A young Cheesehead in his natural habitat
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
Cheeseheads could come in all shapes and sizes, and I tried to think like a
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
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 sports fans and non-sports fans about sports culture. Sports fans gave insight on some of the factors that led to them becoming and staying fans, and 'non-sports fans' gave insights on factors that led them to stay away from sports and those that could lead to them having an interest.
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. For example, when considering potential website layouts, I would think "What would Ben say about this?" and "What would get Ada's attention?"
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.
The Design Process
1. Interviews
2. Personas
3. Competitive Analysis
4. Alternative Sketches
5. Story Map
6. Paper Prototype
7. Prototype Testing
8. Digital Prototype
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.
Sal is a big sports fan and likely wouldn't use the site (anti-user).
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
Sports talk can alienate
Sports take up space in conversations, media, and American culture at large; non-sports fans can feel alienated from and intentionally avoid sports conversations.
Lana, whose boyfriend and son are bonding over college football, wants to rekindle her fanhood.
Sal is a big sports fan and likely wouldn't use the site (anti-user).
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.
ESPN's Green Bay Packers team page provides a lot of information up front, including statistics, that won't likely be understood by someone new to sports.
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:
Acme Packing Company, a Packers news site by SB Nation, can be overwhelming for a new fan who may not have much context about the team.
Cheesehead Cheatsheet will:
Sports talk can alienate
Packer Forum, a site for fan-generated news and gossip, has simply organized information and does a great job of building fan community. However, it presents lots of information and its text-heavy interface could get tiring.
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:
Traditional sports websites like ESPN and Acme Packing Company keep fans up to date on team progress, and are heavy on statistics and abbreviations that most football fans know. Fan-generated content sites like Packer Forum and Packers Everywhere create ways for fans to interact and share with each other.
After viewing these sites, I realized I wanted my site to have news about the team, but thought it should give more context behind the news and include definitions for sports terms. I also thought it should emulate fan content sites' ability to make fans feel like they're part of a large, proud family.
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.
Packers Everywhere, a place to see fan photos and find Packer friendly bars, is very simple and a great visual reminder for fans that there are many more people in the world just like them.
Packers Everywhere, a place to see fan photos and find Packer friendly bars
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).
“Friendship ... is born at the moment when one man says to another "What! You too? . . .” CS Lewis
The updated home page
The user could click the top of the page to get a quick rundown of the Packers and their history
Sports take up space in conversations, media, and American culture at large; non-sports fans can feel alienated when sports are brought up and may intentionally avoid or leave sports related conversations.
Potential fans can have a difficult time learning about their newly adopted team since sports media can be confusing, and way too technical for people new to sports -- which can lead to frustration of the would-be fan and abandonment of their growing fandom.
Potential fans can have a difficult time learning about their newly adopted team since sports media can be confusing, and way too technical for people new to sports -- which can lead to frustration of the would-be fan and abandonment of their growing fandom.
An aspiring fan might learn about sports through a) a sports video game, b) going to a game, c) watching a sports movie, d) playing the sport themselves, e) online research, f) talking to a patient, sports loving friend, g) printed media.
Title
Date/Duration
Location
Role
Context:
Challenge
Design Methods
Tools
Research Insights
Recommendations/Design
Next Steps
Impact
Team
The updated team history page
A team news page with offbeat/engaging articles
The updated game highlights page
A "progress" page that lets users know how the team is doing in simple and visual terms
Interactions in the prototype
This is an expanded version of the first sketch, laying out steps and the expected/hoped for result of each method.
To see the full Cheesehead Cheatsheet prototype (for desktop only), please click this link.
Next Steps
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).
Takeways
5. Story Map
Traditionally, this "wireframe" would lead to the next step of actually making a fully functional website; however, the prototype was the last step for the purpose of the class.
The culmination of my three months of design research was creating a digital prototype.
A translator
7. User Testing
8. Final Prototype
A young Cheesehead in his natural habitat; "Cheesehead" is a nickname for a fan of the Green Bay Packers.