saic.edu

Working within the limitations of the site’s existing architecture and design, I adapted saic.edu to be mobile-friendly, and I designed a flexible system to help the School build better department pages.

Making saic.edu Responsive

With over a quarter of traffic coming from mobile devices, there was an understandable urgency to improve usability at smaller screen sizes. The School was not in a position to build a new site or make any major overhauls to the existing architecture or layout, so we had to adapt the static design into a responsive one. While this seemed like a doomed idea, it was a challenge I was excited about tackling.

I worked closely with our developer from the beginning to determine what would be feasible. We decided to focus our priorities on the homepage, navigation, and the default page template.

Desktop version of saic.edu homepage. Lots of potential entry points with relatively similar hierarchy.

Primary Navigation

The homepage contains several different potential entry points: the mega menu with dropdown menus, an “action” bar, and search, an audience nav, and the homepage slides. I explored several solutions for displaying all of this on a smaller screen, and landed on a single menu button containing the mega menu and the audience nav, with persistent search and close buttons. I created a clickable prototype in Axure to demonstrate the functionality to stakeholders and the developer.

Secondary Navigation

The secondary navigation needed to be obvious but not obtrusive. To access subpages, a button is fixed at the bottom of the screen, allowing the user to access the subpages at any time without taking up valuable real estate. The subpages are also displayed at the bottom of each page. When the user scrolls them into view, the nav button disappears.

Better Department Pages

Department pages are potentially the most persuasive places on the site for a prospective student, but content was forced into a default template that resulted in a bland, cluttered mess:

Old department page design

Department pages needed to be a clear destination that Admissions could point prospective students to as a central source to learn about the School’s departments, the degrees offered, and how to apply.

The departments needed to feel authentic and current, so it was important to empower department heads to customize their page and update it with fresh content. Each department has varied resources to update their page, so a flexible structure was needed to allow for varying amounts of content and frequency of updates while maintaining consistency between departments.

The result is a highly visual, straightforward landing page that provides prospective students with a concise and compelling overview of the department in a clear and digestible format on any device.

Key Messages are King

To keep the page concise and focused, the page is structured through key messages that serve as introductions to each area of the department. Each key message is supported by at least one story to help to create more impactful and authentic messaging.

The mobile design implements navigation patterns established in the responsive re-design.

An Intuitive Workflow for Content Creators

I worked with the developer to design an intuitive workflow within Drupal that reinforced the key message structure and allows content creators to build flexible, organized pages that don’t compromise on clarity. We made things easier for the content creator by automating things like layout choices and how current and past events are displayed. We also intentionally made some things more difficult, like forcing an additional step to add more than one supporting story to a key message, to encourage a more concise and focused landing page.

Workflow for content creators

Scalable for Any Amount of Content

Story content can be easily organized into deeper pages to accommodate departments with lots of content or just a little, keeping all department landing pages consistent.

Pertinent admissions information is at the bottom of each page, with audience-specific links to apply.

Conclusion

The new department page design fits within the existing site’s design, and should help bring clarity to department information and how to apply. I am most excited about the new workflow that will empower departments to build their own pages easily and consistently, and lay the foundation for a more connected and dynamic website.