2021

Leveling the Playing Field: White Label Football Fans Platform

Leveling the Playing Field: White Label Football Fans Platform

Leveling the Playing Field: White Label Football Fans Platform

Industry

Football

Company

Sciensa (consultancy)

Status

Delivery

Team

Me (Lead Designer and Product Manager), one Junior Product Designer, one Front End Engineer, one Back End Engineer, one Agile Couch

Context

I Led design efforts in a football tech initiative at Sciensa, focused on football fans' platform, collaborated in a diverse sub-squad, aiming to empower teams to capitalize on their fan base.

This project was part of a football tech initiative at Sciensa, where I played a key role in crafting a comprehensive football ecosystem integrating various apps. My focus was on the design of the football fans platform, a component of this multifaceted undertaking. Tasked with leading a small sub-squad, I collaborated closely with a diverse team of a front-end engineer, back-end engineer, agile coach, junior product designer, and myself as lead designer and project manager. Additionally, my engagement extended to collaboration with other project managers and C-level business stakeholders.

There is a lot of inequality in the football world, particularly in revenue distribution heavily influenced by TV exposure, where teams with low TV exposure do not get good sponsorship contracts, and, therefore, can not hire better players, or even keeping their own players.

The goal of the project is to empower football teams, enabling them to capitalize on their fan base and navigate the challenges posed by the existing revenue dynamics.

Problem

How might we help football teams effectively capitalize on and engage with their fan base to overcome revenue challenges?

Side goals

  • The solution should be free with paid version for exclusive bonus.

  • The client already have a list of requirements such as: push-up notifications with real time game updates; enrolling kids on football schools; showing players lineup.

  • Create a white label product from the scratch with a team of only two engineers in two months.

Success metrics

  • Delivery on time.

  • Convince football team owners or managers to buy this idea.

Discovery

The journey begins with insights from user research, combined with data analysis and an investigation into previous design decisions.

When I started working on the project, I had no time for discovery research, because we needed to begin the development as soon as possible. So, the deal I made with the stakeholders was to start designing the first screens, and, in parallel, do continuous research.

My strategy was to starting working on lower risk features so the engineers would have work to do, and use the continue research to provide inputs for more important and riskier features. At the end the research also contributed for other products that we were developing for this client and would have seamless connection with the Football Fans Platform (buying tickets for games and e-commerce).

The research proposal was based on the book Practical Research: Planning and Design (Paul D. Leedy & Jeanne Ellis Ormrod), with some adaptations for the context of UX Research on a team using Scrum. My idea is to make constant research, with deliverables at the end of each sprint (we worked with two weeks sprints).

Key insights

8 weeks:
• Survey
• User interviews
• Competitor Analysis
• Non-participant observation

The research was done over a period of 8 weeks, with the support of a junior product designer. We immersed ourselves in the football world, joining fan groups in Facebook and Whatsap, reading news, and listening to Brazilian football songs (I highly recommend the playlist bellow). This web ethnography-inspired approach included journaling our findings.

In the first week, a survey was crafted to capture general information about Brazilians' relationship with football and address three main sub-questions: tickets, information, and official products. This survey informed roadmap prioritization, interviewee recruitment, and the formulation of engaging semi-structured interview questions.

Interviews took place during the third and fourth weeks, identifying user needs and pains, aiding in requirement prioritization. Combining survey insights and interviews, a Competitor Analysis was conducted, making assumptions about how the market responded to football fans' needs. It became evident that our product's scalability could outshine competitors. Currently, only major teams have their own apps, incurring high costs with unsatisfactory UX. With a white-label solution, we aimed to create a quality product universally accessible to fans and financially viable for football teams.

Key Insights

Key Insights

Football fans stay updated about their team daily.
Football fans stay updated about their team daily.
They want to support the team financially, but official products are too expensive.
They want to support the team financially, but official products are too expensive.
Fans can be categorized based on game attendance frequency, with who they watch the games, and financial situations.
Fans can be categorized based on game attendance frequency, with who they watch the games, and financial situations.
Finding and enrolling kids in a football school is a challenging task.
Finding and enrolling kids in a football school is a challenging task.
Fans have unique pre and post-game rituals.
Fans have unique pre and post-game rituals.
While progress has been made in safety and inclusion, discrimination against women and LGBT+ fans persists.
While progress has been made in safety and inclusion, discrimination against women and LGBT+ fans persists.

Creating personas

I organized a Persona workshop after presenting the research report.

After the first great research report, I organized a Persona workshop with the main stakeholders and other designers. The workshop was divided into 7 steps:

  1. Presenting and discussing the research report, so every on could have data to support their decisions;

  2. Individually identification of attributes to cluster users;

  3. Presenting and voting for the most relevant attributes;

  4. Individually creating two personas based on those attributes;

  5. Auto evaluation of the just created personas, enunciating what is based on data and what is an assumption;

  6. Presenting the personas;

  7. Reviewing and discussing the final personas that will guide the project for the following months;

Fábio

Single, 35 years old, lives in Recife, Brazil

Background:

He is a huge fan from Sport Club Recife. He comes from a family with lower money, but ascended socially taking advantage of the tech industry growth. He is already a fan member, and enjoy buying exclusive limited edition official products from his team in a way to financially support it.

Show more

Bianca

Married, 25 years old, lives in Rio, Brazil

Background:

Bianca is a traditional Flamengo fan. Both her parents supported Flamengo and she grew up in Marcanã (the largest stadium in Rio). She works with marketing, bakes and sells cake as a side job. She goes to the stadium whenever possible, sometimes with her friends, sometimes with her family.

Show more

Carlos

Single father, 42 years old, lives in Salvador, Brazil

Background:

Carlos is a single father, who has worked on multiple different filler jobs. Even when unemployed he kept paying his fan membership for his team: Bahia. When he was younger, he almost became a football player, but a knee injury made him change his plans.

Show more

Ideation

How might we help football teams effectively capitalize on and engage with their fan base to overcome revenue challenges?

Solution

"Sócio Torcedor" is a white-label platform for football fans, with information about the user's team, and also an integrated marketplace, where the user can buy tickets for the games, products, and travel packages. With this product, the football teams can easily create their fan's platform and earn from affiliations plans and sales.

Discovery contribution

When in consultancy, limited flexibility exists to alter the client's idea. However, discovery research and a persona workshop guided the final solution by addressing:

  • Information Architecture: I already had a list of must have features, discovery helped me to identify what is most relevant and organize the product's content strategically.

  • User Empathy: Personas organized research findings, contributing to user stories for each feature.

  • Product Vision: Facilitated envisioning the product's future.

Information Architecture

Home
User's profile
Lineup
Official store
Product Page
Shopping Cart
My orders
Order Page
Invoice
Wishlist
School List
School Page
Lead form
Picture Gallery
More Menu
About the team
Downloads
News List
News List
Video List
Video

Solution

Designing and delivery all those features and pages in 3 months was quite a challenge. Research and user testing helped me to get quick alignment with our client. Working close with developers helped us to adapt the design and remove obstacles before the sprint begin. After 3 months everything except the e-commerce part was done both back and front end.

Lets talk about color

Have you ever seen a blue Coke?

Color is an important element in football teams' differentiations. Color of a rival team is considered "forbidden" for true football fam. This is such a relevant phenomenon, that we have a blue Coca-Cola in Brazil, for fans of certain football teams.

Using Strapi as CMS

I designed a color system, that allows colors differentiations, with few changes.

We knew that the end B2B user who will customize the colors of the product probably will not have a design formation. The challenge was to create a solution that fully represents the color of each team, being easy to customize and hard to avoid or repair mistakes.
Working together with engineers we found a solution where it was possible to change the whole app based on only 5 fields on Strapi CMS:

- Primary,

- On Primary (light or dark),

- Secondary,

- On Secondary (light or dark),

- Dark mode (boolean)



Using design tokens we generated a complete palette playing with gradients and opacity.

São Bernardo F.C

#TigreDoABC

Upcoming games

26/09

29/09

03/10

06/10

06/10

Paulista A Championship

São Bernardo

Guarani

28/02

21h00

Municipal Stadium 1° de Maio

Don't miss any shots!

Activate notifications

Latest results

Paulista A Championship

4

3

28/02

21h00

Brasilian A Championship

1

0

21/02

14h00

Tudo sobre o nosso time!

História e conquistas

Escalação

Escolinhas

Uniforme de jogo

Home

Lineup

Official Store

School

More

Select a theme:

São Bernardo
Guarani
Bahia

$color.primary

Primary

$color.secundary

Secundary

$color.gradient.01

Gradient 01

$color.gradient.02

Secundary

Text on Primary:

Dark

Text on Secundary:

Dark

Background:

Dark

Gradient 02

Gradient 01
with Dark Background

Dark Background Card

Primary

Dark onPrimary

Secondary

Select a theme:
São Bernardo
Guarani
Bahia

$color.primary

Primary

$color.secundary

Secundary

$color.gradient.01

Gradient 01

$color.gradient.02

Secundary

Text on Primary:

Dark

Text on Secundary:

Dark

Background:

Dark

São Bernardo F.C

#TigreDoABC

Upcoming games

26/09

29/09

03/10

06/10

06/10

Paulista A Championship

São Bernardo

Guarani

28/02

21h00

Municipal Stadium 1° de Maio

Don't miss any shots!

Activate notifications

Latest results

Paulista A Championship

4

3

28/02

21h00

Brasilian A Championship

1

0

21/02

14h00

Tudo sobre o nosso time!

História e conquistas

Escalação

Escolinhas

Uniforme de jogo

Home

Lineup

Official Store

School

More

Gradient 02

Gradient 01
with Dark Background

Dark Background Card

Primary

Dark on Primary

Secondary

Select a theme:

São Bernardo
Guarani
Bahia

$color.primary

Primary

$color.secundary

Secundary

$color.gradient.01

Gradient 01

$color.gradient.02

Secundary

Text on Primary:

Dark

Text on Secundary:

Dark

Background:

Dark

Building a Design System

This color scheme only works because it is supported by a well-structured design system. Building it was only possible because of great cooperation with the development team. Here is an example of some of the components created.

Select a theme:

São Bernardo
Guarani
Bahia

Button

Button

Button

Button

Button

Button

Button

Button

Home

Lineup

Official Store

School

More

Men's soccer squad

First team

Reserve

Technical Committee

1

Gabriel Gasparotto

Goalkeeper

3

Patrick Marcelino

Defender

14

Nicolas Gianini

Defender

4

Lucas Mota

Right-back

6

Julinho

Left-Back

7

Rodrigo Souza

Midfielder

8

Natan

Midfielder

9

Thiago Primão

Midfielder

10

Rafael Costa

Midfielder

11

Léo Castro

Striker

12

Rodrigo Alves

Striker

Lineup

Male

Female

U 23

U 20

U 17

Rincon

Evelton

Thiago

Carlitos

Rodrigo

Natan

Nicolas

Julinho

Patrick

Lucas

Gabriel

Updated today at 14:33

Page Name

Your team offical products

Customer reviews

Clear

& Up

& Up

& Up

& Up

125 products found

Show 200+ Results

Chips

Chips

Chips

Chips

Chips

Chips

History and conquests

Lineup

Football School for kids

Dowloads

Select a theme:
São Bernardo
Guarani
Bahia

Select a theme:

São Bernardo
Guarani
Bahia

Button

Button

Button

Button

Button

Button

Button

Button

Home

Lineup

Official Store

School

More

Men's soccer squad

First team

Reserve

Technical Committee

1

Gabriel Gasparotto

Goalkeeper

3

Patrick Marcelino

Defender

14

Nicolas Gianini

Defender

4

Lucas Mota

Right-back

6

Julinho

Left-Back

7

Rodrigo Souza

Midfielder

8

Natan

Midfielder

9

Thiago Primão

Midfielder

10

Rafael Costa

Midfielder

11

Léo Castro

Striker

12

Rodrigo Alves

Striker

Lineup

Male

Female

U 23

U 20

U 17

Rincon

Evelton

Thiago

Carlitos

Rodrigo

Natan

Nicolas

Julinho

Patrick

Lucas

Gabriel

Updated today at 14:33

Page Name

Your team offical products

Customer reviews

Clear

& Up

& Up

& Up

& Up

125 products found

Show 200+ Results

Solution result

Select a theme:

São Bernardo
Guarani
Bahia

Solution result

Select a theme:
São Bernardo
Guarani
Bahia

Solution result

Select a theme:

São Bernardo
Guarani
Bahia

Testing

User testing with a junior designer aimed to confirm success in creating a tailored, visually distinct experience for each football team and assess the app's usability across various aspects.

Together with a junior designer, we did user testing to verify:

  1. Were we successful in creating a tailored experience, visually different for each team? Do users recognize the app as something from their team?



  2. Is it easy and intuitive to enroll a child in a football school?



  3. Do we provide all the needed information for parents to decide to enroll their child in a football school?



  4. Is the filter component appealing and intuitive?



  5. Are the patterns used on the e-commerce intuitive and easy to use?



  6. Can users view order status and get help from customer service?


    Brazilians take football seriously, so we created multiple prototypes to match the team with the interviewers' team. This was also great to stress test our design system.

Learnings and actions

The users loved the colors and aesthetics of the product.
The users loved the colors and aesthetics of the product.
It was easy to enroll a child in a football school.
It was easy to enroll a child in a football school.
We redesigned the school page as it lacked vital information for parents to decide on enrolling their child.
We redesigned the school page as it lacked vital information for parents to decide on enrolling their child.
Our filter was not intuitive, so we redesigned it.
Our filter was not intuitive, so we redesigned it.
The patterns used on the official store was easy to use.
The patterns used on the official store was easy to use.
Customer Service and Order Status were hidden in the "more" button, causing confusion. We added links in the Official Store where users expected them.
Customer Service and Order Status were hidden in the "more" button, causing confusion. We added links in the Official Store where users expected them.

Results

Successfully secured contracts with 10 out of 30 of Brazil's largest teams for the product, a noteworthy B2B achievement. On-time delivery, collaborative efforts, and effective stakeholder management ensured project commitments.

10 out 30

of Brazil's largest teams have signed contracts to use the product. This is a significant B2B achievement.

On-time delivery

Collaborating with engineers, and efficient stakeholder management allowed us to deliver what we committed to.

Launch soon!

As part of a product ecosystem, there are still dependencies to address. I look forward to seeing the impact of the project upon its launch.

Contact

Let's create exceptional experiences together. Reach out for collaborations, insights, or just a good design chat!

You can contact me using the form, sending me an e-mail or connecting on Linkedin.

jonassqueiroga@gmail.com

Get in Touch

Contact

Let's create exceptional experiences together. Reach out for collaborations, insights, or just a good design chat!

You can contact me using the form, sending me an e-mail or connecting on Linkedin.

jonassqueiroga@gmail.com

Get in Touch

Contact

Let's create exceptional experiences together. Reach out for collaborations, insights, or just a good design chat!

You can contact me using the form, sending me an e-mail or connecting on Linkedin.

jonassqueiroga@gmail.com

Get in Touch

I crafted my portfolio using Framer and a touch of React. Coming soon as a Framer template—reach out if interested!

I crafted my portfolio using Framer and a touch of React. Coming soon as a Framer template—reach out if interested!

I crafted my portfolio using Framer and a touch of React.
Coming soon as a Framer template—reach out if interested!