Design Systems Team

MissionEdit

In collaboration with Wikimedia Foundation teams, partners and volunteers, the Design Systems Team develops an overarching strategy for frontend design and engineering across Wikimedia. This includes building and maintaining a design system platform for wikis that provides shared services of tools and guidelines for building user interfaces in an efficient, scalable, and equitable way.

This work supports audiences that are critical to developing new knowledge experiences by ensuring that they are successful in creating, maintaining, and extending frontend features across Wikimedia with consistency and ease.

VisionEdit

Provide a comprehensive, reusable, extensible way to design and build frontends on Wikimedia platforms by following a universal Design Style Guide and a shared development kit that codifies the visual and experience principles and guidelines in a library of user-interface (UI) components.

 

Current state of frontend development

  • Many user-interface libraries used by different teams and projects
  • Redundant effort for designers and engineers
  • Inconsistent designs
  • Inconsistent standards for contribution
  • Challenging to onboard
  • UIs depend on coupled backend logic
 

Ideal future-state of frontend development

  • Less feature redundancy
  • Consistent user experience across all Wikimedia projects
  • Web-accessible and multilingual by default
  • Standardized browser and device support
  • Faster onboarding
  • Faster software upgrades
  • Systems thinking: teams make an impact outside of immediate focus area

Work StreamsEdit

Wikimedia Design System and Codex UI LibraryEdit

The Wikimedia Design System is the place where all of the components and patterns that designers use to create products are systematically organized, in such a way that they are easy to find, modify and create new parts. The design system is grounded in a set of principles and guidelines designed with for consistency, efficiency, web accessibility and internationalization by default.

Codex is the frontend development toolkit used for implementing the Wikimedia Design Style Guide in code. Codex provides engineers with UI components that are built in JavaScript (Vue.js), with design tokens to store data for design values, and user-facing documentation.

Frontend TechnologyEdit

Wikimedia's medium-term Platform Evolution plan set out to prioritize modern engineering practices, performance, and ease-of-use for contributors of varying experience levels. As a result, the Design Systems Team organized the Vue.js Developer Summit 2021 which led to the decision to adopt Vue.js as the official programming framework for MediaWiki.

Current StatusEdit

Basic Vue.js support in MediaWikiEdit

  Done

Vue.js is now shipped as part of MediaWiki core. JS code in skins and extensions can require( 'vue' ) from ResourceLoader just like any other module. Single-file components (.vue files) are supported via ResourceLoader. See here for guidelines about using Vue.js within MediaWiki.

Vue 2 -> Vue 3 MigrationEdit

T289017

  In progress

The provided copy of Vue has been upgraded to the Vue 3 Migration Build. By default, the library will still behave in alignment with the Vue 2 API, but users can opt-in to the Vue 3 behavior by setting appropriate compatibility flags in their code.

  • Teams writing new Vue features should opt-in to Vue 3 behavior starting now.
  • Teams maintaining existing features (written for Vue 2 originally) should start planning their migrations.
  • Eventually the compatibility build will be removed (T289105), and all Vue code must be made Vue 3 compatible.

Development of Codex component libraryEdit

TODO: Add link to public roadmap of Codex components; what is available when. Top-level phab epic?

  In progress

The Codex library of Vue components (as well as design tokens, icons, and other design system assets) is under active development. Documentation for Codex can be found here.

  • Codex is currently in an early stage and breaking changes are still possible
  • Many components are still being developed; teams may need to supplement Codex components with custom components suitable for their needs
  • This is an open-source project and contribution is welcomed

To learn more about Codex, check out:

Support for ES6 across MediaWikiEdit

  In progress

MediaWiki is using Vue 3, which dropped support for IE11. Features using Vue.js should ensure they are only delivered to modern browsers by setting "es6": true in their module definitions.

  • Developers of skins and extensions are encouraged to start using ES6 features in their Vue.js code now; Wikimedia's eslint-config rules include a preset for vue3-es6 that will be useful here.
  • This is in alignment with current guidelines about how to support legacy browsers like IE11 – in general new JS features should not target these browsers; if they must be supported, a server-rendered fallback should be defined.
  • Support for ES6 in gadgets is currently limited due to lack of support in the JS syntax checker. See T75714 for more information.

Support for server-rendering of Vue ComponentsEdit

TODO: Add link to phab tasks, TDMP docs

 N Not done

Initiative OKRsEdit

The following long-term goals speak to our values and commitment to supporting Wikimedia contributors and product teams. Specific metrics are open to adjustments as the Design System deploys to various partnerships.


TODO: Add updated FY2022-2023 OKRs once finalized


FY2022-2023 Objective 1:Edit

  • Key Result 1:
    • Metric:
  • Key Result 2:
    • Metric:

FY2022-2023 Objective 2:Edit

  • Key Result 1:
    • Metric:
  • Key Result 2:
    • Metric:

Contribution GuidelinesEdit

We welcome contributions from everyone! There are several ways to contribute:

  • Adding or commenting on tasks in our project management system, Phabricator (links below)
  • Contributing to the design process
  • Suggesting new components and design tokens
  • Writing and submitting code
  • Reviewing code
  • Updating and expanding library documentation

Contributions to Codex are covered by the Code of Conduct for Wikimedia technical spaces.

How to stay up-to-dateEdit

To keep all those interested in using or contributing to Codex up-to-date on topics of design, development, roadmaps, and releases, the Design Systems Team will:

  • Use Phabricator to publicly track the work, giving others the opportunity to subscribe to tasks, add comments, or claim tasks.
  • Keep our team page up-to-date with information about our work and how to contact us
  • Include release notes with every release and send minor and major release summaries out to the following mailing lists:
    • Wikitech-l, list for discussing the technical aspects and organization of the Wikimedia projects
    • design.public, list for discussing design updates
  • Document technical decisions about the library in Codex's architecture decision record (ADR) section.

Task trackingEdit

Tasks are tracked in Phabricator. We use three different Phabricator workboards:

  • Design-Systems-Team: used to triage, sort, prioritize, and refine tasks that the Design Systems team and contributors will work on.
  • Design-Systems-Sprint: used to track active works-in-progress from Research > Design > Development > Testing > Release. As a contributor, you are welcome to track your work related to the Design System on this board as well—just remember to keep the task in the appropriate column that reflects its status.
  • Codex: used to indicate that a task is related to Codex. We do not track task status here.

    I want to know the status of something

    Check the Codex, Design-Systems-Team, and Design-Systems-Sprint workboards in Phabricator to see if a task exists for that work (for detailed Phabricator search tips, visit this page). If so, the task will be in the column that represents its current status. If not, you can create a task (see below) or contact us (see the Design Systems Team page on mediawiki.org)

    I want to request a feature

    You are welcome to create new tasks with the #Codex and #Design-Systems-Team tags. New tasks will go into our "Needs Triage (Incoming Requests)" column and will be triaged regularly. Please remember that Codex is maintained by a nonprofit—we won't be able to meet all feature requests, and it might take time to get to your request.

To request a new component, please fill out the component epic task template.

I want to follow parts of your work

Create a Phabricator account and add yourself as a subscriber to a task to get notified when updates are made.

I want to contribute to a task

Great! Create or claim a task as soon as you decide to work on it. This will help avoid overlapping, duplicate, or conflicting work. If you're creating a task, add as much detail as you can about the scope of the task: for example, what needs to be completed before the task can be considered "done"?

RoadmapEdit

See this Phabricator board for the most accurate view: Design-Systems-Product-Roadmap

TODO: Add gantt roadmap diagram


TeamEdit

  • Sarai Sánchez, UX & Product designer (team member from Wikimedia Deutschland)


All SubpagesEdit