Sunflower CMS Navigation System

Design menu navigation elements that will work for large and small websites within a content management system.

Client: All website content creators in KU’s content management system

Team:
Design: Dave Gnojek, Patrick Giroux, Audra Kenton, Summer Foster
Development: Bill Kummerow, JD Warnock, Chris Welchaans, Susan Patton

My role: User experience designer

Date: 2020

Tabletop with a large iMac screen, laptop, and mobile phone that are all displaying the same screen: a website navigation takeover menu with a blue bar on the left side.

Background

The CMS had not be redesigned for eight years. Eight pivotal years in web design usability and trends leaving it feeling very dated and often ended up breaking.

  • The previous menu navigation was designed without consideration for mobile devices and did not function well.

  • The previous design was a horizontal bar across the top of the page that often did not fit the top level items that users wanted to put there. There was no overflow design to account for longer text.

Key problems

There are over 500 websites that run on The University of Kansas content management systems (CMS). These websites have a huge spectrum of needs for their respective audiences. Some websites like the Human Resource Management house functional content and have many levels of hierarchy in the information architecture. Others like the Undergraduate Admissions site may have a much shallower navigation structure and houses marketing-focused content. Our challenge was to design a navigation system that met the needs of all sites in the university’s CMS.

We needed to find a structure that supported for very small sites to mammoth sites and lends itself well to responsive design , meets accessibility standards, and delivers a straight-forward and familiar model.

Discovery

During our discovery phase we organized stakeholder workshops to learn more about how content creators at the university think about their audiences, websites, site structure, and the needs that navigation plays in helping end users get to the right place.

Through competitive research we learned that there were a few broad ideas that most navigation structures fell into: dropdowns, mega-menus, full-screen takeovers, and sidebar accordions. Concept ideation steps included a lot of hand-drawn sketching and conversation, wireframe mockups, and user feedback sessions to learn how our users understood and responded to the top concepts.

Refining designs

After testing and evaluating many navigation mockups we landed on a final direction, a takeover menu with columns built for flexibility. This design allows room for a typographic view of menu options and progressive disclosure of options to keep the user from decision fatigue. The column structure supports scrolling for websites with a broad architecture and creates a smooth transition to mobile devices screen sizes.

Mico-interactions

Levels of the navigation structure are treated like cards that stack on top of one another with a subtle sliding motion that helps users visualize the structure of the site.

Header transition

On the mobile view, the header bar and navigation menu get out of the way of the content, but are there when you need them. As you scroll down the top bar disappears and it comes back on scroll up to help you find what you are looking for.

Nav bar fade

On desktop screen sizes, the navigation bar on the left side is always there. When the page loads it is blue and draws the eye to the bar and the menu icon. As the user scrolls the bar transitions to grey where is takes a step back and allows that content of the page to hold more attention.

Key insights

We would not only need to redesign the main menu navigation but also provide other structures for navigation within the site.

  • Better search functionality and interface

  • Secondary navigation

  • Breadcrumbs

  • Header and footer

  • A collection of in-page navigation elements, such as:

    • Sidebar content types

    • Accordions

    • Pagination

    • Tabs

    • Links lists

    • CTAs

In-page navigation structures

Delivery

After the navigation menu and supporting elements were designed, tested, and refined it was time to deploy. The navigation was launched at the same time as the full CMS redesign and there were several tools along the way to help users work in the the system. We provided:

The navigation system lives on hundreds of live sites, here are a select few:

Previous
Previous

Atlassian workflow