Play all audios:
Four principles we’re using to help you stay focused while editing Wikipedia on your phone (#3 is shocking)iamjesskleinFollow5 min read·Jun 3, 2019 --
Listen
Share
Through usability testing and heuristic analysis, the Wikimedia Editing team identified that the overarching challenge for editors trying to work in VisualEditor on the mobile web is the
task of staying focused long enough to complete the edit. With that in mind, designers, product managers, and engineers on the Editing team took some time to brainstorm this subject.
Brainstorming Jobs to Be Done After completing the heuristic analysis, we created a spreadsheet of all of the identified pain points that experts and editors shared. I then took this
spreadsheet and created an affinity diagram to see if any thematic pattern emerged.
Affinity diagrams helped us to cluster similar pain points into themes. Image by Jess Klein, CC0 We ended up with five themes that we converted into brainstorming topics. We translated the
themes (saving and publishing, content exploration/manipulation, help and feedback, first run experience and UI organization) into Jobs to be Done statements to help us get into the Editor
mindset when thinking through solutions.
Our team, which includes a designer, four engineers, three product folks and a data analyst, broke into groups to brainstorm. For every idea that came up, participants identified a
hypothesis and success criteria. As this was a generative exercise, we came up with too many ideas to document in one post.
Example hypothesis statement. Image by Jess Klein, CC0The calm after the brainstorm Brainstorming was exciting and inspiring because it was the first time that I had the opportunity to think
proactively about the future of VisualEditor; however, it was also a bit overstimulating. Product and design regrouped after the activity to once again synthesize. (As a side note, our own
iteration pattern was revealed through this process. We tend to fluctuate in ebbs and flows between generating and synthesizing ideas).
Reviewing the list of interventions that we came up with, we realized that they fit into two categories which we formed as questions:
How might we make the experience more fluent?How might we help people to edit while they are editing?What does fluency look like?Image from Trust “Tru” Katsande on Unsplash, remixed by Jess
Klein, CC0 I listed below the two charts with the clustering of related. We then shared this out with the team and other product managers at the Foundation, including Marshall Miller who
leads the Growth work that we are doing. What Marshall helped us to realize is that the later question around the topic of ‘help’ is being worked on by his team. This was great news because
it meant that the Editing team could put all of our energy into making the editing experience more fluent.
Wikimedia has to figure out how to get everything out of the way so that people can make basic edits. To accomplish this, instead of revisiting the journey maps and various tools that we’ve
created sharing the list of obstacles for a user to make an edit, I took the time to think about techniques for supporting focus. I first did some cloaked research in the Wikimedia Slack
channels. I posted the question (without any context) “what techniques do you use to stay focused on a task?” and received an assortment of responses.
As any self-respecting new mom would do, I then went and consulted Pinterest for ideas. After sorting through numerous top ten lists for staying focused at work-life balance, I stumbled upon
a few themes :
Do one thing at a timeReduce stimulationSet the stage for focusWork efficiently. I abstracted the themes to see if they could apply to the feedback that I got on the Slack channel, and to my
surprise — they did!
Screen capture by Jess Klein with permission of Rita Ho, Sam Smith, and Moska Shaver, CCO This proof-of-concept helped me to realize that these general themes could act as our design
principles for designing this experience for the mobile web. These principles are a framework for us to make product decisions.
Illustration by Jess Klein, CC0Reduce stimulation Get all those distractions out of the way so that you can deal with the task at hand! For mobile design, this means that we need to try to
lessen any moments of cognitive overload. We can do this by displaying only the information that a user needs to have in order to accomplish a task and get rid of all of the extras and “nice
to have.”
Set the stage Once you get the unnecessary items out of the way, use what’s left in the room to create a space for focused interactivity. I like to think about this as placing your mat and
candles (if you are so inclined) out so that you are prepared mentally and physically to do yoga. This can be accomplished through instructional copy, user interface elements, and styling.
Do one thing at a time So now that your “workspace” is all set up, it’s time to roll up your sleeves and get to work. Start by doing one thing, crossing it off of your to-do list and then
move on to the next thing. We can support the user by asking them to make one type of edit at a time and not trying to do so much with every since button press.
Work efficiently Tackle that singular item with purpose. Work smartly so that you are making the most out of your editing time. We can support this by making optimizing for mobile users and
thinking about how users are using their phone and tablets on a regular basis.
Next Up: An Intervention to disrupt peripheral distractions Conditions are ripe for us to take these ideas and formalize them into a few testable interventions, or design approaches.
Keep up with the project and let us know what you think here or on the VisualEditor project page.
Thanks to Ed Erhart, Sherry Snyder, and Pam Drouin for proofreading and feedback.