In order to retain trust, as well as reflect a sense of quality and personality, it is essential for any digitally operating company to keep their holistic communication towards its customers consistent. While consistency throughout various channels and media is to be aspired, ensuring coherence for a company’s own digital products is downright crucial. Styleguides were meant to work as a reliable tool for documenting all of a company’s means of communication, such as visuals, colors, language and the like. Essentially everything a company produces, that will be seen or heard by a prospective customer. Originated as extensive printed guidebooks, most styleguides couldn’t keep up with the pace of modern digital development, eventually becoming more of a burden to work with than an aid. Subsequently, company’s digital appearance becomes messy and inconsistent, resulting in a loss of customer trust and perceived quality.
At the example of Mister Spex, utilizing the proven process of user centered design, I set out to design a styleguide meant to last and be useful over time. Starting out by analyzing the state of modern styleguides, I identified how the various types of specifically focused guides each only covered a rather narrow area of interest, thus severely limiting the value they can provide. The recently emerging design systems, in contrast, turned out to be more useful resources, unifying many of the previous types and thereby significantly broadening their scope as a unified hub for company communication. Through interviewing prospective users and analyzing results through an affinity diagram, I was able to collect essential requirements regarding content, features and interpersonal process. Through two iterations of user testing paper prototypes I could evaluate and refine the proposed set of features and eventually design a solid styleguide concept comprised of content, information architecture and user interface that matches our user’s requirements. Equally important, I designed a three step process that enables a styleguide to gain management buy in, get established within the company and eventually become an integral part of the organization.
The proposed solution addresses and solves the main problems that digital styleguides are facing, as illustrated in chapter 2, in four major ways.
- As a centralized online platform, the exact same source of documentation becomes universally accessible to people working from within as well as outside the company. The styleguide is device independent and works reliably, enabling anyone to access the same information. It avoids the issues of versioning all together, thus the guide remains up-to-date. By reinsuring users to be working by valid guidelines it avoids confusion and may eventually prevent the guide from becoming obsolete.
- By including a wide variety of content instead of deliberately limiting scope, the styleguide is able to provide value to a broad range of people throughout the company. Even more, it provides deeper value for each individual user by providing helpful context on the design system as a whole. As a result, the styleguide will eventually become an essential part of work routine within the company.
- Through a solid information architecture and a thoughtful user interface, it covers the needs of experienced users and novices alike by offering fast navigation as well as allowing for intuitive exploration of content. It provides great efficiency and will accelerate work for employees working on any type of company communication, hence spreading excitement and gaining advocates throughout various departments.
- Gradually building a dedicated team responsible for styleguide development will ensure and grow its relevance and value over time. By anchoring the styleguide as an individually developed product within the company structure, knowledge and responsibilities will spread and distribute, enabling the guide to live on independently of its initial creator.
My work on this project built the foundation for implementing a functioning styleguide customized to our organization. Thus, the subsequent step will be initiating stage 1 of the proposed process, enabling people to work more efficiently and spreading excitement throughout the company.
By applying the established user centered design process I was able to design a solid styleguide suitable for the specific requirements of online eyewear retailer Mister Spex. Yet the problems posed by obsolete or non existing tools for consistent communication are still widespread and make work unnecessarily difficult for employees of many companies. Thus it raises the question if the results from this thesis can be considered as universally valid or rather should be seen as a successful proof of concept.
By being purely founded on a combination of general research in the field and qualitative user testing, an applicable subset of results may be considered universally valid and thus can be reused by others:
- Building the design system as a centralized online platform eliminates the severe issues associated with versioning and distribution of a system. While in my opinion the benefits of making it publicly available far outweigh the potential downsides, more secretive companies could employ an authentication system for accessing classified information.
- Utilizing a vertically stacked navigation system positioned on the left side of content serves as an efficient means of navigation and provides easy orientation within the structure of a complex system. Given the special usage requirements of styleguides I can also wholly recommend the suggested interaction pattern of only navigating on selecting subsections. It is not without reason that this combination is growing popular for use in design systems.
- Including code and design specifications into a company’s styleguide is of course relevant for developers and designers respectively, though it also provides value above these precise user groups. I strongly recommend to visibly include these among all other documentation and not to hide it behind a toggle. Being subjected to this information demystifies programming and design for employees from other disciplines, lowering the barrier for involvement and generally encouraging exchange throughout the company.
- Lastly, including a dedicated Resources section a can be thoroughly recommended for any design system. Banking on the necessary collection of available information, this section is one of the easiest to implement. It instantly delivers value by unifying visual assets while entailing no particular downsides.
Other aspects of the results, however, can only be recommended conditionally. While the following could be adopted as is, I recommend to only take these concepts as an initial state of orientation for adapting them to the specific requirements of your individual situation.
- The cyclical process model proposed in chapter 6 can be recommended as a starting point for styleguide development, particularly as stage 1 should be mostly universally applicable. The applicability of the subsequent stages, however, largely depends on the specifics of a company’s organization. As an example, employing one delegate from every affected department in stage 2 becomes insufficient for substantially bigger corporations. Resorting back to the original Federated model (Curtis, 2015) includes the need for employing automated means of information earlier.
- The basic structure and information architecture as proposed here should largely be transferable as most websites and digital products are made up from the same parts and harness the same means of communication. While this structure can be used as a basic starting point, the required content, logical grouping and most importantly, shared nomenclature, are unique to every individual setting and largely determine the success of a system.
- The approach for enabling user exploration of content, as proposed in chapter 7, was well received with test participants and largely seen as a welcome addition. While the basic notion of making content explorable for novice users is useful either way, the proposed solution has not been tested to an extend where it can be universally recommended. I therefore suggest for experimenting with other approaches or at least performing a user test on the proposed model with in order to assess its feasibility for your setting.
While the presented results indeed offer some universally valid concepts, the work’s main value does not rely in providing an all-purpose template for building styleguides. Instead, it shows how applying a sound process for research and design can produce a solid concept that appears feasible for tackling the main challenges modern styleguides are facing: remaining useful and up-to-date over time. Thus, the applied user centered design approach can be boundlessly recommended and should be considered an essential part of any effort towards creating a company styleguide.
That’s all, folks! I hope you enjoyed reading about my work on styleguides at Mister Spex and got something out of it.
If you like what I write and want to make me smile, simply 👏👏👏, comment and/or follow. Either way, thanks a ton for reading! — Peace