Content Design

As illustrated on our experience map, potential contributors often lurk and review a project’s online spaces in order to gain an understanding of the community. While the Web Compat project has great content for lurkers, it’s spread across the mailing list archive, Github, and personal blog posts. Thus, building out the content for the main site will be an important aspect in attracting newcomers.


The contributor page currently contains panels that expand to show steps that outline how-to participate. It’s a great overview of the process. However, the page would benefit from additional content.

To improve the onboarding of newcomers, variations of the contributor page will be redesigned and tested with users.

First, additional content needed to be drafted in order to give users a better understanding of the project and explain how their interests and skills might align with volunteer opportunities. It was decided that the page should focus on specific roles that volunteers would in effect be able to sign-up for.

The roles are:

  • Bug reporter
  • Issue Triager
  • Web Opener
  • Community Builder
  • Site Contributor

Tone and Style
While drafting the content, the topic of the desired tone of voice came up. The general consensus was that it should be friendly, not overly formal, and keep with Mozilla copy conventions. So contractions and personal language that addresses users directly– such as “you, we, and us” were used. Also, referring to site visitors as “volunteers” instead of “you” would make users think the site owners put them in a different and separate category from themselves.

Given the global nature of the project, the content also needs to be very clear, as English isn’t everyone’s first language. Using words with fewer syllables and shorter sentences helps maintain clarity for all.

What’s in it for me?
Some open source contributors are motivated by altruism, networking and learning a new tool. Which is why the line “Learn new skills. Connect with others. Improve the Web” was included at the top of the page as a sort of tagline.

Screen Shot 2017-02-09 at 5.01.07 PM.pngDescriptive Links
The copy references and links to relevant communication channels and pages. Instead of using terms like “click here” or “more,” the reader is given a strong clue of exactly what they’ll get if they select “IRC channel” or “diagnose issues.”

Mockup and Iterate
Once a draft of the content was written, mockups ideating a possible new design were put together. As mentioned, the current how-to steps are in individual accordion panels. This results in the user needing to scroll past the expanded content to see the other how-to sections. An alternative design using tabs was mocked-up. The possibility of creating individual pages for each role was also discussed.
Screen Shot 2017-02-09 at 5.02.30 PM.png
The concern of the redesigned page being too text heavy was raised. Images would help visually break-up the content. However, we would need graphics that support the text and not random stock images. Icons illustrating the specific jobs might be an option, the challenge comes with finding relevant images that truly represent each role.