Four principles we’re using to help you stay focused while editing Wikipedia on your phone (#3 is shocking)
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.
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.
The 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?
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 time
- Reduce stimulation
- Set the stage for focus
- Work 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!
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.
Reduce 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.
