Southwestern University

Branding & Responsive Web DesigN

 

The team at Southwestern recognized that web design across nearly all universities, both domestic and international, is fairly uniform and very dated. Most universities face similar challenges - an endless amount of content has to be packed into a very old framework, and that content is coming from many departments and individual contributors. Achieving consistency with brand voice and photography, as well as creating a content hierarchy that all departments were satisfied with, is a problem that most universities simply haven't solved.

•  •  •

Created at Handsome   |   UX Lead  •  Annette Neu   |   Product Design  •  Christine Soules   |   Branding Lead  •  Christiana Guzman

 
 

 
 

The Challenge

Balancing tradition & innovation in a rapidly changing world  -

The team at Handsome spent the first part of this engagement testing both Brand and UX concepts with prospective and current students, parents, and Southwestern faculty members. Our goal was to uncover the attitudes of modern students and their parents around their education and careers, and create an experience that aligns with their current ways of thinking and behaving, rather than dumping them into a void of jumbled information.

Our solution is to change the basic framework of how content is organized within the site, into flows that represent the groups who actually interact with the content, not by who created it in the first place. The branding is reworked to create and highlight photography that feels authentic, with typographic and graphic elements that are bold but elegant, and completely accessible. 

 
 

 

Before & After - News Template

 
 

OUR PROCESS

Brand, UX, Product & Development working collaboratively  -

The quick turnaround required for this project required a lot of overlap of work that normally would not necessarily make sense. Brand, UX, Product and Development all started at the same time rather than being slightly staggered in the agile process we were all used to. 

To prevent creating a complete Frankenstein of a website, we needed to make sure we kept constant communication, asking questions and influencing each other for decisions we were used to making on our own. Myself and Brand shared inspiration for color, typefaces, motion and photography. UX, Development and I whiteboarded template by template to strategize how far we could push our solutions creatively without creating a complete monster to code. 

 
 

 

FRAMEWORK

Navigation should be built for  users, not content creators.

Content structure was the core of Southwestern's challenge. There were at least 20 global links on every page, and these often changed or rearranged based on which department was in control of each section.

What we uncovered from our research participants was simple: their needs are neatly organized by user type. The site was structured based on departments and offices, so users relied on search, which often returned outdated results.

We curated content based on user type, as well as surfaced direct links to services that are regularly used such as calendar and library.

 
 

 
 
 

FLEXIBILITY & GROWTH

Building a collection of templates and modules  -

A university website is a living, breathing network of content. Southwestern needed us to provide them with a strong base design and the tools to grow as their content expands and changes. These modules needed to be flexible - first, considering all types of content that exist, and second - that they will inevitably be used in any order the content creators choose.

Throughout the project, I built a visual style guide that both helped Development catch any inconsistencies in design files (shared by Brand, UX and Product). This guide was also intended to be an artifact for the client to give to anyone internally that will be involved in upkeep of the site in the future - Development, Design, and any departmental content creators.   

 
 

 
 

BRANDING & ACCESSIBILITY

Prioritizing inclusivity in a competition-driven world  -  

Accessibility was also a huge priority for us in this engagement. Southwestern wants to be perceived as forward thinking - and that is impossible to do without inclusivity. It is important to think of inclusive design as just another basic constraint, and not a burden. 

The approach we took for the design has an editorial feel. We channel modern tech magazines who combine bold, clear type and beautiful imagery to create something both dynamic and consumable for people of varying abilities.