Overview
The ESPN soccer page serves as a comprehensive hub for soccer enthusiasts, offering world-class coverage of premier leagues, tournaments, and players. Users can delve into a wealth of content, including in-depth analysis, highlights, and exclusive interviews. The page provides a holistic perspective on the global prominence of soccer, allowing fans to stay informed about the latest developments in their favorite leagues and teams.
GOAL: Forge an immersive experience that resonates with the fervor and passion soccer fans bring to the beautiful game, captivating their excitement through engaging elements and interactive features.
SOME CONTEXT
My role: Lead Designer, UX/UI Designer, Prototype
Platforms
IOS • Android • Web
The Challenge
- Given the intricate nature of the sport and the multitude of features we aimed to incorporate, a strategic approach was essential. The project was divided into distinct phases to ensure effective planning and execution.
- Craft a Game strip tailored for sports fans, emphasize team colors for clear identification and prioritize accessibility with legible fonts and dynamic color schemes.
- Create an immersive experience for Match Formations, Shot Chart, and Heat Map that seamlessly functions across all platforms.
- Create visually appealing and easily digestible data visualizations, ensuring clarity and simplicity for an enjoyable experience.
- Create a soccer timeline with thoughtfully designed icons for a clear and engaging portrayal of key match events.
- Present data in tables with a focus on both aesthetics and functionality, ensuring a visually appealing, easy-to-scan, and accessible experience.
Challenge Statements
- How can we help fans to navigate through the abundance of soccer related information without feeling overwhelm and ending up abandoning the site?
- In what ways can we enhance the personalization features to cater for individual preferences?
- How can we optimize the delivery of real-time updates during live matches to ensure fans receive timely scores, commentary, play-by-play, and stats for a more immersive experience?
- How can we deliver sports information that is both engaging and easily digestible, avoiding overwhelming details for sports fans?
- What improvements can we make to enhance the mobile user experience, navigation, Match formation, timeline, data visualization?
- How can we encourage more interactive engagement with soccer contented support multiple languages to create amore inclusive platform?
Sketches
- Explored creative concepts through classical pen-and-paper sketches, whiteboard brainstorming sessions, and digital design tools to harness a diverse range of ideas.
UX & UI DESIGN
Mobile Web
Users delight in real-time data for their favorite teams and players, featuring timeline views, soccer line-ups, access to full commentary, play-by-play, and additional enriching details.
Ensured intuitive navigation, content presentation allows users to effortlessly enjoy and digest information without feeling overwhelmed.
Localized content and support for multiple languages, ensuring a platform that embraces the diversity of our global audience.
The soccer timeline and formations reflect real-time updates during live matches, providing an immersive and up-to-the-minute experience for fans.
UX & UI DESIGN
Mobile App
The ESPN App offers a dedicated soccer web view, providing users with an immersive experience for accessing soccer-related content. Users can enjoy a personalized visual experience with the availability of both light and dark mode options.
Soccer enthusiast can indulge in captivating data visualizations.
The app’s vertical timeline has been improved, now featuring a horizontal layout for an enhanced user experience.
Match formations present goals, player names, and replacements. The formation numbers are displayed in the segmented toggle button. The table includes expandable content for detailed statistics like saves, shots, shots on target, assists, and discipline.
Desktop & Tablet
Crafted a beautifully designed desktop experience with clean, modular information, and crisp table stats for a personalized and aesthetically pleasing user interface.
AWSOME DESIGN AWSOME DESIGN AWSOME DESIG
SHOWCASE
Final Project
Presented below are some of the final mockups and explorations highlighting the varied features and elements meticulously crafted for the Soccer Game Package section. These visuals encapsulate the final design iterations, offering a detailed glimpse into the thoughtfully considered components that constitute an enriched and immersive user experience.
These mockups exemplify a meticulous design process, guaranteeing a visually compelling and seamlessly functional presentation of soccer-related content in the Game Package section, with dynamic layouts and intricate details.
RECOGNITIONS
Awards & Mentions
Etiam volutpat massa nulla, vitae imperdiet massa pretium et. Vivamus ultrices urna mauris, vitae finibus. Pellentesque fringilla tempor ipsum, vel cursus arcu hendrerit ac.
Featured in Photoshop
Featured in Illustration
Site of The Day
Best User Experience
Fox 2021 nomination
FWA of The Day
