Visual Identity Guidelines
for the Web

A supplement to Georgetown's Visual Identity Guidelines providing guidance and best practices for the creation or redesign of a website.

I established a governing body at Georgetown to provide guidance for new websites and institute a review process for Georgetown-branded redesigns.

Screenshot of the School of Foreign Service landing page
Screenshot of a Georgetown landing page

CHALLENGES

The Office of Communication, Office of Advancement, and Web Services were the stewards of the Georgetown redesign.

Although each team’s priorities were different, the new designs were an opportunity to work closer together. We could have a better understanding of how each team was extending the new designs and be on the same page when it came to incorporating  branding and design patterns.

Due to the very nature of Georgetown, departments and units work in silos. This brings a challenge to have our partners closely adhere to the Georgetown brand. Also, certain partners at Georgetown work with external vendors to build their website, adding other design teams and philosophies into the mix.

We needed a centralized set of guidelines for departments and units to reference as needed. 

SOLUTIONS

Organize a Subcommittee

A Visual Identity Subcommittee was assembled to: 

  • Provide guidance for all schools and units within the university, including internal web teams.
  • Provide guidance for external vendors hired by Georgetown schools and departments.

Review our Design Patterns

To start the conversation, I reviewed the design elements from Georgetown’s latest redesign, including logos, colors, and fonts, as well as more complex pieces such as accessibility standards and UX & UI patterns. I developed a list of best practices based on these elements, and the guidance was organized based on a two-tier system: requirements and recommended guidelines.

Review our Design Patterns

To start the conversation, I reviewed the design elements from Georgetown’s latest redesign, including logos, colors, and fonts, as well as more complex pieces such as accessibility standards and UX & UI patterns. I developed a list of best practices based on these elements, and the guidance was organized based on a two-tier system: requirements and recommended guidelines.

Find the Middle Ground

Getting consensus on the guidelines was critical to success. I updated the subcommittee regularly, led discussions with designers on which UI/UX items to prescribe, and worked closely with our accessibility coordinator, Kevin Andrews, on the accessibility requirements. I also included the director of Georgetown Web Services when working on contract language for external vendors.

Build an Intake Process

Once the guidelines were complete, we needed to develop an intake process for new website work so that partners knew where to go if they had questions and how to request a review of their mockups. This was a bit of a challenge since our departments work independently, so we needed to retain this subcommittee moving forward to help with the stewardship of the guidelines. I became the point leader for stewardship to start any future conversation about the review process of new websites by external vendors.

John LaRue, Art Director at the Office of Strategy Communication and one of our valued members to this project, created a diagram to help drive our process home to our members in our committee, and to help our partners to understand our process.

Intake process diagram for reviewing new websites/redesigns

Build an Intake Process

Once the guidelines were complete, we needed to develop an intake process for new website work so that partners knew where to go if they had questions and how to request a review of their mockups. This was a bit of a challenge since our departments work independently, so we needed to retain this subcommittee moving forward to help with the stewardship of the guidelines. I became the point leader for stewardship to start any future conversation about the review process of new websites by external vendors.

John LaRue, Art Director at the Office of Strategy Communication and one of our valued members to this project, created a diagram to help drive our process home to our members in our committee, and to help our partners to understand our process.

Intake process diagram for reviewing new websites/redesigns

Focus Group

Before officially announcing the new guidelines, the subcommittee led a focus group to make sure the guidelines were clear,  understandable, and direct—but not overbearing. 

Since the project occurred during the pandemic, the focus group was done via a survey to a couple of key stakeholders  in our university, and with the Office of Strategic Communications. 

Focus group planning document

Focus Group

Before officially announcing the new guidelines, the subcommittee led a focus group to make sure the guidelines were clear,  understandable, and direct—but not overbearing. 

Since the project occurred during the pandemic, the focus group was done via a survey to a couple of key stakeholders  in our university, and with the Office of Strategic Communications. 

Focus group planning document

IMPACT

The Georgetown Visual Identity Guidelines for the Web was launched in Fall 2020. 

The project has helped on many different fronts. It brought awareness to our partners across the university on the importance of branding, accessibility, and UX/UI on the web for Georgetown.  Due to the guidelines, our web audience sees more consistent Georgetown branding. 

Internally, it has brought a tighter knit collaboration between units involved in maintaining the Georgetown brand, and a closer relationship between communications professionals and designers across the university.

View Visual Identity Guidelines for the Web

VI-Web-Final-Screenshot

The Georgetown Visual Identity Guidelines for the Web was launched in Fall 2020. 

The project has helped on many different fronts. It brought awareness to our partners across the university on the importance of branding, accessibility, and UX/UI on the web for Georgetown.  Due to the guidelines, our web audience sees more consistent Georgetown branding. 

Internally, it has brought a tighter knit collaboration between units involved in maintaining the Georgetown brand, and a closer relationship between communications professionals and designers across the university.

View Visual Identity Guidelines for the Web

VI-Web-Final-Screenshot

Selected Works

Georgetown University RedesignRedesigning the Flagship Website

1789 Design SystemBuilding a Wordpress Theme

Visual Identity for the WebCreating Guidelines & Governance

© 2024 Fabian Alcantara
or respective rights holders