Ligue 1

The French soccer league tasked us with building an NFT marketplace to immortalize historic moments from some of the most famous athletes in the world.

Sports leagues have recently delved into the world of NFTs, revolutionizing the way fans engage with their favorite teams and athletes. These digital tokens have enabled sports leagues to offer exclusive, limited-edition content to fans, such as collectible highlights, virtual memorabilia, and even ownership stakes in teams. Having countless extraordinary players and moments in Ligue 1 history as well as a hungry fanbase, the league decided to create an NFT marketplace.

Overview

Incentivizing loyalty; gamifying the fan experience.

Introducing Quests, a new ways soccer enthusiasts can engage with their favorite players and teams, encouraging the purchase of multiple products.

An NFT marketplace built by fans, for fans.

We set out to create an NFT platform that appeals to the everyday soccer fan, not just those already invested in the Web3 landscape.

Rewarding engagement and building trust.

We used rewards and personalized products to empower fans to further engage with the brand.

Phase 1: Competitive analysis

I took the lead on competitive analysis. After a high level analysis across dozens of competitors, we took a deeper dive into three. We broke down the main user flows of each competitor and compared the usability and experience of each. After this flow analysis, we explored the visual identity of our main competitors, looking primarily at NFT marketplaces with a similar scope in sports. Through this analysis, we discovered that the majority of sports NFT marketplaces position themselves as standalone products with very “techy”, with a web3/crypto look and feel.

Positioning NBA Topshots

  • Topshots is positioned as an officially-licensed, stand-alone product

  • The visual identity leans towards a typical crypto/web3 design

  • Employs neon colors as well as psychedelic patterns as accents

  • Engages a tech-savvy audience

  • Relatively successful as a first mover

Positioning LaLiga Golazos

  • Golazos is positioned as an officially-licensed, stand-alone product, but uses LaLiga DNA

  • The visual identity leans towards typical crypto/web3 design

  • Created by the same company as Topshots, Dapper Labs, and shares many commonalities in design

  • Engages more of a crypto audience than a soccer audience

  • Low numbers in traffic and monthly buyers

Positioning UFC Strike

  • UFC Strike is positioned as an officially-licensed, stand-alone product

  • Created by the same company as Topshots and Golazos, Dapper Labs, and shares many commonalities in design

  • Falls somewhere between engaging a fully crypto audience and soccer audience

We decided to deliberately move away from industry best practices in terms of look and feel because we felt it would reach a broader audience and be more approachable for the general football fan. At this point we began designing basic wireframes and prototypes using a light theme to exude friendliness and be less “crypto/techy”.

Phase 2: Information architecture

Because of the enormity of this project, it was important to lock down the information architecture early in the process. We spent many days going back and forth with the client and product team to fine-tune the site map.

Because of our relatively short timeline, we brainstormed template designs that could be used for a variety of different screens, with little to no changes.

This site map not only indicated the user’s journey as they navigate through the product, but it provided us a visual roadmap of the work ahead of us.

Phase 3: Wireframing

Due to the templated nature of our screens, the wireframing process was much quicker than had we forgone that step. We essentially had two main templates: overview pages and detail pages, which accounted for most everything except the global overlay screens. This coupled with the fact that many of our screens nested within each other made for a fairly smooth wireframing process.

Overview screens

Details screens

Phase 4: Design system creation

The building of the product design system happened concurrently with the wireframe creation to ensure our components would be ready when prototyping began.

The future of design systems is semantic. Because of this, we utilized semantic tokens in our system creation. These tokens codified our design decisions, represented them as variables, making developer handoff painless. The image below shows how we used semantic tokens within the color section of our design system.

Semantic design systems

Phase 5: Prototyping

Once the wireframes and design system were in a good place, we had both a framework and a seemingly endless ecosystem to play with. This allowed us to have fun messing with colors and shapes, creating a product separate from Ligue 1, but still clearly related.

Overview screens

Detail screens

Phase 6: User testing

I’m excited to share the rest of this project with you, but we are currently in the middle of this phase. Come back soon!

Next
Next

Olympique de Marseille