What is Decathlon?
The Decathlon Design System is a unified set of guidelines, components, and tools that ensures consistency, efficiency, and quality in designing and developing Decathlon's digital products, enabling user-friendly and accessible experiences across websites and apps.
The Evolution and Versions
2020: Foundation and Early Development
V0.1 (2020-07-03): The initial version, including basic guidelines for brand story, logo, and digital design. Provided foundational design specifications for components, typography, and layout.
2021: Building Consistency and Adoption
V0.10 (2021-08-12): Focused on accessibility improvements, introducing overlay components such as modals, snackbars, and toasts. The Android library was published on Maven Central.
2022: Feature Expansion and Accessibility Optimization
V0.20 (2022-07-20): Launched the Android Compose Beta version, featuring stable components.
2023: Continuous Optimization
V0.22 (2023-02-16): Added design patterns to enhance usability and continued improving documentation and component libraries.
You can briefly review its history through the web page: zeroheight - What's New
What Products Built with Decathlon
The Decathlon Design System (DDS) is an internal design system used by Decathlon to build its global products and services. While Decathlon has not publicly listed all specific products and links utilizing DDS, here are some known examples of Decathlon's products and services.
Decathlon Official Website: Decathlon's global online store offering sports equipment and gear for purchase.
Decathlon Mobile App: Decathlon's mobile application supports users in purchasing products, tracking sports data, booking classes, and more.
Applicable industries for reference
Here are the applicable industries for reference of the Decathlon Design System:
Retail & E-commerce: The design system is highly applicable to the retail and e-commerce industry, especially for large omnichannel retailers requiring a unified brand identity and user experience.
Sports & Fitness: Focused on sports products, the design system provides valuable insights for the sports and fitness industry in creating digital solutions.
IoT & Smart Devices: Integrated into smart devices like GPS watches and heart rate monitors, the system offers guidance for designing IoT device interfaces.
Community & Social Platforms: The sports community platform showcases how a design system can be utilized to build engaging social and community platforms.
Platform Support and Use Cases of Decathlon
Supported Platforms
Decathlon supports a wide range of platforms to ensure a seamless user experience across different devices and services. Below are the key platforms supported by Decathlon.
Web Platforms: The official website and regional e-commerce platforms offer access to product catalogs, online shopping, and service bookings.
Mobile Applications: The mobile app for iOS and Android provides features like product purchases, sports data tracking, and class bookings.
IoT and Smart Devices: The design system is integrated into smart sports devices such as GPS watches, heart rate monitors, and other IoT-enabled fitness equipment, ensuring intuitive user interfaces.
In-Store Digital Solutions: Digital kiosks and self-service systems in physical stores enhance the shopping experience by allowing users to browse products, check availability, and make purchases.
Use Case Scenarios
A Guide and Template for Decathlon
Effective Use of the Color System
Decathlon's brand color system help make designs look nice and clear, and they can also show information, like green for success and red for errors. Primary colors are the main ones used for buttons and links, secondary colors help make the main ones look better, neutral colors like gray keep the background and text simple, and semantic colors, like red or green, show meanings such as warnings or success. Make sure colors are easy to see, don’t use too many, and test them in light and dark modes.
Typography Hierarchy and Readability
Decathlon's typography system makes text easier to read and understand. Big headings grab attention, body text is for the main content, and small text is for notes or labels. Don’t use too many font styles, keep space between lines balanced, and adjust text size for phones and computers so it looks good everywhere.
Icon Design Principles
In the Icon Design Principles of the Decathlon Design System, Icons are small pictures that quickly show what something does, like a trash can for delete. Good icons are simple, consistent, and easy to understand. Make sure all icons are the same size and style, and test them to ensure they’re clear. Adding text labels can help people understand what the icons mean.
Decathlon Components Templates
Decathlon Web Design System: Provides a unified set of UI components and style guidelines focused on creating consistent and responsive web application interfaces.
Decathlon iOS Design System: Optimized for the iOS platform, offering intuitive components and styles aligned with Apple’s design principles to enhance the mobile user experience.
Accessibility in Decathlon
Decathlon Design System prioritizes accessibility to ensure everyone, including people with disabilities, can easily use its products. By following WCAG 2.1 standards, DDS supports keyboard navigation, screen reader compatibility (using ARIA labels), optimized color contrast (text 4.5:1, buttons 3:1), and clear focus management.
To enhance accessibility, DDS uses automated tools (e.g., Axe, Lighthouse), conducts manual testing, and gathers feedback from users with disabilities. It also provides design guidelines, accessible components, and team training to create inclusive and user-friendly experiences.
Other Resources
Decathlon Official Website: The Decathlon official website offers high-quality and affordable sports products to meet the needs of all sports enthusiasts.
Decathlon Sports Community: It’s a platform that connects sports enthusiasts, sharing experiences and inspiring a passion for sports.