New design for HelpHub in WordPress.org

The end-user documentation or HelpHub will go through a transformation, both in the design and the site map. 

The refinements in the template will improve the user experience while searching for information. These improvements include one landing page for end-user and developers documentation that will be called Documentation. This is the entry port to both HelpHub and DevHub. Although this article focuses on HelpHub, there will be changes for DevHub in the future.

Showing the look of the new end-user documentation landing page showing the 4 categories and subcategories under each in two columns. There are links to developers documentation and the forums at the bottom of the page.

Better search

The new site map includes 4 main categories and subcategories under each. This will improve search and allow new articles to be added into the existing categories without creating a ‘miscellaneous’ categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..

New site map showing categories and subcategories

New features

Documentation will have a new headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. The team is dropping the word ‘Support’ and replacing it with ‘Documentation’. This area of the website will contain reference information rather than be a place where users interact with the Support team as described in the Renaming WordPress.org Support to Documentation.

The new header for end-user documentation replaces the word Support for Documentation

A changelog was added to keep historic information on each article. The user will have a better idea of how recent the information is.

Example of changelog

Other features that will help searching are the breadcrumbs, a new documentation submenu to the categories, a more prominent table of content and, a highlighted link to Support Forums.

Example showing placement for breadcrumbs table of contents and documentation search box, including the Support Forums block.

Another new feature was the retirement of the hash character at the end of the headlines as they were an accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issue and caused visual noise. The hash has been replaced by a link icon.

Appearance phases for the headlines

Documentation on mobile

The mobile version offers faster access to the specific topic in the article by using accordions to navigate long articles on mobile. The breadcrumbs, search and table of contents will remain at the top of the article.

Example of a documentation article on mobile.

The design

The design follows the style set by the News redesign. It is cleaner, jazzier and the new template opens the canvas to improve readability. Using also the same typography connects this design to the redesign of WordPress.

The color palette is simple and muted so as to not interfere with the multiple videos and screenshots used within the articles.

The work started at WCEU 2019 Contributors Day in Berlin. The following articles describe the work previously done.

Props to @milana_cap, @kenshino, and @atachibana for their direction on this project.

Props to @tobiasfeistmantl, @fmellitzer, @davidvie, @majaloncar, @pendraq, @igorel, @nobnob, @marcio-zebedeu, @chaion07, @netpassprodsr, @bph, @timohaver, @dmivelli, who contributed to the reclassification project.

Props to @melchoyce, @karmatosed, and @beafialho for their design guidance.

Props to @webcommsat and @marybaum for reviewing and editing help of this article.

#docs, #helphub