inclu.dev Logo
inclu.dev
PeaceTech VC Logo
PeaceTech VC

Universal Design System for Intersport

Engineering partner:DataArt
Location:Global
Industry:Retail Software Development
Services:UX & UI Design

Client

IIC-INTERSPORT International Corporation is the brand-management and purchasing company of the INTERSPORT Group. With a retail turnover of over EUR 12.2 billion and more than 5,500 associated retailers in 46 countries, INTERSPORT has the worldwide leading position in the sporting goods retail market.

Challenge

Creating a Universal Design System to improve consistency across all design units and standardizing UX, as well as saving time with a ready-made library, layouts, prototypes and speed up testing with ready-made patterns.

Solution

DataArt team started with a discovery phase that lasted 3-4 weeks. The key thing was to create a scope of work, a backlog, and make a list of all essential hypotheses. INTERSPORT and DataArt teams conducted a visual audit and studied the visual properties of elements (UI Audit), such as color, size, typography etc. Then the teams conducted a user interface audit (UX Audit), studying main elements - buttons, cards, lists, forms, etc. After this, the audit team decided to use an Atomic Design Model to ease the process of UDS development.

It was essential to understand who INTERSPORT’s customers are, as well as understand their interests and needs. For this purpose, DataArt created different Personas. It was based on data from real customers, which gave more clarity about what the final product should be. DataArt described not only customer profiles but also the goal that the customer wants to achieve, as well as the scenario of the sequence of actions to achieve this goal.

After gathering all the information, DataArt created a detailed roadmap that included technical design principles, as well as the approach, timeline, and resources. After months of work, DataArt team delivered all essential components:

  • Tech Stack. Implementation using a modern technology stack, tooling and architecture that is weighed and selected specifically for the INTERSPORT environment.
  • Design Guidelines. A clearly defined design language, translated into tokens for both the frontend kit and the component library. Also available for the N/O’s to adopt as variables.
  • Experience Guidelines. A set of guidelines that cover a fundamental e-commerce experience.
  • Components & Patterns Library. A set of components that come from everywhere across the INTERSPORT experience. They are general & multi-purpose and highly reusable components.
  • Key Journeys & Flows. Patterns, Pages and Screens, which cover the majority of user flows across the key customer journeys phases.
  • Developer Sandbox. Used to build and test the coded components. Full set up with a CI/CD pipeline to continuously test and release the design system.
Image

Achievements

  • Quick access to the best customer experience
  • Library of components that ease developers work
  • Brand Loyalty improved
  • Easily modified UI due to atomic structure