Design Systems Team

Mission
Through engagement with WMF staff, 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.

Team

 * Anne Tomasevich, Senior Software Engineer
 * Bárbara Martínez, Senior UX Designer
 * Eric Gardner, Senior Software Engineer
 * Jess Klein, Principal Designer
 * Lauren de Lench, Senior Technical Program Manager
 * Nat Hillard, Senior Engineering Manager
 * Roan Kattouw, Principal Software Engineer
 * STH, Senior Product Manager
 * Volker E., Lead User Experience Engineer, Design System and Readers Web

Wikimedia Design System
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 guidelinesdesigned with for consistency, efficiency, web accessibility and internationalization by default.

Codex
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), design tokens to store data for design values, and user-facing documentation. See the Codex MediaWiki page for more information.

Frontend Technology
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 which led to the decision to adopt Vue.js as the official programming framework for MediaWiki.

Contribution Guidelines
In progress.

Key Results

 * 100% of right-to-left languages on Wikipedia are supported in Codex


 * 100% of Codex components are fully conformant with Web Content Accessibility Guidelines 2.1 level AA (WCAG)
 * There is no substantial increase in article page load time as a result of using Codex
 * 2+ teams commit to adopting the design system long-term in addition to Abstract Wikipedia, Readers Web, and WMDE

Components in Codex

 * TypeaheadSearch (Readers Web), Menu (non-scrolling), MenuItem, SearchInput, ProgressBar, Thumbnail, Message, Lookup, Button (disabled), ToggleButton, Tabs

Design Tokens in Figma and Codex

 * Colors, Opacities, Shadows, Borders, Animations/Transitions, Spacing and Sizing,Text Styles, Grids, Layouts, Breakpoints

Key Results

 * Increase community contributions to web products by 50% via design system contributions
 * 100% of new wiki projects with user interfaces are designed using the design system
 * There is no loss in reading or editing capabilities for any population as a result of Vue software upgrades
 * Increase contributor satisfaction around the UI component building process by 25%
 * Increase contributor velocity of building UI components by 20%

Components in Codex

 * Card, SimpleDialog, Dialog, Menu (scrollable/clipped version), Label, BouncingDots, Link, ButtonGroup

Design Tokens in Figma and Codex

 * Pending