THE STATE WAY
DESIGN SYSTEM
Modern, bold, yet academic; The State Way is helping to move Georgia State University into a bright future.
PROJECT INFO
CLIENT
Georgia State University
ROLE
Design and build web elements
DURATION
On going
DESIGN TOOLS
Sketch, Templatera, WP Bakery
OVERVIEW
THE GOAL WAS TO CREATE A UNIFIED AESTHETIC FOR GEORGIA STATE SITES UTILIZING THE AESTHETICS OF OUR BRAND CAMPAIGN, THE STATE WAY.
Amid the renovation of the Undergrad Admissions site in 2018, another effort was untaken to refresh Georgia State’s online presence. The PR & Marcomm design team at Georgia State had already pioneered the look and feel of The State Way brand campaign for print collateral. Now that the Undergrad Admissions site was finally undergoing renovation, we were of the mind that it should have matched the aesthetics of the print collateral students received.
THE STATE WAY AESTHETIC FOR PRINT
A GSU SITE BEFORE THE DESIGN SYSTEM
IMPETUS / MOTIVATIONS
GEORGIA STATE'S WEB PRESENCE SHOULD HAVE A UNIFIED AESTHETIC WITH IT'S PRINT COLLATERAL
Presenting a unified aesthetic to the public could enhance Georgia State’s brand equity.
IMBUE GEORGIA STATE SITES WITH A GREATER SENSE OF VISUAL COHESION
By having one definitive way that a design problem is solved, we could create consistency from one Georgia State site to the next.
METHODOLOGY
REVIEW GEORGIA STATE'S PRINTED COLLATERAL
Because I work directly with the print designers in PR & Marcomm, I had access to years worth of collateral and the impressive talent of their designers. I vigorously searched through current collateral for design inspiration.
RESEARCH THE COMPETITION
It always helps to keep an eye on what the competition is creating and on industry trends. One site that inspired one was the University of Central Florida.
ENSURE UNIFORMITY BY UTILIZING TEMPLATES
Templates help imbue sites with consistency. Consistency is especially helpful when many hands are helping to manage a website.
PRINT INSPIRATIONS
ELEMENTS
THE DESIGN HAD TO CAPTURE AND REFLECT THE STATE WAY CAMPAIGN — VIBRANT, BOLD AND STRAIGHTFORWARD.
I created highly adaptable marquee modules, highlighting important deadlines, providing links to frequently requested information, and sharing exciting university facts. The modules also allowed us to provide primary and secondary calls-to-action, which appear above the fold on mobile and desktop.
MARQUEES
WE INTRODUCED THREE UNIQUE STORYTELLING SOLUTIONS: AN AGGREGATED SPACE FOR DIFFERENT TYPES OF CONTENT (VIDEOS, MEDIA HITS, QUOTES AND PROFILES); A SERIES OF INDIVIDUAL STUDENT STORIES; AND A COLLECTION OF STUDENT QUOTE-AND-PHOTO COMBINATIONS.
STORYTELLING ELEMENTS
THE PURPOSE OF THE PROCESS BAR IS TO SURFACE THE MOST RELEVANT LINKS TO THE TOPICS ON THE PAGE. IN THE FLOW OF THE APPLICATION PROCESS, IT CAN BE USED TO ASSIST STUDENTS TO THE NEXT STEP.
PROCESS BAR
ENSURING UNIFORMITY
SKETCH
Sketch afforded me the ability to create an entire library of elements. This enables our designers to create wireframes and mockups that are fully branded and true-to-life.
WP BAKERY / TEMPLATERA
I created the elements user WP Bakery, then package them as ready-to-use elements in Templatera. Templatera affords us the ability to export the elements as ZIP files, ready to be used by designers or web admins.
THE COMMKIT
The Commkit serves as a brand guide and a catalog of branded templates (which I helped create), from full pages to elements. We included use cases, best practices, and the necessary CSS code.