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
 * Eric Gardner, Senior Software Engineer
 * Leza Zaman, Senior Technical Program Manager
 * Marcella L. Florence, Director of Engineering
 * Roan Kattouw, Principal Software Engineer
 * Volker Eckl, Lead User Experience Engineer, Design System and Readers Web

✉️ How to Keep Up
There are lots of ways to keep up with our work


 * Email distros: wikitech-l@wikimedia.org, design@wikimedia.org and design-systems-team@wikimedia.org (internal only)
 * Design System team kanban board for all current tasks
 * Slack channels: #design and #front-end (slack channels are generally for WMF staff only with occasional exceptions for WMDE colleagues and contractors)

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.

Vue.js component library
In 2021, the Design Systems Team took over maintenance of WVUI, the Wikimedia Foundation's experimental Vue component library. Since then, we have been continuing to add components and experiment with different technologies in preparation for designing and building a canonical UI library for all MediaWiki developers. The new library will be written in Vue.js and will serve as a successor of our current UI library, OOUI.

Vue.js Adoption
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 working with the Technical Decision Making Process group 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.

Resources

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