@Crew, End-to-end Design
of an App for Sports Fans

HEAD OF DESIGN: April – October 2021

A group of veteran tech entrepreneurs approached me in early 2021 with an invitation to join a stealth start up targeting American Sports Fans. As Head of Design (sole designer) I was to put collaborate with Head of Product and Dev to identify the opportunity and build an MVP before the NFL season began – we had 7 months.

The Problem

The founders were passionate about the space but weren’t clear on the target audience. Which Fans, the old skoolers or the newbs? The founders were also unclear about the future of Sports Content and consumption, it was clear that the phone was changing the way Fans consumed and shared their passion, but how?

We gathered some secondary and industry research which revealed that Sports was treated like News:

  • Young Fans don’t watch live broadcasts ➟ they watch games asynchronously on their phones
  • Young Fans find live broadcasts too long ➟ they prefer highlights
  • Young Fans don’t participate in online, anonymous sports communities ➟ they prefer to talk about sports with intimate groups of friends.

How might we create a mobile experience that seamlessly facilitates the conversations, emotional tone, and digital lifestyle of Young Sports Fans?

My Roll

  • null
    PROCESS

    Group Sketch
    Dot Vote
    Wireframe
    Prototype
    User Test
    Present and Sign-off with Stakeholders
    Annotate for Dev

  • null
    TOOLS

    Paper and Pen
    Miro/Mural
    Figma Design System
    Figma Prototype
    Interviews, PlaybookUX
    Slides, Zoom

  • null
    PEOPLE

    Founders
    Product
    Developers
    Researcher
    Freelance UX Designers

Discovering the Opportunity

Target Users

Avid American Sports Fans who are mobile natives age 21-35

We formed a diverse group of 12 users we could test with on a weekly basis to gather qualitative data. We also conducted 3 surveys and 4 PlaybookUX tests for quantitative data.

Collaboration on Features

To kick off our weekly Design Sprints, I facilitated ideation collaborations with the team to see if there were novel, innovative ideas. This was done through 8 min sketching, dot voting etc. The ideas that surfaced here were rolled into our weekly testing of prototypes to make the most out of our research phase.

Weekly Design Sprints

I led weekly Lean Design Sprints of ideation → prototype → testing cycles to quickly narrow down on our opportunity space and get input so we could pin point the feature set for the Product. We did 8 weeks of these sprints.

  • Day 1: Led brainstorming sessions with the team
  • Day 2 & 3: Created lean prototypes
  • Day 4: Tested with users
  • Day 5: Reviewed results
Lean Prototypes

The Solution

MVP Chat Foundation

After looking at all the user feedback from our design sprint cycles we identified the core product features. We also validated the key user needs.

  • Users need a safe and friendly space to talk about the sports they love
  • Users need to asynchronously follow and/or catch up with what happened in a game
  • Users need to find conversation starters to keep the banter going

In other words, Friends connecting with Friends is what matters. The conversations are a priority.  So the chat became the primary context for shared games, wagers, and statistical content.

A Chat App foundation delivering stateful, realtime NFL game projections, statistics, and friendly wagers.

Chat Foundation Design POV: The chat should have a pulse of it’s own with stateful shared content that is as full of energy as the conversation.  The conversation is the context from which to start designing.

MVP: NFL Live Game Feature

There is a rhythm to the conversations that sports fans have and it’s usually around the games. While many fans love to watch the broadcasts, there are a growing number of fans who catch up with the game after the fact. Or there are fans who can’t watch all the games that their friends are talking about in chat but they still want to participate.

The Game features included:

  • Machine learning projections based on years of statistic of teams and players.  Projections are presented as a Before-the-game experience
  • Live stat updates during the game shows how teams and players are doing against the projections
  • Live games have a game chat for a fan’s chat groups so that friends can follow the game together and chat as a second screen experience. All the touchdowns and big moments are captured in the game chat.
  • After the game, asynchronous friends can come in and experience the conversation and even interject and reply to the conversation.

Game Design POV: Use the timeliness of the game clock as a framework for component states in order to structure conversations and provide both synchronous and asynchronous experiences.

MVP: Friendly Wager Feature

The wagers were a late addition to the app. We wanted to support fans who wanna bet with each other, could be some spare change, or a beer. These types of challenges are common and making it easy to do inside of a conversation was a huge opportunity.

  • Wagers are shared into a group conversation and they are open to anyone in the group – who want to owe me a beer?
  • Wagers are stateful and are automatically updated in the chat with the entire group knowing who won and who lost the moment the game is over.
  • The Wager Ledger keeps a tally based on friends so you know how much your friends owe you.

Wagers Design POV: Wagers are to be friendly and social, designed for many, small cash wagers as well as inexpensive (Bet you a Beer) and fun experiences which are offered to the group for general participation.

Supporting Development

For Lean Product Design, documentation can’t bog down the design process, especially on small teams with a lot of demands. Yet it’s essential to have healthy lines of communication, especially when collaborating with a global dev team. In my figma files, I supported dev using:

    • Mockups that could be played as a prototype to view interactions and transitions

 

    • The Figma canvas had wireflow arrows around the mocked up screens to show interaction flows, decisions, state changes and other annotations

 

  • A naming convention that tied everything together from site map to mockups to annotations.

Reflections

While I’m proud of the solutions and the work I did for the Crew app, the design constraints were frustrating at times. When I look at the work now, I wish I could have used team logos.  The visual landscape for sports graphics is so vibrant and rich, even loud, and when I look at the app, it lacks some energy. If I could iterate it, I would find other ways of infusing the app with more fun.