Design Systems Team

User interfaces, or UIs, are the primary way that people engage with Wikimedia's content on the web. Through engagement with technical contributors, partners, and WMF staff, the Design Systems Team identifies and solves key gaps in how Wikimedia makers build user interfaces by developing an overarching strategy for user experience and frontend development at scale. Our work supports audiences that are critical to developing new knowledge experiences by ensuring that they are successful in creating, maintaining, and extending features across Wikimedia properties with consistency and ease.

Wikimedia Design System
The Wikimedia Design System was developed to reduce the complexity of building UIs and streamline the process for taking them from design and development to production. As of begin of 2022, the design system is in active development with the goal of being adopted as the official system of building UIs across Wikimedia properties.

Design Style Guide
The Wikimedia Design Style Guide is where the principles and visual language of the Wikimedia Design System are defined. The style guide ensures a consistent look, behavior, and user experience across all Wikimedia products. It is managed by members of the Wikimedia Product Design Team and volunteers.

Codex
Codex is a frontend development toolkit used for implementing the Wikimedia Design Style Guide in code. As a software package, Codex includes UI components built in JavaScript (Vue.js), design tokens to store data for design values, and user-facing documentation. Codex components include wide-ranging support for internationalization and global usage, with web accessibility baked-in by default.

Technology Impact
In August 2021, the Design Systems Team organized the Vue.js Developer Summit which led to the decision to adopt Vue as the official programming framework for the design system. This decision was influenced by Wikimedia's medium-term Platform Evolution plan to prioritize modern web development practices, high performance, and ease-of-use for developers of varying experience levels. As a result, the summit sparked a code migration across MediaWiki to ensure that all Vue-based projects are using the most recent version of the framework for stability, security, and compatibility with Codex.

Team Members

 * Anne Tomasevich, Senior Software Engineer
 * Bárbara Martínez, Senior UX Designer
 * Eric Gardner, Senior Software Engineer
 * Jess Klein, Principal Designer
 * Roan Kattouw, Principal Software Engineer
 * S. T. H., Senior Product Manager
 * Volker E., Lead User Experience Engineer, Design System and Readers Web

Work With Us
You can connect with us via the following communication channels:
 * Email: Our team email list is [mailto:design-systems-team-external@wikimedia.org design-systems-team-external@wikimedia.org]
 * Phabricator: To see what we're working on, view the the team board in Phabricator. To request work, please create a ticket on the board and apply the “Design-Systems-Team-Board" tag. You can also use this template to request Codex components. From there, the core team will review and prioritize tasks.
 * Slack: #design and #front-end (Slack channels are generally for WMF staff only with occasional exceptions for WMDE colleagues and contractors)