How to Organize a Style Guide

Style guide


How do you organize a style guide? The information architecture of a style guide impacts why people use it, how often they seek it out, and when they think to reference it. The IA also makes some assumptions (or preferably, builds on knowledge) around who the audience is, and what knowledge they have.

In a recent client project we faced this very question, and considered three possible solutions to organize the style guide.


Style Guide by Audience

Some style guides are intended for use across organizations with multiple different audiences: editors, writers, videographers, designers, etc. Or, the organization may have several brands, with guidelines that differ for each.

For these companies, the best way to organize a style guide might be by audience. An audience-driven style guide has the Brand or Titles at the top level, and assumes that the audience will self-identify to dig deeper.

Ben & Jerry’s has content creators working on illustrations, and others using photography. For their style guide the audience is the first consideration.




Style Guide By Guideline

Another way to organize a style guide is by the type of guidelines. Perhaps there are certain guidelines that everyone in the company looks for - such as “Capitalizations”, “Voice and Tone”, or “Grammar issues”. This is particularly likely if the organization has outside writers working for them, who may not become easily familiarized with the basic guidelines.

In these cases, even if there are multiple brands, that designation becomes secondary to the guideline people are likely to search for. Allowing people to easily skim through “Grammar Issues” is helpful when coming up against the serial comma!

Cigna’s Digital Experience Standards are a great example of a style guide organized by guideline.


Style Guide By Content Type

A third way to organize a style guide is by content type. Perhaps your team works in numerous mediums, from video to blogs to press releases to social media. The style, the voice, even the grammatical rules may change from one to the next! Whether the same content creators must bounce between content types, or whether the creators are self-selecting their area of interest, content type is a useful hierarchy when multiple mediums are involved.

Mailchimp’s Voice and Tone style guide showcases how to organize guidelines by content type.


Top UX Courses at Udemy


How Do You Organize a Style Guide?

To choose the best way to organize a style guide you first must consider:

  • How many people are using this? 
  • How do they categorize themselves (e.g. writers vs editors, or videographers vs bloggers)?
  • What common questions do they ask, that this style guide will answer?

With these three questions you’ll be well on your way to determining the architecture and hierarchy of your style guide. 


What is Design System and Top Design Systems


What is design system

What is Design System?


A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.


Design systems are essentially collections of rules, constraints, and principles, implemented in design and code. These 3 attributes serve distinct functions and provide coherent, systemic order in systems from buttons to single page applications. Ref

 

Design system helps in creating coherent unified user experience not only from a single product but from overall brand (brand experience). It brings ease for end user in form of consistent customer experience and also the design, developers in crafting efficient design solutions. It is a perfect combination of Design principles, Brand guidelines, UX Guidelines, development guidelines etc. 



Let's see what experts say about design system - 

 

“Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.” 

 Chris Messina

 

“It’s the whole philosophy. It’s the design principles, the UX guidelines, the development guidelines, the implementation guidelines, the contribution guidelines, and peripherals—and everything else.”

– Brad Frost



Top Design Systems

 

Polaris by Shopify

Polaris by Shopify

Link: https://polaris.shopify.com/

 



 

Atlassian Design


Atlassian Design


Link: https://atlassian.design/

 

 

Top UX Courses at Udemy



IBM Design Language


IBM Design Language


Link: https://www.ibm.com/design/language/

 

 



Airbnb Design


Airbnb Design


Link: https://airbnb.design/

 



 

Fluent Design System 


Fluent Design System


Link: https://www.microsoft.com/design/fluent/#/

 

 



Material Design

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.


Material design by Google


Link: https://material.io/design

 


Top UX Courses at Udemy


 

Lightning Design System by Salesforce


Lightning Design System by Salesforce


Link: https://www.lightningdesignsystem.com/

 

 



 

Atomic Design by Brad Frost


Atomic Design by Brad Frost



Link: https://atomicdesign.bradfrost.com/

 



10 tools to evaluate Accessibility for UX designer

Top tools to evaluate Accessibility for UX designer


 Accessibility in the sense considered here refers to the design of products, devices, services, or environments so as to be usable by people with disabilities. The concept of accessible design and practice of accessible development ensures both "direct access" (i.e. unassisted) and "indirect access" meaning compatibility with a person's assistive technology (for example, computer screen readers). Wiki


Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:

- perceive, understand, navigate, and interact with the Web

- contribute to the Web


Web accessibility encompasses all disabilities that affect access to the Web, including:

- auditory

- cognitive

- neurological

- physical

- speech

- visual

(W3.Org)


Checking accessibility of designs & products is critical & required for designers, but sometimes evaluating designs or websites with respect to accessibility principles can be complex and difficult. Here are some accessibility checking tools which can make designer’s life easier.  




WCAG Contrast Checker


1. WCAG Contrast checker

by Rumoroso

Checks for compliance with the contrast levels of foreground and background colors combination based on the requirements of WCAG 2.1



Headings Map Accessibility


2. HeadingsMap

by Rumoroso

It generates a document map with headings and/or with sections in HTML 5. It shows the headings structure, the errors in the structure (ie. incorrect levels), and it works as HTML5 Outliner too.


3 Months free Interaction Design Foundation




Make Sense accessibility tool


3. Make Sense 

Reduce the complexity and costs of digital accessibility. Scans static and dynamic content for 360° accessibility. It continuously monitors for violations, automatical fixes common issues in real time, and provides tools to resolve more complicated problems directly from the platform.





Web accessibility checker


4. Web Accessibility Checker

By Mads Kristensen

The easiest way to perform accessibility checks on any ASP.NET web application. Fully customizable and support all the major international accessibility standards.





Achecker



5. Achecker 

This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. See the Handbook link to the upper right for more about the Web Accessibility Checker.





WAVE Web Accessibility tool


6. WAVE – Web Accessibility Evaluation Tool

WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.





Color Oracle simulator


7. Color Oracle – color blindness simulator

Color Oracle is a free color blindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.



Top UX Courses at Udemy




Contrast color accessibility


8. Contrast — Color Accessibility

Make sure the text you're designing isn't too light in your interface designs with Contrast. Combine this simple little menu bar app with your favorite design tool and design with accessibility in mind.



STARK accessibility tool


9. Stark 

Baked right into the software you love to use, Stark empowers you to design with accessibility in mind from conception of brand to fruition of product.






Spectrum accessibility tool


10. Spectrum

Offered by: Yehor Lvivski

Instantly test your web page with different types of color vision deficiency.

Color Vision De´Čüciency (CVD) affects people’s ability to distinguish certain colors. 



For more information: 

Web Content Accessibility Guidelines

cognitive accessibility guidelines

Designing for Web Accessibility

What is Accessibility?

Web Accessibility Evaluation Tools List


3 Months free Interaction Design Foundation



Findability and Usability: The Cognition of Searching


Findability is essential to usability.  But how do individuals search for and locate things?  It turns out, our brains engage in two processes to find items.  Understanding them is key to creating findable features and usable designs.


Brain

Image Sources: pixabay.com


Guided Searching

The mind searches based on familiarity.  If we’ve used something before, we have a mental picture – or model – of what that item looks like.  When searching for known items, our minds scan our surroundings or screens for something that matches these models.  This guided searching is why similar products in a marketplace look so much alike – prior experiences have shaped what individuals look for when using something. 

 

Consider word processing software.  Why does the “bold text” feature in Open Office look similar to that in Microsoft Word?  Because users have created mental models for what these features should look like based on prior experiences with programs like Word.  They are now conditioned to search for such designs when using similar technologies.  Features that do not resemble these expectations will be more difficult to find and make products more difficult to use.



 

Random Searching

Finding new things is a different process because we have no mental model to guider our searching.  Rather, we look for items that stand out from their surroundings.  It is contrast – or difference from surroundings – that draws our attention during such processes.  This is random searching.

 

With certain items, there might be no prior product that filled a market space, so users have no mental models to guide searching.  Using these products means making feature easy to find, and contrast is key.  Central feature must stand out from their surroundings so users can locate them.  This involves

·       Using different colors to maximize contrast and distinguish features from a background (e.g., a red button on a black background)

·       Limiting the features available to minimize the things users focus on (e.g., 5 or fewer icons)

·       Placing features in prominent places (the center of a screen) where users look first

These strategies can help individuals find features when using new products and make new items easier to use.



Top UX Courses at Udemy


 

Identifying Features

In guided searching, users know what they are looking for and know what the items does.  So, when searching for the “bold text” feature, once I encounter it, prior experience tells me how to use it. 


Icons

Image Sources: pixabay.com


With random searching, finding find a feature doesn’t mean knowing how to use it.  Rather, features in new products should contain some something like text embedded in an icon to indicate what the feature does (e.g., embedding the words “upload files” into the icon for uploading files). 

 

Final Thoughts

We need to find features to use products effectively.  The more we understand the dynamics of the mind’s searching processes, the better we can address usability when designing products. 

 


About Author

Author bio image

Kirk St. Amant 
Kirk St. Amant directs the Center for Health and Medical Communication (CHMC) at Louisiana Tech University (USA) and is an Adjunct Professor of International Health and Medical Communication with the University of Limerick (Ireland) and a Research Fellow and Adjunct Professor of User Experience Design with the University of Strasbourg (France). 



 


Ask the experts: Talk with Kishan (Design & Human Factors Lead)

UX Talk with Kishan


Ask The Experts

A new milestone, UXness has initiated a step to connect with experts and understand their thoughts on certain topics. Directly connecting with experts and hearing from their own words, doesn't it sound interesting? Yes it is. In this series, please welcome UX Expert - Kishan Salian (Design & Human Factors Lead). 

Expert Bio

Kishan Salian UX Lead

 Kishan Salian

Design and Human Factors Lead
Laerdal Bangalore LLP

I have been working with Laerdal Bangalore LLP from the last 2 years as Design and Human Factors Lead. My primary role has been to build and manage a team of talented UI and UX designers, Propose a robust UX roadmap which includes setting UX vision, align with stakeholder goals, and prioritizing ideas for the projects. I have over 15 years of combined experience in User Experience and UI Design and hold a master's degree in Interaction Design. I have mainly worked in the area of User Experience, User-Centered Design, Ubiquitous Computing, Child Computer Interaction, and Web Accessibility.


3 Months free Interaction Design Foundation


Designing for Healthcare and Post Pandemic 

Q. You have an amazing experience of crafting design solutions for various domains, how the healthcare domain is different from all when it comes to user experience design? 

I'm fortunate to have an opportunity to work in various domains from retail, banking, insurance, to travel throughout my career. I have been working as a Design Manager crafting experiences in the area of education in healthcare. It has been the most exciting and challenging experience while working for the medical and healthcare domain. 


Designing for healthcare can be different from other domains as the design solutions provided could directly or indirectly impact the lives of the people around us. 


The World Health Organisation (WHO) (6) has estimated that nearly 138 million patients witness harm caused by medical errors every year, in medium and low economic status countries (including India) (WHO, Medication Without Harm). A Harvard study by Prof Jha (7) says that 5.2 million medical errors are happening in India annually. Similarly, the British Medical Journal quoted that India like any other developing country is recording a lot of medical errors. 


It becomes very important for the user experience practitioners to take up the initiative of understanding the healthcare domain, identify the critical problems through rigorous user experience research, and carefully craft the best solutions to match the end-users mental model. 



Top UX Courses at Udemy



Q. What is the role of user experience in the healthcare domain for crafting a better experience? 

A major shift that has been noted in the area of healthcare from a process-centric to a patient-centric approach. The user-centered design approach has been seen as the future of healthcare. Empathy will play a key role in closely relating to healthcare professionals and connecting with patients while designing the best experiences. There is a huge opportunity for designers to design an ecosystem of care. The designers have to take into consideration a few points while crafting the best experiences.


Design for clarity, efficiency, and effectiveness

Beyond any respective domains, a designer should always take into consideration the various facets of the user experience like useful, usable, desirable, valuable, findable, accessible, and credible. When it comes to designing for healthcare there are few of these facets that could weigh more than others. 


Bansi Mehta (1) has wonderfully explained that a UX designer must keep that in mind, especially in healthcare, the design needs to work like a scalpel and not like a Swiss knife, i.e. the design needs to be simple and intuitive and not distracting. The UX designer must resist the urge to over-design. The design should not overburden the healthcare professionals with the cognitive load which may cause someone to commit grave mistakes. 


The applications at its core should adhere to a few factors like being usable, findable, and accessible while other facets could support based on the context of use within healthcare. The situation in which healthcare professionals work could be quite intense and stressful and they need the technology to assist them in their work. The designs should be simple, easy to use, assist efficient decision making, and effectively fulfil the most critical goals of the users.


Design with regulations

The overall user experience process followed to provide design solutions in healthcare could be similar to other domains. An organization could adopt a traditional or double diamond process that could suit their pattern of work. 


What sets apart is for the designers to strictly adhere to the usability standards like Ergonomics of human-system interaction (ISO 9241-11:2018), Medical devices — Part 1: Application of usability engineering to medical devices (IEC 62366-1:2015) and Medical electrical equipment - Part 1-6: General requirements for basic safety and essential performance - Collateral standard: Usability (EN 60601-1-6) when it comes to designing from digital applications to medical devices. 


The first standard Ergonomics of human-system interaction (ISO 9241-11:2018) explains each component in the definition of usability and assists in interpreting it correctly: “the extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use”. Similarly, the second and third standard focuses more on applying process like analysis, design, verification, and validation of usability while developing the medical devices which is related to patient safety.


Andreea Popescu in her article "The UX process for healthcare apps" (3), suggested that we should consider the internal processes at a human level like wage sanctions, loss of work, and/or legal actions along with standards followed while developing software and medical devices.


Design with care, responsibility, and patience

It is very important for each individual in the team (designer, developer, product manager, domain experts) need to work together to build the solutions. The design team should work towards building experiences that are empathic towards patients and their wellbeing. 


Chris Kiess has rightfully written in his article (4), as designers, we will need to carve out our own niche with design becoming a greater part of care delivery. We’ll move beyond designing a feature, a product, or even a singular experience. We need to change our approach and begin designing systems of care.


It is also critical for the designers to practice responsible design and their solutions should be derived from intense user experience research and closely understanding the core problems. The situation for designers could be difficult and frustrating while conducting research or validating the solutions due to various reasons as the healthcare sector could be very unpredictable. The designer should have a high level of patience and plan the overall research and user interactions smartly. 


One of the articles published in YUJ Designs (5) highlights the UX designers should practice responsible design and enable businesses, organisations, and healthcare professionals to use all the tools available to them effectively. It could be achieved by applying a data-driven design approach.



3 Months free Interaction Design Foundation



Q. What do you think about the user research activities in the post-pandemic world? Will technology play a role in that? 

The current unprecedented situation has bought many uncertainties across the globe and it has impacted the way user research is conducted. I believe the user experience field has well-developed research techniques that support various levels of research activities from in-person to remote. Researchers have been using various technological tools to support their research making it easier for eliciting meaningful insights and providing easy access for the team to take actionable decisions. 


Organization and Research Group Perspective:

Many companies and research groups have already modified the way they conduct research activities in the current situation. The difference could be the overall strategy in which the research could be conducted in the future. The overall budget could be closely reviewed which could lead to a reduction in the spending’s for the overall research activities. The dependency on research techniques like "unmoderated user testing", "diary writing", “remote user interviews” could increase in the coming days to control the overall budget spent on product research. 


The organisations could go into the extent of outsourcing some parts of the research and maintaining a small in-house research team. The organisations have already been opting for these services for assisting them in conducting research activities. The focus will shift more towards the optimised research delivering higher value to the organisation. 


A fine balance will be needed to be maintained between the lean approach in product-oriented research and a small agile research team for exploring opportunities that could bring far better value to the company. The lean research approach will help to maintain the current product in the market as well as a small agile research team could assist in breaking smaller grounds in the area of innovation within their respective market. It will have better chances of yielding a better return on investments for the organisations.


While most of the activities could be planned to be conducted remotely, there can be some unavoidable situations to conduct in-person user research. The testing medical devices, wearables, and the unique context of use could be some scenarios where researchers have to set in-person field studies for eliciting information and insights. 



Top UX Courses at Udemy


One of the most noted independent user experience companies UX alliance has been researching in the area of "UX Safety Tips for in-person research" (8). The research suggests an innovative way of setting up user research labs, sanitisation of equipment, and steps to ensure the safety of the users and research teams to conduct successful research sessions in the current situation and post-pandemic world.  


Researcher and Designers Perspective:

We are going through one of the worst pandemic situations which could give rise to many knowns and unknowns. The post-pandemic world could bring change in the way we interact with each other, the environment of work, approach in which business is conducted, etc. 


This is a unique opportunity for the researchers to be in the center of change and guide the organisations to reposition their products and services to be more relevant to their users and market. 


Tom Hayes, UX researcher, UserZoom has written in "The role of UX research now and beyond the COVID-19 pandemic" (9) that user experience practitioners need to closely identify the change in user behaviour on how the user interacts with the product.


As researchers, we have a great responsibility to highlight the value of our research through effective strategy and efficient decision making. We have to be the torchbearers to guide the organisations through the unknown times. This could be possible through user-centered research with keen observations, constant insights, robust and proactive reporting.



References:

  1. Why lives depend on design decisions – UX in healthcare - by Bansi Mehta.
  2. Medical Device Usability: Highlights of European Regulations and Standards
  3. The UX process for healthcare apps by Andreea Popescu
  4. Healthcare UX: a journey just begun
  5. Top UX challenges in healthcare industry
  6. The third WHO Global Patient Safety Challenge: Medication Without Harm - by WHO
  7. 5.2 million medical errors are happening in India annually: Dr Girdhar J. Gyani
  8. Webinar on safety tips for in-person research by UX Alliance
  9. The role of UX research now and beyond the COVID-19 pandemic




UX Quote by Kishan Salian