Work in Progress

Work in Progress ⋆

Our Component Renaming Priorization project aimed to create a universal language for components used across .com and our flagship app, ensuring brand consistency throughout the e-commerce ecosystem. By standardizing design language and streamlining communication, we unified the user experience across platforms, making it more cohesive, efficient, and scalable.

Component Renaming Priorization

My Role


UX Designer


The Team

1 Senior Product Designer, 1 UX Designer (me) 1 Project Manager

Global/Local Digital Activation Managers, Global/Local Content Managers, Design Library Team


XFN Partners



Timeframe

4 months

Tools

Figma, Miro

Problem

Inconsistent design language across .com and our flagship app created a fragmented user experience, making it difficult to maintain brand cohesion. This resulted in inefficiencies in both the design and development processes.

Solution

We developed a unified system of components with standardized naming conventions, creating a consistent language that streamlined collaboration and ensured a seamless user experience across the entire ecom ecosystem.

RESEARCH & DISCOVERY

Who Are Our Users?

Our main users are the teams who work and build these components for adidas.com every day, from site ops and marketing/comms to design and tech.

  • Global/Local Digital Activation Managers

    This team is a part of the end-to-end planning and strategizing for campaigns. They handover the marketing content to Global/Local Content Managers. We needed to understand this user group's role as they are the step before Content Managers. 

    Global/Local Content Managers (Site Ops)

    Main user for Content Flow. This team receives the final assets ~2 months or less until hard launch date for a campaign. Their handover comes from Digital Activation Managers and consists of imagery, copy, URL direction, layouts, article info and publishing details. 

    Global/Local Digital Visual Merchandisers

    This team owns the product pages on adidas.com. They make sure each product has the correct badging, metadata and which landing pages it shows up.

    Global/Local SEO team

    This team manages our SEO and share of search for adidas.com. They provide strategy on URL linking, blogs, and when and where to use certain carousels.

  • Studio A - In house Creative Teams

    They create all the marketing content for digital - from .com, flagship app and CONFIRMED app including email and paid marketing content.Item description.

    UX/UI Designers

    These designers work and create the adidas Design Library to digital products that get utilized on adidas.com.

    Product Managers

    Product managers are the backbone and lead communication of changes, updates or rollout of new digital products for adidas.com.

    Tech & Developers

    This team builds the product or service.

Card-Sorting Exercise

Card sorting exercise done was led by me with various members of the user groups. Participants had to match the new namings with the components. Results were analysed and feedback was incorporated.

New Naming Convention

I collaborated with a Senior Product Designer from the adidas Design Language (aDL) team to leverage insights from a card sorting exercise. We developed a new naming convention, updated existing names, and created new ones to align with the updated design system and ensure consistency across digital products.

  • The base name groups the components into categories.

    These separate our components into logical chunks, which improves findability

  • Do not name by use case because it is not as scalable and could create duplicate components.

    Try and name components based on:

    ▪ Anatomy

    ▪ Behaviour

    ▪ Placement

  • The second level of type adds a modifier to the type. For example, if there are multiple Message bars with different behaviour

Introducing the New Naming System

After finalizing the new naming convention, we ensured a smooth transition by proactively communicating changes and tracking progress. We created a dedicated page on our digital product platform, providing a single source of truth for teams to access updates, understand changes, and adopt the new system seamlessly.

Previous
Previous

Digital Products - .com Components