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

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.

✉️ How to Stay informed on projects
There are lots of ways to keep up with our work
 * Email : Our team email list is design-systems-team-external@wikimedia.org. You can also reach out via wikitech-l@wikimedia.org, and design@wikimedia.org
 * Phab: 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."

Resources

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