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!