sauchoi
Loading...

University of Miami Rebranding

Project Details

Client University of Miami

Role Creative Direction

Design

Responsive

Front-end Development

Date 2014-2016

The University completely re-imagined its digital content strategy between 2014-16. I directed all design deliverables and led creative during all phases of the effort from intake and strategy through design and implementation.

I think I'm proudest of the opportunity I had to establish the core branding materials for a portfolio that has expanded to include hundreds of University websites, digital signs, and enterprise e-mail products.

1. Objective

Re-imagine the University's homepage, news site, search, people directory, college and school, and administrative unit Website templates.

2. Result

Launched over 300 websites using the updated visual identity materials organization-wide.

3. Experience

Art director for all identity system design deliverables. User-experience architect during strategy phase including all wireframe and development team design plans.

Brand Web Signature Treatments

Part of the project included designing a logo identity guide with cues that could be used for determining the correct presentation of masthead signatures on all participating websites in the system. The system included cues for small and large viewport options and established a tiered hierarchy for sub-entity brands for certain mastheads.

University of Miami Logo Template

Homepage Header & Sliver

The University's homepage was completely redesigned and on larger ports included a transparent background on initial load that transitioned to a standard masthead on vertical scroll. An enterprise-branded "sliver" element carried "University of Miami" and revealed a tactical navigation element on all websites.

Mega Menu Variations & Main Nav Mobile View

The University's homepage was engineered to offer a mega menu during hover interaction on larger viewports. Flexibility was built into the design so that the mega menu could be changed as needed by communications directors. On smaller viewports, a touchpad-style mobile navigation was designed.

University of Miami Mega Menu Desktop View
University of Miami Mega Menu Mobile View

Maximizing the Power of Imagery

Due to the emphasis placed on high-quality photography and video on the new website, viewports were designed to prefer the best possible image presentation and aspect ratio depending on the viewer's device and/or viewport, website or web page.

University of Miami Image Ratio Samples

Global Components

Homepages and other landing pages were built to be modular. Over 25 varied content block opetions were designed within the overall visual identity that could be used to stack and present content in different ways depending on the needs of site managers and content curators.

Global Interior Page Styles

Standard templates--including standard interior pages--were engineered into the overall template suite offerings for websites. A complete development style guide was formalized during the design phase that could be used to insure that as materials were programmed, all components would remain consistent.

University of Miami Interior Page & Navigation Template

Color Schemes

The overall brand strategy allows for a certain amount of flexibility for websites within the organization. Colleges, schools, and main administrative areas were offered color schemes. I created an Adobe InDesign project that could easily allow for new color schemes to be considered, reviewed, approved, and implemented. Clients reviewed the printable color scheme sheets and final versions were easily handed to the development team for implementation..

University of Miami Rebranding Color Scheme Template

Royal Purple — School of Nursing

The School of Nursing and Health Studies color scheme.

University of Miami School of Nursing Color Scheme

Smoke White — School of Architecture

The School of Architecture color scheme.

University of Miami School of Architect Color Scheme

University of Miami News Site

One of the primary goals for the University of Miami is to "tell the University's story." One way they do this is with story content that is promoted to social media networks and news media outlets. The primary goal of this content is to extend reach and bring visitors to the website. My responsibilities included designing and launching the new news site.

University of Miami News Site Template

University of Miami People Site

Faculty people information is one of the most searched forms of content at the University of Miami. The rebranding project included new profile pages for faculty and staff members that could be expanded to include keyword-rich marketing and communications content. I designed all of the People site materials and worked with developers to insure the correct presentation after programming. The images below are the specification sheets I designed.

University of Miami People Site Profile Page
University of Miami People Site Table List View
University of Miami People Site Robust List View
University of Miami People Site Tile List View

Global Email Components

The University has hundreds of e-mail products and conducts massive e-mail campaigns to prospective students, alumni, current students, and faculty and staff among other constituencies. As a complement to website brands that were developed, an e-mail builder was programmed. I designed all of the content block options for the e-mail builder.




 Previous  All works Next