UX/UI case study of a football players’ platform, informed by research in the Netherlands and the US
Ever encountered a mid-project design change? Is it a setback or an opportunity for improvement? We prepared an article that delves into our journey reinventing the football platform, revealing how research guided us through design changes and enabled us to adapt swiftly. Follow our progression from segment identification to UX refinement, resulting in a 22% increase in sign-up conversions and a 60% success rate in reaching the payment stage. As bonus content discover the added benefits of collaboration between design and business, expanding beyond the initial scope.
Hi, it’s Anthracite. We’re a dedicated design studio focused on digital product creation with design thinking. Collaborating closely with startups and IT companies, we’ve been working with FOOB, a business serving football enthusiasts.
0:0 Kicking Off
FOOB organizes football activities like leagues and seasons, accommodating both teams and individual players in structured play. Beyond the game, FOOB is fostering community through spaces like the FOOB’s bar for players to bond over matches.
The FOOB platform consisting of a website, registration form and PWA has been in existence for over a decade. However, over the years, it has experienced a decline in its metrics.To stay competitive against emerging rivals, FOOB has decided it’s time for a change and came to us.
0:1 Problems and Tasks
The primary issue centered around the ineffective generation of leads. Client’s platform struggled to capture visitors’ interest and convert them into customers with weak sign up form. Our scope was to conduct the research to identify customer segments, their pain points and barriers to start engaging with the product. Based on the results redesign the platform with development of new UX/UI for the platform.
0:2 Metrics and Analytics
Initially, FOOB lacked a structured analytics system, relying on Excel sheets and a CRM solution for sales management. To address this deficiency, we swiftly integrated Google Analytics to study user behavior on website and platform, while utilizing Hotjar to delve into sessions in detail. This step allowed us to verify bottlenecks in the sales funnel and in future to effectively measure the performance of the old design versus the new one also paving the way for setting up A/B tests in the future.
Upon initiating user behavior tracking across the website, we made a notable observation: the absolute conversion was 0.01% of visitors who were reaching the sign up form page, ultimately failing at payment. This trend persisted as our work progressed. It became evident that the website’s failure in onboarding new customers, coupled with a weak UX in the sign-up form, deterred the majority of users, resulting only in cold leads.
Consequently, we recreated the website map, meticulously identifying all existing pages (>100 as FOOB exists in many cities) the site UX and rectifying potential bottlenecks, dead loops, and outdated pages. In comparison, you can see the alternative website navigation to foster enhanced with all problems worked around and reducing clicks for users to achieve their desired outcome.
Simultaneously, we were conducting extensive user research in the USA and Netherlands, given FOOB’s operations in both countries.
0:3 Research Challenges
Given FOOB’s longstanding presence in the industry, our initial focus was on identifying and validating existing segments to ensure alignment with the most attractive market segment. Starting with research was imperative, as the potential differences in football players’ motivations across countries was an unfamiliar field for us.
Goal:
- Discovering existing customer segments and identify their high-level jobs
- Analyze segments and suggest what segment is the most promising for FOOB and where it could compete effectively
- Formulating insights and hypotheses for UX/UI improvements for future tests
Framework
In our research, we aimed to cover a wide array of pertinent questions within a single interview, avoiding strict adherence to one classic framework to ensure ample data for analysis. Hence, we devised a modular research approach, merging the most effective elements from relevant frameworks.
- JTBD framework for interviewing to first validate segments and then to work with segments preferable for business to explore the entirety of their job tree. This process enabled us to develop and validate initial hypotheses, refining our understanding of customer motivations, barriers, and triggers influencing the decision to engage with product;
- CustDev to gather additional factual information about customers’ football engagement habits and preferences;
- Monadic testing to assess two design concepts separately, ensuring unbiased feedback from respondents on their preferences and perceptions;
- As a cherry on top, quick usability testing to measure the task success metric with existing flow at the end of interview we were conducting. We assigned participants the task of registering for a team or solo. This helped us uncover atypical bugs across different devices and gain insights into potential issues that might confuse customers in the current flow.
Recruitment
- Our client provided a list of satisfied and dissatisfied customers, constituting 50% of respondents;
- We recruited additional participants via Facebook targeting football enthusiasts as non-users of any solution;
- Instagram to recruit competitors’ customers and competitors’ customers;
- To optimize cost efficiency, personal channels were utilized while ensuring respondents were not connected to each other.
0:4 Insights
The majority of respondents developed a deep attachment to football from an early age, fostering a lifelong passion for the sport. Understanding this profound affinity for football is crucial for tailoring FOOB’s offerings to resonate more effectively with potential customers.
Job Stories and Segmentation
First Time Activation: Focuses on initial engagement, capturing motivations, barriers, and desired outcomes when individuals first encounter FOOB.
- Expats to NL or US
Newcomers to a country seek opportunities to socialize and bond through football, fostering a sense of community and familiarity in their new environment.
“[when] I came to a new country for me [I want] to socialise in the community and find people with the same interests [so that] to get a sense of belonging in community, to feel less alone and less in the dark”
Barriers: Language barriers, skill mismatches, fear of playing with professionals, and uncertainty about where to find suitable facilities pose challenges. - Competitive Players:
Individuals seeking competitive football experiences prioritize guaranteed, fair, and safe play environments where winning holds significance, enhancing their sense of skill superiority.
“[when] We were specifically searching for football with competitive mode [I want] to win and have a good referee who can watch the game [so that] to feel the excitement of the real game”
Barriers: Waitlists and difficulty in finding suitable playing partners hinder accessibility. - Convenient Commuting
Players prioritize proximity and ease of access when selecting a football venue, aiming to minimize commuting time for a seamless experience.
“[when] I was looking for a place to play football [I want] it to be in a biking distance [so that] I won’t spent extra time commuting”
Barriers: Lack of clear location information, absence of facilities in their town, and excessive commuting distance (preferably within 15 minutes by bike) impede participation.
Continue Playing: Explores experiences of ongoing users, understanding motivations, encountered barriers, and factors contributing to sustained engagement.
- Competitive Players/Team
Competitive players desire meaningful victories to affirm their skill and team’s prowess, seeking organized, competitive gameplay experiences.
Barriers: Inadequate rewards for winning and occasional team absences disrupt the experience - Individual Players without a Team
Solo players seek organized football experiences to hone their skills without the stress of assembling a team, emphasizing structured gameplay.
Barriers: Difficulty in finding suitable partners and apprehension about social dynamics hamper participation.
Second Level Job: Delves deeper into motivations of advanced users, uncovering higher-level goals driving continued involvement with FOOB.
- Fitness Enthusiasts
Individuals prioritize football as a means of staying fit and enjoying social interactions, seeking fulfillment and satisfaction through physical activity.
Barriers: Risk of injury, match cancellations, and facility limitations impede consistent participation. - After the game
Players value post-game social interactions for bonding and community engagement, fostering meaningful connections beyond the match.
Barriers: Dislike for social aspects of football and disappointment following match cancellations affect post-game engagement.
Determining FOOB Segment
To determine the preferable segments, we utilized these factors: Payment capability, frequency of usage, job significance, segment size, and competitiveness with existing solutions were key factor.
FOOB’s ideal segment encompasses players seeking social connections through football and those driven by competitive aspirations.
Less of FOOB Segment: Players solely interested in football for skill mastery or fitness, without emphasis on social interaction, are deemed outside FOOB’s target segment. These individuals are content with current solutions that prioritize gameplay over social aspects. For those prioritizing fitness, alternative sports like paddle or tennis may better suit their needs as these sports rely less on a team.
With the analysis done, we were able to understand for whom we are designing. This will enable us to generate value for the right segment, which already has a job that FOOB can do better than competitors.
0:5 Design Process and Implementing Research Findings
Following the determination of the most promising segments for FOOB, we gather all our hypotheses. We named it “hypothesis pool” as at some point we were feeling that we were drowning in them. To avoid it these hypotheses are then sorted using the ICE-method scoring, which prioritizes ideas based on their Impact, Confidence, and Ease of implementation. Commencing with the most impactful and feasible hypotheses, we initiated our design process.
Each block on the website addresses a specific hypothesis, ensuring that our design decisions are grounded in user insights and data-driven assumptions. We introduced a storytelling concept on the main page, where each block served a specific purpose, catering to user needs and addressing potential barriers. This design aimed to enhance user engagement by providing relevant information and clear calls-to-action.
For the visual style, the choice of big, bold fonts ensures clarity and readability, making important information stand out prominently. Decision came after conducting a benchmark analysis as we wanted to make FOOB outstanding. Additionally, the strong grid system provides structure and organization to the layout.
The Trophy Significance
The hypothesis asserts that the trophy serves as a tangible embodiment of the team’s collective effort and dedication throughout the season, symbolizing their shared accomplishments and reinforcing camaraderie. name the hypothesis
The Balanced Engagement
Suggests that individuals seek safe and moderate participation in recreational activities, viewing them as essential “me time.” They value fair play and reliability, which contribute to their overall enjoyment and satisfaction during leisure pursuits.
The Team Progress Tradition
Proposes that individuals derive satisfaction from witnessing their team’s advancement, considering it a longstanding tradition to sustain this progression. Some even participate in multiple teams, indicating a deep commitment to the ongoing success and continuity of the endeavor.
After the game
Suggests that individuals are motivated by nostalgia and continuity, finding immense satisfaction in preserving activities from their youth. They value the inclusive environment of like-minded individuals and the opportunity to socialize after games, emphasizing the importance of post-game camaraderie regardless of differences in education or nationality.
0:6 UX Flow
For the UX flow of the sign-up form and payment process, we streamlined the steps by condensing them into a two-step form. This approach aimed to prevent user overwhelm by gradually revealing information in a step-by-step manner. Rather than relying solely on traditional radio buttons and drop-down menus, we incorporated visually engaging elements to enhance user comprehension and interaction with each form block.
In addressing the issue of users dropping out at the final step due to unexpected pricing, we revamped the presentation of this information. We ensured that users could easily understand the total price for the team and provided options to split the cost, ensuring that it remained manageable for individual users. By presenting the pricing information in a clear and transparent manner, we aimed to mitigate user shock and minimize drop-offs at this critical stage of the sign-up process.
0:7 Second design iteration and reinvention of the UX flow
As we transitioned into the testing phase following the completion of our initial design iteration, our client began expressing concerns regarding the appeal to the male audience. Despite FOOB’s inclusivity of all genders and provision of women’s leagues and mixed matches, we decided to explore an alternative version of the design.
The main difference between the two versions lay in the UI for the website, prompting us to conduct a monadic test — a method where each respondent evaluates only one concept to prevent bias. To ensure comprehensive feedback, we carefully curated a pool of adjectives such as modern, warm, and sporty, focusing on assessing which version resonated more with our intended design goals. Expanding our reach, we engaged with a diverse pool of respondents through various platforms to gather insights and preferences for both design concepts.
For the second phase, we also took a bold approach to reinventing the UX flow. We were able to do it swiftly as we had our hypothesis pool from which we were able to extract other hypotheses, to create the second alternative UX flow based on our discoveries. We transformed the registration process into something akin to an e-commerce checkout and merged the storytelling elements from the initial design with a bolder visual style.
The two design versions elicited different reactions from users. After discussing the findings with the client, who had a dominant male audience despite offering a female league, we opted for the second version of the design. This decision aligned with the client’s vision and ensured the design would effectively cater to FOOB’s primary audience.
0:9 Final results and more
We completed the project in two months including research. Collaborating closely with the business allowed for a comprehensive understanding of its needs, facilitating effective decision-making. Based on the results of our tests we made to simplify and improve the UX, we observed a significant increase in the conversion rate to the sign-up form, with a rise of up to 22% with 60% percent of them reaching the final step being payment.
Throughout our extensive collaboration, we dedicated considerable time to immerse ourselves fully in understanding the product and its users, going beyond our initial scope to suggest additional ideas. Among these were proposals for fostering community engagement, facilitating collaborations, and hosting welcoming event parties. These suggestions aimed to enrich the overall user experience and strengthen FOOB’s connection with its audience.
One of our suggestions was implemented during our work, as the client agreed on creating a network of whatsapp chats for all cities. This allowed football enthusiasts to easily find stand-ins for matches, enhancing the user experience and fostering greater satisfaction with the service. While we initially planned to incorporate this feature into the app in the future, our primary focus was on optimizing the business’s performance and ensuring user satisfaction in the present context.
To see more of visuals for this project including branding, we encourage you to view this case on Behance
At Anthracite Studio we specialise in assisting startups and small IT-companies with their design processes if you want to solve business problems and achieve superior results contact us
hello@anthracite.studio
Art director: Sydorov Alex, research and text: Lisa Furina
