{"id":4010,"date":"2019-01-17T15:12:31","date_gmt":"2019-01-17T20:12:31","guid":{"rendered":"https:\/\/blog.mozilla.org\/ux\/?p=4010"},"modified":"2019-02-05T10:35:23","modified_gmt":"2019-02-05T15:35:23","slug":"reflections-on-a-co-design-workshop","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2019\/01\/reflections-on-a-co-design-workshop\/","title":{"rendered":"Reflections on a co-design workshop"},"content":{"rendered":"

Co-design workshops help designers learn first-hand the language of the people who use their products, in addition to their pain points, workflows, and motivations. With co-design<\/a> methods [1] participants are no longer passive recipients of products. Rather, they are involved in the envisioning and re-imagination of them. Participants show us what they need and want through sketching and design exercises. The purpose of a co-design workshop is not to have a pixel-perfect design to implement, rather it\u2019s to learn more about the people who use or will use the product, and to involve them in generating ideas about what to design.<\/p>\n

We ran a co-design workshop at Mozilla to inform our product design, and we\u2019d like to share our experience with you.<\/p>\n

\"Image<\/a>

Sketching exercises during the co-design workshop were fueled by coffee and tea.<\/p><\/div>\n

Before the workshop<\/strong><\/p>\n

Our UX team was tasked with improving the Firefox browser extension experience. When people create browser extensions, they use a form to submit their creations. They submit their code and all the metadata about the extension (name, description, icon, etc.). The metadata provided in the submission form is used to populate the extension\u2019s product page on addons.mozilla.org<\/a>.<\/p>\n

\"Screenshot<\/a>

A cropped screenshot of the third step of the submission form, which asks for metadata like name and description of the extension.<\/p><\/div>\n

 <\/p>\n

\"Screenshot<\/a>

Screenshot of an extension product page on addons.mozilla.org.<\/p><\/div>\n

 <\/p>\n

The Mozilla Add-ons team (i.e., Mozilla staff who work on improving the extensions and themes experience) wanted to make sure that the process to submit an extension is clear and useful, yielding a quality product page that people can easily find and understand. Improving the submission flow for developers would lead to higher quality extensions for people to use.<\/p>\n

We identified some problems by using test extensions to \u201ceat our own dog food\u201d (i.e. walk through the current process). Our content strategist audited the submission flow experience to understand product page guidelines in the submission flow. Then some team members conducted a cognitive walkthrough<\/a> [2] to gain knowledge of the process and identify potential issues.<\/p>\n

After identifying some problems, we sought to improve our submission flow for browser extensions. We decided to run a co-design workshop that would identify more problem areas and generate new ideas. The workshop took place in London on October 26, one day before MozFest<\/a>, an annual week-long \u201ccelebration for, by, and about people who love the internet.\u201d Extension and theme creators were selected from our global add-ons community to participate in the workshop. Mozilla staff members were involved, too: program managers, a community manager, an Engineering manager, and UX team members (designers, a content strategist, and a user researcher).<\/p>\n

\"Image:<\/a>

A helpful and enthusiastic sticky note on the door of our workshop room.<\/p><\/div>\n

 <\/p>\n

Steps we took to create and organize the co-design workshop<\/strong><\/p>\n

After the audit and cognitive walkthrough, we thought a co-design workshop might help us get to a better future. So we did the following:<\/p>\n

    \n
  1. Pitch the idea to management and get buy-in<\/li>\n
  2. Secure budget<\/li>\n
  3. Invite participants<\/li>\n
  4. Interview participants (remotely)<\/li>\n
  5. Analyze interviews<\/li>\n
  6. Create an agenda for the workshop. Our agenda included: ice breaker, ground rules, discussion of interview results, sketching (using this method<\/a> [3]) & critique sessions, creating a video pitch for each group\u2019s final design concept.<\/li>\n
  7. Create workshop materials<\/li>\n
  8. Run the workshop!<\/li>\n
  9. Send out a feedback survey<\/li>\n
  10. Debrief with Mozilla staff<\/li>\n
  11. Analyze results (over three days) with Add-ons UX team<\/li>\n
  12. Share results (and ask for feedback) of analysis with Mozilla staff and participants<\/li>\n<\/ol>\n

    Lessons learned: What went\u00a0well<\/strong><\/h3>\n

    Interview participants beforehand<\/em><\/p>\n

    We interviewed each participant before the workshop. The participants relayed their experience about submitting extensions and their motivations for creating extensions. They told us their stories, their challenges, and their successes.<\/p>\n

    Conducting these interviews beforehand helped our team in a few ways:<\/p>\n