From overload to efficiency: Rethinking the lineup builder
Context
Lineup building is at the heart of Sorare’s gameplay, allowing users to create competitive teams in this fantasy football game. SorareData already provided a robust lineup builder, leveraging advanced player analytics, which was widely embraced by our community.
However, lineup decisions are extremely time-sensitive, and users increasingly requested a mobile solution that would enable them to quickly build and edit their lineups on the go.
Challenge
Bringing the lineup builder to mobile required rethinking data presentation. The goal was to keep key insights accessible while reducing cognitive overload, ensuring a seamless and intuitive experience on a smaller screen.
My approach
I focused on delivering a first version with a user-centered design approach, focusing on usability over aesthetics due to tight deadlines.
I also ensured the feature integrated seamlessly into the app’s navigation, making it easy for users to locate and use.
In the second phase, we refined the web version, iterating based on user feedback and evolving the design over time.
Outcome
The mobile lineup builder quickly proved its value, becoming the third most-used feature on our app—accounting for 40% of all lineups built on SorareData and generating thousands of weekly creations.
Building on this success, we enhanced the web version and continuously refined the experience based on user feedback.
Over two years, the feature’s overall adoption rate increased by 38.9%, rising from 9% to 12.5%. Notably, 60% of paying users adopted the feature, underscoring its importance for both the game experience and our business model.
Bringing the feature to mobile:
a user-centered design process
Prioritizing key data for mobile
While effective, the web lineup builder overwhelmed users with visual clutter and excessive data. The limited screen space on mobile provided an opportunity to refine information hierarchy, surfacing only the most relevant details.
To achieve this, I led an online focus group with four users, the product manager, and my fellow designer. By reviewing the web version together, we identified the essential data points for decision-making.
Users highlighted the need for additional context, such as home/away indicators, and revealed gaps in their understanding of key metrics. These insights shaped our approach, ensuring the mobile design balanced clarity, usability, and critical information.
Lineup builder interface with emphasis on essential data points for decision-making
Ideating with the team
Despite these insights, the team was concerned about "data loss" when transitioning from web to mobile. To address this, we initially explored a split-view approach as a compromise.
While this structured the information, I raised concerns about its density—it risked recreating the cognitive overload issues from the web.
To refine the approach, I led a second round of ideation focused on simplifying the default view. This led to Pick Score, a high-level metric that consolidates multiple data points into a single, easy-to-read grade (AAA to F). By shifting complexity deeper into the app’s hierarchy, we created a more focused and user-friendly experience.
Additionally, I ensured the lineup builder felt consistent with Sorare’s interface, making onboarding easier for existing users.
Combining multiple data points into a single high-level metric: the pick score
Designing the user flow
With the player selection view taking shape, the next step was to design the overall user flow for building and managing lineups. We ensured easy accessibility by integrating a dedicated entry in the navigation bar.
To keep interactions intuitive, I designed the flow using familiar navigation patterns for iOS and Android, emphasizing modal interactions to keep tasks self-contained. The process was structured sequentially, mirroring the user’s natural mental model of selecting one player at a time.
User flow illustrating the lineup creation process
User flow illustrating the lineup editing process
Prototyping & testing the user flow
I built a horizontal prototype to preview and test the full lineup-building flow before handoff to development. Given the tight deadline, the goal wasn’t to create a highly detailed, fully functional prototype but rather a streamlined version focused on the core user need: building a lineup on the go.
Prototype demo video showing the lineup building process
We then conducted remote usability testing with five users, asking them to describe their understanding and expectations at each step.
Key findings:
Users with large galleries found it challenging to browse and select players efficiently in the mobile layout. Many requested filters and display settings similar to the web version.
Despite these concerns, testing confirmed the overall effectiveness of the solution for lineup creation, showing that it worked well for most users.
Refining the user experience
User feedback led to several refinements to improve usability:
Filters and Preferences were introduced as separate entries.
A player search function and an option to hide player pictures were added to streamline large galleries. However, due to back-end constraints, search was postponed for a future release.
In addition, I proactively proposed dynamically hiding parts of the user interface while scrolling—taking inspiration from YouTube’s mobile app. I built a quick prototype to validate its feasibility, and after discussing it with developers, we agreed to include it in the first release.
Demo video showing the interface adapting as the user scrolls
Handoff to development
To streamline development, I cleaned up the design file, extracted reusable components, and structured a dedicated "To Dev" page.
I clearly separated the initial release scope from nice-to-have features for future iterations.
Before development began, we walked the team through the prototype to ensure alignment.
Bringing mobile learnings to the web
To reduce cognitive load and visual clutter, I proposed applying key mobile improvements to the web version:
Filters and preferences were placed under separate buttons.
A split-view layout improved information organization.
The navigation bar was updated for direct access to the lineup builder.
I also advocated for a small but impactful user interface change based on Fitts’s Law: moving the "Add" button from right to left to reduce interaction time when editing the lineup view, making lineup building more efficient.
Optimizing over time
Making lineup building more intuitive & accessible
As part of ongoing optimizations, I led the team in introducing several refinements based on user feedback and design standards:
Replaced the split view with a side panel for player details, reducing clutter and improving focus.
Enhanced contrast to improve readability.
Introduced dark mode to support user preference and accessibility, ensuring a more comfortable experience in low-light environments.
Applied our design system to create a more consistent user interface, reinforcing familiarity across the product.
Google Calendar event for weekly design meeting
Enhancing efficiency
To further optimize lineup creation, we introduced a suggestion feature, allowing users to finalize lineups in just a few clicks.
I advocated for embedding suggestions directly within the lineup view instead of a disruptive modal, ensuring a seamless experience.
Screen recording of a lineup suggestion in the web app
Reflections & key learnings
What worked well
Iterative design and continuous user feedback loops enabled a natural, well-paced evolution of the feature.
Prioritizing core usability over aesthetics ensured that even the first version was functional and valuable.
Instead of trying to fix all usability issues at once, I would have listed them and addressed a few per iteration.
Early on, many usability flaws seemed like quick wins from a design perspective but weren’t always transparent in terms of dev workload. Over time, the team gained design maturity, naturally integrating usability fixes into the process.
Looking back, taking an incremental approach from the start would have saved time while ensuring a high-quality experience.
Next up
This case study is part of my work optimizing SorareData’s core features to enhance usability and engagement. Head back to the Core Features overview to see how I tackled other key areas like the Gameweek Center and Player cards.