My process to develop a cloud-based style guide

Created for my senior project and my colleagues, I developed the style guide for the College of Liberal Arts to use and share during a web migration project: moving the college, its programs, and its departments to a Drupal platform.

I wrote a development report to explain my choices throughout the development process, including design, user testing, and revisions.

Screen Shot 2015-05-12 at 8.25.42 PMThis project demonstrates my skills in:

  • conceptual thinking
  • creating copy that support business objectives and aligns with the brand voice
  • translating brand guidelines and maintaining consistency
  • understanding business and application requirements, and prioritizing and identifying user tasks and goals
  • researching and understanding competitive landscapes, industry trends, and new developments in collaborative communication platforms
  • taking direction and translating that direction into solutions
  • comfortable and confident presenting work to internal and business group partners

And my experience:

  • implementing iterative design methodology
  • managing ambiguity
  • administering usability testing
  • writing and editing for style and consistency
  • working effectively within technical, creative, and budgetary constraints
  • developing innovative solutions for a multitude of media and platforms

A preview of my Developmental Report

Development Process


The purpose of this style guide is to aid in the College of Liberal Arts website remodel project and support content contributors after sites are migrated. The document must be usable and maintainable; and aid the College office and the departments within the College in writing web content that is consistent with the College of Liberal Arts style and tone for web copy.

Consistent style:
  • helps new web writers become familiar with web writing style more quickly.
  • is a time-saver—writers can concentrate on content.
  • increases the language competence of web writing teams (if approached by members of other teams on an issue, you can refer them to the documentation style guide).
  • contributes to a more professional and cohesive look for disparate departments.
  • increases user satisfaction.



The Interactive nature of this style guide allows users to contribute to the content of the document, keeping the guidelines relevant and accurate. Active hyperlinks within the document will aid in ease of use for user browsing and searching.

The 2005 [hard copy] style guide assumed readers will access the beginning of the document for foundational techniques to writing. The 2015 style guide assumes users are currently writing their digital copy. The document is designed to allow users to search or browse for the piece of information they need to complete their writing task. The [foundational techniques to writing] in the 2005 style guide are incorporated in the body of 2015 style guide in a searchable location rather than in the front matter.

User Testing

Usability Test Results

The usability test revealed several flaws in the second draft of the style guide. The user was only able to complete two out of 19 tasks easily and could not complete eight of the tasks. There were several patterns preventing usability:

  • table of contents was difficult to navigate to
  • sections were difficult to navigate to
  • it was unclear which section the user was in
  • topics within sections were not intuitive
  • there were several search results for keywords
  • there were not enough examples
  • information was repeated, but not clear in either spot
  • reference links within topic, linking to related topics, were not used

(See Appendix C for all usability tasks and for details about how the user completed each task.)


Table of Contents and Section Labels

The table of contents created problems for the user when the user did not differentiate between the sections: formatting, mechanics, and punctuation. These are very technical terms, which, according to the context, are frequently interchangeable. The final version of the style guide does not contain a table of contents.


CLAStyle Guide Figure 7
Figure 7

The final draft of the style guide does contain an index [(in contrast to the tested version)]. The index is at the end of the document and accessible from every page in a hyperlink embedded in the footer. (Figure 7) The index hyperlinks topic headings to their content, in alphabetical order. I solved the problem with alphabetization by listing topic headings in alphabetical order, without using classifications and sections to organize the document. I solved the problem of headings by only using headings for the topic headings and using normal formatting for guideline-level information, examples, and section headings.


CLAStyle Guide Figure 8
Figure 8

The final style guide does not contain classification headings, but headings as alphabetical letters. Topic headings are listed in alphabetical order within the section of the first letter they start with. A large, letter heading begin each section, consisting of topic headings that begin with that letter. Letter headings help indicate where the user is located within the document, allowing them to easily search without using the search feature. (Figure 8)

Each letter indicating the alphabetic range of topic headings to follow, is hyperlinked to the footer of every page. (Figure 7) The links in the footer allow users to travel through the document with ease, without scrolling to the letter they are searching for or returning to the index.

Information ArchitectureCLAStyle Guide Figure 9

I simplified guidelines within each topic heading. Several cross references listed within topic headings were replaced with duplicated content to allow less steps for users. I also removed customized formatting and alignment (Figure 8) to simplify curation of the document in the future. In order to update the document, an administrator will need to label new entries as Heading 1 and format guidelines for that entry in default, lowercase bullets. The administrator will not need to adjust style or alignment, which was necessary in the second draft. (Figure 9)

Editorial experience

I gained tremendous insight on iterative design and how to manage ambiguity. My second draft included design choices borrowed from other style guides; and, compared to the first draft, this design was less usable and more complicated to maintain for our context. Through this project, I learned how to tackle abstract design problems with proposed solutions, user testing, and iterative design.

I also gained experience using triangulation methodology. My adviser, Barb, and my mentor, Colleen, advised me to use sections and headings. This advice, coupled with usability testing and research, allowed to to understand technical classifications of style guidelines. Knowledge about these classifications helped me understand what types of information users generally need in order to author web content. Researching the Microsoft, Virgina Tech, and Apple style guides helped me narrow down my content to include only relevant topics. I weighed data from my advisers, competitor examples, and usability testing to determine the best plan of action. This method of triangulation was helpful because the University resources for style were from a different technological and social era and incomplete to guide my methodology.

My final gain of editorial experience is a deeper understanding of the affordances and constraints of various media platforms. Several of the online style guides used a website platform for their content. A website accommodates a table of contents and hyperlinks differently than a word processor document. Learning the constraints of Google Documents helped me determine how to aid users for searches and browsing. I also understand how a web-based style guide differs from a traditional print style guide in terms of organization and functionality.

In the end, I not only learned about media platforms, iterative design, and the management of ambiguity, but also a tremendous amount of information about style; grammar; and the technical differences between mechanics, formatting, and punctuation. I will continue my exploration of the transformative nature of editing and style, and my pursuit to understand writing’s symbiotic relationship with technology.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s