The handbook is text heavy, relying on paragraph text, text links, and at best embedded images and video or mermaid diagrams. Users have little control over how video and images appear, and mermaid diagrams are difficult to work with and give little visual control. Oftentimes some visual design is a much more efficient way to communicate something, or to make a page more scannable, or a difficult concept easier to understand. We’ve made a few attempts at visuals in the handbook, for example: - [Here](https://about.gitlab.com/handbook/product-development-flow/#workflow-summary) - Product development flow visualization that links reader to relevant sections - This was done with an image map that was difficult to implement and is inefficient to update. - We would need to find a Mac-compatible SVG editor that allows you to add links to objects.  Preferably a free one, but the team tried a bunch of free ones (native and web-based) and couldn’t find anything that works. - There’s nothing in Markdown that can help us here, so whoever is going to be doing this needs to be prepared to work directly in HTML, HAML, and/or Ruby. - Image maps are less than ideal for a number of reasons including accessibility and discoverability. But more importantly here, they’re hard to create without specialized WYSIWYG tools - Graphviz might work. We should find a designer who can help with this. Implementing is easy though, just follow the example. - [Here](https://about.gitlab.com/handbook/product/product-manager-role/learning-and-development/#general-product-management-learning-content) - Product L&D page where we used emojis to replace redundant headers and make the content more scannable and easy to get to. - This was difficult to implement due to markdown not recognizing the emojis in headers, and the anchor links didn't work without custom HTML that we had to test many versions of before it worked.