Georgia Tech Brand Website Redesign

Georgia Tech Brand Site Redesign

In anticipation of the university's brand refresh efforts, I undertook a content update and redesign of an existing brand site. I began with a thorough content audit and documented my recommendations. I created a visual site map using screenshots of existing content as well as a document detailing my recommendations for how to update and reorganize that content. I then created a static HTML demonstration of the site with my recommended structure and design for testing and stakeholder review before converting it into a fully functional Drupal 8 theme.

My favorite part of this project was designing and developing a highly flexible layout tool for content creators. The tool features a range of background and padding options as well as Bootstrap-based column width and breakpoint specifics for CKeditor content each field. The tool also leverages the Layout Builder module which allows rows of content to be added to a node by the content creator.

Medium

  • Digital design
  • Front-end Drupal development

Roles

  • Audit of existing site content with site map/user flow and recommendations
  • Information architecture and UX renovation with distinct main content sections and internal navigation
  • UI design
  • Static HTML and CSS development with Bootstrap 4
  • Drupal 8 theme development with custom twig templates
  • Design/development of a custom Drupal layout tool for content creators
  • SVG-based scroll-activated animation effects with After Effects, Bodymovin AF plugin, json and jQuery

Homepage Redesign

Georgia Tech Brand Website Redesign
Georgia Tech Brand Website Redesign

Page Type Thumbnails:

Georgia Tech Brand Figma page type thumbnails
Georgia Tech Brand Website Redesign
Georgia Tech Brand Website Redesign

Information Architecture

Existing Content Audit

Georgia Tech Brand Website visual site map

Visual site map featuring screenshots of current content and user way finding flow. Screenshots allow analysis for consistent visual styling of way finding elements and content hierarchy.

Georgia Tech Brand Website visual content audit

A detailed document of recommendations for how to reorganize and update all existing content.

Revised IA and Sitemap

Georgia Tech Brand Website recommendations

Explanation of a simplified site hierarchy featuring three main sections of content and specific styling of repeating content elements. Consistent styling for types of content elements helps visitors to find the content they are seeking by symbolically highlighting the type of content, such as a file download or contact information.

Figma Georgia Tech Brand Website list-style information architecture

Simplified list-based information architecture recommendation.

Figma Georgia Tech Brand Website wireframe sitemap

Figma Wireframe sitemap showing the page layout type for each tier of content. Tier 2/main section intro pages lead with a visual header and feature internal sidebar navigation for that section. Content pages do not have visual headers. Where a tier 3/content page is also a section intro page leading to tier 4 content pages, it is styled like a tier 2 main section intro but without a visual header.

Figma Georgia Tech Brand Website visual sitemap

Figma Wireframe sitemap with screenshots of finished pages.

Georgia Tech Brand Figma components

Figma component mockups for special content.

Custom Drupal Layout Tool

Georgia Tech Brand Website layout tool for designers

Instructional document detailing options for a flexible custom Drupal 8 layout tool developed for content creators. It features background options, padding options, and width specifics for each content element.

<div{{ attributes }}>
			<div class="content-block content-block-with-eight-columns {{ background }} {{ padding_options }}">
			    
			{# Attach the library #}
			{{ attach_library('brand/content-eight-columns') }}
			
			{# Preprocess #}
			{% set body = (content.body) %}
			
			{% set content_container_width = content.field_container_width.0['#title']|lower|replace(' ', '-') %}
			{% set background = content.field_background.0['#title']|lower|replace(' ', '-') %}
			{% set padding_options = content.field_padding_options.0['#title']|lower|replace(' ', '-') %}
			
			{% set column_padding_options = content.field_column_padding_options.0['#title']|lower|replace(' ', '-') %}
			{% set column_align_options = content.field_center_content_vertically.0 %}
			{% set column_justify_options = content.field_center_content_horizontall.0 %}
			
			{% set first_column = (content.field_first_column.0) %}
			{% set first_col_width = content.field_first_column_width.0['#title']|lower %}
			
			{% set second_column = (content.field_second_column.0) %}
			{% set second_col_width = content.field_second_column_width.0['#title']|lower %}
			
			{% set third_column = (content.field_third_column.0) %}
			{% set third_col_width = content.field_third_column_width.0['#title']|lower %}
			
			{% set fourth_column = (content.field_fourth_column.0) %}
			{% set fourth_col_width = content.field_fourth_column_width.0['#title']|lower %}
			
			{% set fifth_column = (content.field_fifth_column.0) %}
			{% set fifth_col_width = content.field_fifth_column_width.0['#title']|lower %}
			
			{% set sixth_column = (content.field_sixth_column.0) %}
			{% set sixth_col_width = content.field_sixth_column_width.0['#title']|lower %}
			
			{% set seventh_column = (content.field_seventh_column.0) %}
			{% set seventh_col_width = content.field_seventh_column_width.0['#title']|lower %}
			
			{% set eigth_column = (content.field_eigth_column.0) %}
			{% set eigth_col_width = content.field_eigth_column_width.0['#title']|lower %}
			
			
			{# Content #}
			
			<div{{ attributes }}>
			 	<div class="content-block content-block-with-eight-columns {{ background }} {{ padding_options }}">
				    {# Title #}
				    {{ title_prefix }}
				    {% if label %}
				    <h3 class="hidden">{{ label }}</h3>
				    {% endif %}         
				    {{ title_suffix }}
				  {# Description #}		 		
						<div class="content-block-inner-wrapper {{ content_container_width }} ">		 
						 <div class="row {{ column_padding_options }} {{ column_align_options }} {{ column_justify_options }}">
						 
						 {% if first_column is not empty %}
							 <div class="{{ first_col_width }}">
								 <div class="col-inner-content h-100">
								 	{{ first_column }}
								 </div>
							 </div>
							 {% endif %}
			
							 {% if second_column is not empty %}
							 <div class="{{ second_col_width }}">
								 <div class="col-inner-content h-100">
								 	{{ second_column }}
								 </div>
							 </div>
							 {% endif %}
							 
							 {% if third_column is not empty %}
							 <div class="{{ third_col_width }}">
								 <div class="col-inner-content h-100">
								 	{{ third_column }}
								 </div>
							 </div>		
							 {% endif %}		 				 
			
							 {% if fourth_column is not empty %}
							 <div class="{{ fourth_col_width }}">
								 <div class="col-inner-content h-100">
								 	{{ fourth_column }}
								 </div>
							 </div>	
							 {% endif %}
			
							 {% if fifth_column is not empty %}
							 <div class="{{ fifth_col_width }}">
								 <div class="col-inner-content h-100">
								 	{{ fifth_column }}
								 </div>
							 </div>	
							 {% endif %}
			
							 {% if sixth_column is not empty %}
							 <div class="{{ sixth_col_width }}">
								 <div class="col-inner-content h-100">
								 	{{ sixth_column }}
								 </div>
							 </div>	
							 {% endif %}
							 
							 {% if seventh_column is not empty %}
							 <div class="{{ seventh_col_width }}">
								 <div class="col-inner-content h-100">
								 	{{ seventh_column }}
								 </div>
							 </div>	
							 {% endif %}				 
			
							 {% if eigth_column is not empty %}
							 <div class="{{ eighth_col_width }}">
								 <div class="col-inner-content h-100">
								 	{{ eigth_column }}
								 </div>
							 </div>	
							 {% endif %}
			
							 	  
						 </div><!-- end row -->
						</div><!-- end content block inner -->
					</div><!-- end content block -->
			 </div><!--end attributes-->
			   </code></pre>
			          </div>   
			          
.content-block {
								  overflow: hidden;
								}
								
								/***** CUSTOM BACKGROUNDS for EIGHT COLUMN BLOCK *****/
								
								.tech-gold-background {
									background-color: var(--gt-tech-gold);
								}
								
								.tech-gold-gradient-background {
									background-color: var(--gt-gold-grad);
								}
								
								.gold-background-with-bottom-gradient {
										background-color: var(--gt-tech-gold);
										position: relative;
								}
								
								.gold-background-with-bottom-gradient:after {
										background: var(--gt-gold-grad);
										content: "";
										position: absolute;
										display: block;
										bottom: 0;
										width: 100%;
										height: 1rem;
								}
								
								.tech-half-gold-background {
									background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--gt-tech-gold) 50%, var(--gt-tech-gold) 100%);
								}
								
								.tech-light-gold-background {
									background-color: var(--gt-tech-light-gold);	
								}
								
								.navy-background {
									background-color: var(--gt-navy);
								}
								
								.pimile-light-background {
								  background-color: var(--gt-pimile-light);
								}
								
								.pimile-medium-light-background {
								  background-color: var(--gt-pimile-med);
								}
								
								.pimile-background {
								  background-color: var(--gt-pimile);
								}
								
								.tech-gold-background-with-stripes {
									background-color: var(--gt-tech-gold);
									background-image: url('/themes/custom/brand/images/stripes-bg-tile-white.svg');
								  background-repeat: repeat;
								  background-size: auto .9rem;
								}
								
								.gold-stripes-background {
								  background: url('/themes/custom/brand/images/stripes-bg-tile-gold.svg');
								  background-repeat: repeat;
								  background-size: auto .9rem;
								}
								
								.faded-gold-stripes-background {
								  background: url('/themes/custom/brand/images/stripes-bg-tile-gold-fade.svg');
								  background-repeat: repeat-x;
								  background-size: auto 30rem;
								}
								
								.rhombosia-background {
									background-image: url('/themes/custom/brand/images/rhombosia-background.jpg');
									background-repeat: repeat;
									background-size: 80rem auto;
								} 
								
								.rhombosia-faded-background {
									background-image: url('/themes/custom/brand/images/rhombosia-background-fade.jpg');
									background-repeat: no-repeat;
									background-size: 100% auto;
									background-position: center top;
								}
								
								
								/*** text colors for backgrounds ***/
								.semidark-background h1, 
								.semidark-background h2, 
								.semidark-background h3, 
								.semidark-background h4, 
								.semidark-background h5, 
								.semidark-background h6, 
								.semidark-background .h1, 
								.semidark-background .h2, 
								.semidark-background .h3, 
								.semidark-background .h4, 
								.semidark-background .h5, 
								.semidark-background .h6 {
									color: var(--gt-black);
								}
								
								.dark-background {
									color: var(--gt-offwhite);	
								}
								
								.dark-background h1, 
								.dark-background h2, 
								.dark-background h3, 
								.dark-background h4, 
								.dark-background h5, 
								.dark-background h6, 
								.dark-background .h1, 
								.dark-background .h2, 
								.dark-background .h3, 
								.dark-background .h4, 
								.dark-background .h5, 
								.dark-background .h6 {
									color: var(--gt-offwhite);
								}
								
								.dark-background p {
									color: var(--gt-offwhite);	
								}
								
								.dark-background li {
									color: var(--gt-offwhite);	
								}
								
								.main-container .dark-background a:visited {
								    text-decoration-color: var(--gt-offwhite);
								}
								
								/* headings on pimile */
								.neutral-background h1, 
								.neutral-background h2, 
								.neutral-background h3, 
								.neutral-background h4, 
								.neutral-background h5, 
								.neutral-background h6, 
								.neutral-background .h1, 
								.neutral-background .h2, 
								.neutral-background .h3, 
								.neutral-background .h4, 
								.neutral-background .h5, 
								.neutral-background .h6 {
									color: var(--gt-drk-gold);
								}
								
								/**** CUSTOM CONTENT BLOCK PADDING OPTIONS ****/
								
								/* container padding options */
								 
								.container.default-padding,
								.container-fluid.default-padding {
									padding-top: 1.5rem;
									padding-bottom: 1.5rem;
								}
								  
								.add-vertical-padding {
									padding-top: 3rem;
									padding-bottom: 3rem;
								}  
								
								.add-horizontal-padding {
									padding-top: 1.5rem;
									padding-bottom: 1.5rem;
									padding-left: 3rem;
									padding-right: 3rem;
								}
								
								.add-horizontal-and-vertical-padding {
									padding: 3rem;
								}
								
								/* column padding options */
								
								.add-padding-to-columns div[class^="col"] {
								  padding: 1.5rem;
								}
								
								.remove-padding-from-columns div[class*="col"] {
								  padding-right: 0;
								  padding-left: 0;	
								}
								
(function ($, Drupal) {
								Drupal.behaviors.brand = {
								attach: function (context, settings) {
								// Ensure accessible text colors for dark backgrounds on custom blocks		
									$('.content-block').each(function(){
									    if($(this).is('.pimile-background, .pimile-medium-light-background')) {
									      $(this).addClass('neutral-background');
									    } 
									    else if($(this).is('.tech-gold-background, .tech-light-gold-background, .bg-tech-lt-gold, .tech-half-gold-background, .gold-background-with-bottom-gradient, .tech-gold-background-with-stripes')) {
									      $(this).addClass('semidark-background');
									    } 
											else if($(this).hasClass('navy-background')) {
									      $(this).addClass('dark-background');
									    } 
									});	
							

Code snippets for a flexible custom Drupal 8 layout tool. This tool is a block type which leverages Layout Builder to add rows of content to a node. The layout within each row is controlled by the content creator through col width settings. Since several background color options are available, javascript is used to change text colors to ensure they are accessible on each background. I later teamed up with my web development team to develop a version of this tool which uses Paragraphs and does not rely on Layout Builder or Blocks.

Homepage SVG Animation

Scroll-activated SVG animation created using After Effects, Bodymovin, and Javascript.

Main Sections Redesign

Our Look

Georgia Tech brand Website main section

Main site section intro pages feature a visual header graphic to signify the type of page. All sidebar navigation is sticky on desktop so it remains accessible while reading long-scrolling content.

Georgia Tech brand Website main section

Third tier content pages have a simplified heading. They cut right to the chase, immediately presenting the specific content the visitor came to find.

Georgia Tech brand Website main section

Brand Assets

Georgia Tech brand Website main section
Georgia Tech brand Website main section

Pages featuring downloadable assets highlight this type of content in a light gray block with icons indicating a download is available. Details about the contents of each download are listed.

Georgia Tech brand Website main section

In addition to the internal navigation on the sidebar, an enlarged breadcrumb style over the page title helps the site visitor to recall which main section they are exploring.

Our Voice

Georgia Tech brand Website main section
Georgia Tech brand Website main section
Georgia Tech brand Website main section