Less Fantasy. More Football.
Feel Like an NFL GM: The All-22 Desktop Experience
The All-22 desktop site transforms the complexity of fantasy football’s most advanced platform into a clean, visually appealing experience. My challenge was to design an interface that presented intricate analytics and scouting concepts in a way that was both accessible and engaging for users. By blending the sleek, professional aesthetic of the PFF brand with features and functionality inspired by other fantasy sites and even video games, the site offers a seamless experience. It strikes the perfect balance between advanced data and an intuitive, user-friendly design, ensuring users can navigate with ease while immersing themselves in a high-level fantasy football experience.
Timeline
The concept for All-22 was first conceived in 2016, but bringing it to life required a strategic partnership with an advanced analytics provider. After four years of pitching and refining our vision, we finally received the green light at the end of 2020. In May 2021, we launched a closed beta for internal testing with our data partner, and by 2/22/2022, we were ready to unveil the All-22 desktop site to the public.
Background
All-22 takes fantasy football to the next level by incorporating all 22 positions on the field, including offensive linemen, individual defensive players, and even punters and kickers. This innovative platform delivers a full roster-building experience, offering a competitive edge that goes beyond traditional fantasy leagues. By blending professional scouting concepts with advanced analytics, All-22 creates a dynamic and immersive way to strategize, compete, and win.
This section outlines the step-by-step approach taken to develop the All-22 desktop site, from research and planning through to design, development, testing, and ongoing optimization.
Research & Planning
We conducted thorough research by surveying desktop users to understand which features they most desired in the All-22 platform. We also analyzed user behavior to identify their most frequent activities. Additionally, we explored other fantasy football platforms and video game interfaces to create a design that was both intuitive and engaging, while maintaining a sense of familiarity for our users.
Design & Prototyping
Starting with low-fidelity wireframes, I mapped out all the features we envisioned for the All-22 desktop site. We then prioritized features based on their potential impact on user experience for the initial launch, ensuring we delivered the most valuable functionality first, with plans for additional features in future updates.
Implementation
Throughout the development phase, I worked closely with the development team to ensure the site’s functionality aligned with our design vision. We collaborated to prioritize features based on user needs and technical feasibility, ensuring that the site’s core features were seamlessly integrated and supported by a strong technical foundation.
Testing & Optimization
We launched the All-22 desktop site in a closed beta to gather early feedback from users. Through user interviews, surveys, and behavioral analysis, we identified areas for improvement and made iterative refinements. Post-launch, we continue to monitor user activity and gather insights to optimize the site’s functionality and enhance the overall experience.
This section highlights a few of the key pages of the All-22 desktop site, focusing on the most frequently used and most challenging screens from a UI/UX perspective. It explores how thoughtful design solutions drove user engagement and enhanced the overall experience.
League Home
The "League Home" page serves as the central hub of the All-22 desktop site, providing users with up-to-date information on league standings, matchups, and activity. With streamlined navigation through swipeable tabs, users can easily switch between the schedule, standings, and transactions. A built-in league chat feature fosters communication without cluttering the interface. The design emphasizes clarity and accessibility, delivering vital league information in a clean, engaging layout optimized for desktop screens.
My Team
The "My Team" page offers an interactive and detailed view of a user’s roster, organized into Depth Chart, Formation, and Roster sections for easy navigation. Horizontal scrolling tables display player details, such as team logos, weights, and stats, with subtle shadowing effects to enhance interactivity. Instagram-style news indicators around player images keep users informed about injuries or updates. This visually rich and functional page allows users to efficiently manage their teams while staying engaged with real-time information.
Matchup
The "Matchup" page provides real-time score tracking for both offensive and defensive players, offering a comprehensive breakdown of weekly performance. The page visualizes the platform’s proprietary scoring algorithm, transforming complex data into easily digestible information. The intuitive, clean design ensures that users can quickly access the critical details they need to monitor head-to-head matchups, making it an essential tool for every user looking to track player performance.
Draft Center
The "Draft Center" page is a feature-rich hub designed to enhance the user experience during the draft process. It includes a live draft ticker that keeps users informed of when it’s their turn to pick, who is currently on the clock, and how much time remains for each pick. The player overview section provides essential bio details like NFL team, date of birth, height, weight, speed, and college, ensuring users have the information they need to make informed decisions. A searchable table displays all available players, their positional weight, and rankings, while a feed of drafted players and updated draft results keeps everyone up to date. Users can view their roster and track how it’s filling out throughout the draft. The autodraft feature ensures that users who need to step away don’t miss their picks, while the draft queue allows them to bookmark players for future rounds. A league chat feature promotes communication between members, and the commissioner view allows the draft to be paused, picks undone, or even simulated if needed. The comprehensive design makes the Draft Center an indispensable tool for managing and executing a smooth, organized draft.