WMDE Engineering/UserExperience

We want to improve the usefulness and usability of Wikimedia projects.

How we work – Lean UX
We combine creativity and research to create functionality and interfaces.





Tasks:
 * Usability Testing
 * Needfinding
 * Create Interface Designs
 * Consulting on UX topics and help others to solve minor UX problems themselves.

Needfinding
What are our communities’ motivations, activities and problems? What is useful for them?

For this we talk to users and/or observe them doing their work.

Create Interface Designs


We design new interfaces or improve older ones using sketches on paper, drawings in Inkscape or programming in HTML and CSS. The designs consider usability rules and Wikimedia styleguides.

Usability Testing
Does the interface work like we expect? Is it usable? We let people try our UI and functions and collect their problems.

Consulting on UX topics
We help with suggestions and assessment of product plans or interfaces.

Tools

 * Pen and Paper we use to do early drafts and interactive paper prototypes
 * Inkscape is an editor for SVGs and can be used to create mockups, banners or icons.
 * Libre Office Impress allows us to create slideshows as well as to create prototypes (Article talks about Powerpoint, but the methods apply to Impress, too). Also, Libre Office Draw can be useful, in particular with the CC-BY Draw Mockup shapes from Mark Lautman. (Tutorial to create own custom shapes in XML)
 * draw.io is an open source, online diagram editor, useful for mockups and flowcharts. It also integrates into several online services. For mockup creation it is best disable connection arrows and connection points in the diagram settings (just click the canvas, they will appear in your right hand sidebar)
 * For remote research: https://meet.jit.si/ is an open source service which allows video, audio and screen sharing from the browser, without installation. We also use other services – if possible whatever our participants prefer.
 * Recording your screen can help others to understand workflows or problems in use better. Each Operating System has its own solutions for this.
 * Cutycap is a command line based too which will generate an (semi) editable (e.g. using Inkscape) svg image from a webpage, e.g.  cutycapt --url=https://de.wikipedia.org/wiki/Wikipedia:Hauptseite --out=WP.svg  will generate an image of the German Wikipedia's homepage and will put that in the file WP.svg in your home folder.