7. Organizing Content

While the available content undoubtedly is the most important aspect towards providing value to the users of a styleguide, the actual user interface cannot be neglected. If finding and accessing the desired information becomes an unnecessary burden, even a once up-to-date online documentation will ultimately become obsolete. With the insights I gathered from analyzing the user interviews, as well as some inspiration from other public styleguides, I came up with an overall structure and some feature concepts aimed to make working with the styleguide efficient and enjoyable. As many interviewees wished for the system to be unobtrusive, getting out of their way and putting content in focus, I aimed for designing the styleguide to be as simple and straightforward as possible. As it has become common for design systems, but also in an effort to make it more intriguing to discuss with colleagues, I decided to give the system its own name. By giving something a name it is essentially being brought into existence, making it tangible and shareable (Britton, 1993). Taking up on the iconic Apple Human Interface Guidelines, I wanted to emphasize the fact that people and our impact on their lives are at the core of every design decision we make. In the following, I will evaluate how I arrived at my final concepts for the Mister Spex Human Experience Language.

Content Groups

Having a clear information architecture is important for just about any kind of website in order to support its users in navigating the website with minimal cognitive effort. For a styleguide, however, enabling fast and efficient content discovery is especially essential. I created the initial information architecture based on the previously mentioned UI map that was used to visualize dependencies within the product’s interface. When performing tests with users, it became apparent that the same structure would not work for the system’s navigation. While people found it insightful and understandable when seeing the map, without the complete picture problems were voiced unanimously. For one, the deep, multi-step hierarchy posed a problem since the participants had trouble estimating the granularity and were often negatively surprised when navigating one layer deeper. Also, not thinking about abstract user interface categorization in general, most users found category titles such as Action UI and Informative UI more confusing than helpful. Luckily, the chosen functional element names on the lowest level were well understood.

With the input from user testing I eventually came up with a completely revamped information architecture that aimed to be a lot more straightforward.).

Content Groups and Pages

Settling for just two layers of hierarchy simplified the overall structure greatly and turned out to make navigation almost instantly easier. Flat hierarchies generally tend to be most effective for systems with clear separation of content and distinct, recognizable category names (Whitenton, 2013a). For finding a suitable arrangement and fitting taxonomy for collective categories I went by the basic idea of Atomic Design as described by Frost (2013a). While the suggested taxonomy of atoms, molecules and organisms provides an effective way of conveying inherent hierarchy, it did not fully resonate with my test participants. Together we eventually settled on a simple naming scheme that most participants could relate to in regards to their daily work. Following the general Atomic Design principles is highly helpful, though finding a common vocabulary that is universally understood throughout your company is essential for making it both accessible and useful (Walton, 2016). Laying this newly defined hierarchy of categories out on the same level of navigation gives the user an immediate overview on the complete content of the guide, making it easier to navigate efficiently. The final top level groups of content are:

  • Human Experience Language: Titled by the name of the design system, this is the introductory category including the guide’s home page. It contains pages for Vision & Mission as well as Brand Values, offering information on long term goals and general guidance for decisions regarding features or content to everyone in a prominent place, hence reinforcing their importance. The final page of the category is Design Principles. It covers the overarching thoughts and ideals guiding all design decisions and is an essential part for making the system both comprehensible and expandable for others. Due to the limited amount of content at the current stage I decided to make the section part of the introductory category. As the design system progresses and a coherent visual language becomes apparent, it is advisable to make Design Principles a separate main category. This will allow for emphasizing its importance and, more importantly, cover the fundamentals in greater detail.
  • Style: This section covers the basic visual ingredients that make up every user interface: color, typography, space and iconography. Everything visible on a page can essentially be created through a specific combination of these ingredients. As the visual basis of the design system, they ensure an underlying level of consistency throughout even the most diverse designs. Additionally, I added the general design principles of motion and elevation as separate pages to it since, just as the other aspects of the Style section, they directly impact the on-screen appearance of elements. Eventually, they should be included into the separate category of Design Principles mentioned above. While it is the most logical categorization in my opinion, it also was the majority choice by participants in the UI Naming Questionnaire.
  • Elements: Elements are defined as small, functional parts of the user interface. They can be easily used like modular building blocks and create consistency throughout the system by following simple rules. The most common elements of a user interface are buttons, text fields, radio selections and the like. By being the most frequently used parts when building pages and features, while also being visually complex and rich of interactivity, providing a reusable documentation of a product’s elements generally has the biggest, most immediate impact. Hence, building a comprehensive library of elements makes for an optimal starting point of any styleguide project. In my research, none of the participants had difficulties describing the meaning of the term elements in their own words, making it a reliable choice as a main category.
  • Components: Components can be explained as more complex parts within a design system, comprised of multiple individual elements forming a bigger functional group. While most participants were able to correctly guess this sections meaning, not one was completely sure about their decision. Though the relationship can easily be explained, this inherent uncertainty could already pose a barrier towards content exploration. I preliminarily decided for this separation in an effort to keep the content of the categories at a manageable amount. While Elements and Components could just as much be merged into a single category, I am unsure if the resulting magnitude of subcategories would help or hurt user orientation.
  • Layouts: As one of the most requested features in the user interviews, layouts are an essential part of a functioning design system. This category comprises various layout templates to be used according to the type of content, performance goal and the overall tonality of a topic. When setting up new pages, one can pick, choose and combine validated layouts into custom combinations matching their precise requirements.
  • Imagery: Describing all aspects of a brand’s graphical assets, this category plays an important role in creating and ensuring visual consistency throughout a product. It includes rules for product and lifestyle photography as well as the style and characteristics of illustration.
  • Voice & Tone: As previously established, utilizing a coherent and characteristic style of writing conveys a strong sense of consistency, quality and personality associated with a brand. The Voice & Tone category features sections on interface writing, language characteristics for various types and tonalities of content as well as guidance on direct customer communication.
  • Commercial: This section groups everything that is less relevant for product design, but rather focused on general brand appearance. It combines the contents of a Brand & Identity Guide with design directions for various types of print material. Among others, it describes rules for designing packaging, magazine ads, event material and even brand representation in TV spots.
  • Process: Whenever a user wishes to request an addition to the design system, this category will provide assistance. Information on the styleguide team and their unique responsibilities lets users quickly find out who to contact about a specific inquiry. Furthermore it includes the already planned roadmap of features. This serves as reinsurance for the timeliness of data, avoids users to send duplicate requests and stirs excitement for upcoming features. Finally, the section on maintenance explains the product development process and ideally offers a request collector for directly voicing needs and problems.
  • Resources: In contrast to the previous sections, this is not a reasoned documentation of decisions but a hub for accessing frequently needed files and design resources. It contains reusable parts for work with design applications, such as UI elements, icons and fonts, but also photography packs, brand logos and illustrations that can be useful for anyone within the company. While not last in importance, it is deliberately put in last position, making it easy to find and access repeatedly.

Like what you read? Give Pascal Heynol (Becker) a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.