Decathlon | 2022.11-2024.12
Designing for Digital Transformation: Crafting Decathlon’s Business Module System
1 Researcher
1 Tech lead
1 Engineer
Context
In the winter of 2022, I worked at Decathlon as a Product Designer, leading the design of business module system for the internal integration platform. This is my first project when I joined Decathlon. The main challenges were new concept for all stakeholder, the lack of design assets, and the steep learning curve in a new industry.
My role
As a owner of this project, I built the 0-1 framework for the design content and shared my work through active communication and regular feedback with the stakeholders.
I executed the tasks such as identifying issues, defining problem scopes, prioritizing tasks, designing solutions, conducting testing, and overseeing the implementation process.
Project Impact
- Increase learnability: education cost -20%
- Improved design efficiency: 50% savings in design effort in terms of workload
- Strong Adaptability across design systems: Ant Design - Vitamin - Vitamin play
- Accelerate application integration
- Level up the UX maturity
Understanding
This was also my first time working on a B2B product, and I have to admit that I had limited knowledge of the industry know-how. To quickly understand the business context and clarify my design goal, I started by framing my exploration around four key questions to get the whole picture.
- the vision of my product
- the end-users’ needs
- UX resource and support within the team
- our team’s mission
After researching, I gained several key insigts:
My Scope
I was responsible for different modules along the production workflow — including inventory management, demand forecasting, and others. Each of these represents a core operational step within the supply chain.
Product Vision
All of the products I worked on are part of an internal iPaaS (Integration Platform as a Service) — designed to offer a unified entry point for business users, integrating multiple domain-specific tools into one seamless, automated platform. The platform itself does not operate business-facing products directly, but serves as an infrastructure layer that connects and supports them.
End User
One of our key user groups, the SPLs (Supply Planning Leads), faces a high turnover rate. The main reason is the steep learning curve — it takes a long time to become proficient with the system, and the internal training cost is very high.
UX resource and support
The design maturity varies across different teams: Some teams had only one designer, who conducted some research and delivered partial mockups. Other teams had no designer at all, and product managers used existing components from the design system to assemble the interface on their own.Project Goal & Scope
All of digital products should provide a easy-to-use and seamless experience without confusion.
Project Task 1
Rapidly Consolidate Design Assets to Enhance Efficiency
Probelm
lack of design assets and design files
Approach
leveraged the existing design system to quickly build a reusable component library
Background
The front-end team is still using Ant Design 4.0 to build pages, which occasionally leads to misuse or inconsistent application of components. Meanwhile, the internal design system is still under construction and has not yet been officially published.
Desk research
I explored various leading design systems to understand their structure, tech stacks, and design philosophies.
Output
I defined grid system, patterns, icons, components and so on. This effort not only enhanced my future work efficiency but also established a solid foundation for the development of BMS.
After & Before
After nearly a year of effort, I’ve updated most of interfaces across the platform, marking a significant step in our digital transformation. This has received positive feedback from users.
Before
After
Project Task 2
Modular Magic: Making Complex Tasks Simpler, Faster, and More Scalable
Probelm
- complex business logic and prolonged workflows for task completion
- inconsistent interaction across platforms lead to poor usability
Approach
define interaction patterns through business scenarios
Current situation
Digital products in supply chain is a "mess".
Users struggle with fragmented tools: Day-to-day tasks require navigating multiple internal and external systems, making it difficult to maintain consistent data.
To centralize business processes, key systems such as order management, warehouse operations, and ERP were gradually integrated into one internal platform.
Methodology
Atomic design methodology & task-driven
Due to the domain traits, many daily tasks are repetitive, and employees only need to follow basic procedures to complete their work. To improve efficiency and user experience, we aimed to build a module system focused on task-driven flows and task modularization — this became the core concept behind the Business Module System (BMS).
Source: Atomic Design by Brad Frost
Research
After delivering design tasks, do some desk research and conduct a Kick-Off workshop, luckily I solved some valuable questions like What do we need?
Ideate and Prioritize
Categorized based on user behavior, usage frequency, and internal priority
Stage 1
Basic content structure
Source: Current component library and design tasks
Stage 2
In the second phase, we introduced new categories—Business Needs and Basic Services—based on usage scenarios. With the foundational modules summarized, I also drew inspiration from the products I was working on. Our current focus is on modules closely tied to core business processes.
Business needs
interactions related to business processes,
specific to certain types of products
Source: Stakeholders journey and product team
Basic service
components used to complete general operations,
without strong business attributes
Source: Product review and user research
Stage 3
We introduced Modules, Templates, and Pages as the three core asset types in BMS.
Modules are reusable units, while Templates and Pages are highly customized,
ready-to-use solutions — marking a key milestone in system maturity.
Source: product review and user research
Design
While defining the basic categories, we also started shaping the content structure.
After
iterating through a few small versions, we gradually settled on this framework:
Part 1: Current User Case
By showcasing how these modules are used in real products, viewers—especially designers—can better relate to familiar contexts and understand when and how to use them appropriately.
Part 2: Framework & Guidelines
Different modules contain different types of content.
For the Chart section, I first
defined three common graph sizes and provided layout guidelines and a color palette
based on a 1440px screen width.
For 5.1 Modal (Feedback Function), we provide multiple frameworks to address different user scenarios, along with corresponding specifications.
Part 3: Instances
"Instance" is a term inspired by Figma, referring to real-world examples where the module has been applied. In some modules, these are fully developed, interactive demos that showcase how the module works in actual products.
Testing
For high-priority modules, I applied them in real design requests and conducted user
testing to evaluate their effectiveness in actual product scenarios.
During the testing process, I measured performance using task completion rate to assess usability
and gather user feedback.
Prioritization
We established an SOP to define the request process between other design teams and the BMS team.
Behind-the-scenes story 💡
While building the BMS library, designers from other product teams approached me with requests to prioritize the components they needed, so they could directly apply them to complete their ongoing design tasks. This led to the creation of a collaborative model that helped align priorities across teams.
Design hand-off
After most of content are finished , we delivered the design specifications to developers as a reference, and this one also as a requirements document.
Deliverables
So far, we’ve completed 75% of the basic service modules and 10% of the business modules.
Success Metrics
+50%
product development efficiency
owned products
Improve design and development efficiency: let designers getting rid of mundane design tasks and allowing them to do more high level creative and idea generation
integrated products
speeding up the rollout and using standardized documentation helps streamline communication across teams.
-20%
user education cost
According to the annual UEMS (User Experience Matrix System) testing, the usability score is 80.07, from 34 qualified responses (36 collected in total). We don’t have the baseline data before the UEMS was implemented for comparison, we confident that the BMS improved the system’s learnability.
Project Task 3
Embedding UX Principles in Design Tasks to Elevate Team Maturity and Align with Best Practices
Probelm
UX maturity Low
Approach
Embedding UX Principles in Design Tasks to Align with Best Practices
Background
Level 2 - Limited
Before I joined the team, the only designer is left and no one to support each products. The product team don’t involved designer in whole development process, and sometimes devs changed the design without reasons.
Result
Level 3-4: Emergent and Structured
Over the year, I not only delivered several key design tasks but also proactively shared UX principles with my teammates and formalized our collaboration process. As a result, all the product teams I worked with moved from Level 2 to Level 3 UX maturity, with some teams progressing to Level 4.
Behind-the-scenes story 💡
The reason behind achieving this goal so fast was actually an excessive workload. For nearly a year since I joined, I was the only designer on the team, independently handling 3 to 4 products.
Next Steps
The basic framework of BMS has shaped, the project has progressed from the BUILD phase to the RUN phase.
- expanding the BMS adoption across more products
- secure more resources for further developing
- continuously updating the BMS library
Conclusion
What did I do?
- Research: Collected real user scenarios from product teams to identify the core focus and structure of the Business Module System (BMS).
- Define: Designed the foundational structure by categorizing modules based on user behavior, usage frequency, and internal priorities.
- Ideate: Formulated the content architecture and drafted an actionable plan for scalable module delivery.
- Design: Led UX design for modules, setting usability benchmarks and interaction logic.
- A/B Testing: Conducted in-product A/B testing to validate usability and inform iteration.
- Internal Release: Promoted the system within internal product teams, delivered spec documents to frontend engineers, and aligned on development timelines.
- Implementation: Established a request form and SOP to qualify module submissions as BMS components.
- Promote: Advocated adoption across external product teams to broaden impact and ensure consistency.