Design Systems Team

The Design Systems Team in the Product Department of the Wikimedia Foundation is responsible for the modernization and maintenance of the Wikimedia Design System and other parts of the front-end ecosystem within and adjacent to MediaWiki. The team was created to facilitate the adoption of Vue.js at the Wikimedia Foundation along with its long-term Design System and infrastructure work.

Who is on the Team
Right now, our team is made up of bits and pieces of some of these fine people:


 * Anne Tomasevich, Senior Software Engineer
 * Bárbara Martínez, Senior UX Designer
 * Eric Gardner, Senior Software Engineer
 * Jess Klein, Principal Designer
 * Marcella L. Florence, Director of Engineering
 * Roan Kattouw, Principal Software Engineer
 * Volker Eckl, Lead User Experience Engineer, Design System and Readers Web

Wikimedia Design Style Guide
The Design Systems Team has created an inventory of existing or future UI components and is working on documenting them in the Wikimedia Design Style Guide in close collaboration with Wikimedia Product Design Team members and volunteers.

Codex
The Design Systems Team is coordinating the creation of Codex, a toolkit for designing and building user interfaces within the Wikimedia Design System that will succeed our existing UI library, OOUI. Codex will include Vue 3 components, design tokens, and documentation. Check out the Codex workboard to see the current status of this work. In Q3 of FY 2021-2022 we intend to launch an initial version of Codex that will replace the components and functionality offered in WVUI.

Migration to Vue 3
As we develop the Codex library in Vue 3, we are working on migrating the version of Vue in MediaWiki to 3.x as well. See T289017 for full details and progress.

Product migrations
Now that the Foundation has officially adopted Vue.js, the Design Systems Team will work with Foundation product teams to migrate many of our features to Vue.js and the new component library. Features that are already built with Vue.js will be migrated to the new component library. We are currently developing a process for these migrations and working with product teams to develop timelines. We'll also be providing training resources and documentation of standards and best practices.

Front-end build step
The Design Systems Team is going through the Technical Decision Making Process to converge on a front-end build step for MediaWiki.

Server-side rendering
The Design Systems Team is developing a strategy for server-side rendering (SSR) of Vue components within MediaWiki. This will likely go through the Technical Decision Making Process in the future.

How to stay informed on projects
There are lots of ways to keep up with and contribute to our work
 * Email: Our team email list is [mailto:design-systems-team-external@wikimedia.org design-systems-team-external@wikimedia.org]. You can also reach out via wikitech-l@wikimedia.org, and design@wikimedia.org
 * Phabricator: See the Design System team kanban board for all current tasks
 * Slack: #design and #front-end (slack channels are generally for WMF staff only with occasional exceptions for WMDE colleagues and contractors)

How to request work or contribute
To request work from the team, please tag tickets on Phab with “Design-Systems-Team-Board." This will move tickets to our default column in the team board, and from there, the team reviews and triages tickets to pick candidates for us to work on.

To contribute to our projects, please read through the "What We’re Working On" section above and reach out using any of the platforms mentioned in "How to stay informed on projects."

File a component addition task and add all information available.

Resources

 * Links related to Vue.js migration
 * Design System Team Phabricator workboard