Inside the Design: Bluecadet and the McNulty Prize

Bluecadet created an incisive, content-nested site for the McNulty Prize, an award given to a fellow of the Aspen Institute to further a leadership project. The site houses deep, diverse content in a non-traditional user interface. But our designs didn’t emerge full-blown. They required careful planning and research, an eye for detail, and one innovative, overarching idea.

The John P. McNulty Prize inspires young people to make a difference in their communities by recognizing high-impact leadership. The institution needed a website that engaged and informed users in the same forward-thinking, outside-the-box method that their awards do.

When Bluecadet set out to design the site, we began by doing a survey of the McNulty Prize’s former online presence, doing a full content audit and site map. We realized the site was dense with information and a bit difficult to navigate. In thinking of ways to approach the content, we embraced vertical scrolling but were also interested in a more novel approach. And that’s where that one big idea came in.

The new site features a unique, horizontal scrolling structure, using the top right arrows or the navigation menu to switch left and right between content sections. Our main goals were to feature all of the McNulty Prize content in a linear and navigable way, and let the users find all the information needed without overloading them. In order to do this, we devised a number of design elements that make the site both content rich and fully navigable and accessible.


HDLlogo

Are you making your way from print design into the digital design space? HOW Design Live in San Francisco, June 22-26, offers a dedicated Print to Web track just for you. Hear from speakers including Patrick McNeil, Chris Converse, Mario Garcia, David Sherwin, Jose Caballer, Terry Lee Stone and more.


Navigation

  • A fully scrollable navigation featuring left and right arrows that can be used to navigate entire site.
  • Options to see more content if wanted: more and less buttons, expanding panes, tabbed media sections, collapsing main sections.
  • A linear structure, meant to be viewed left to right as a narrative.
  • A condensed navigation system to simplify scrolling in body sections. The top navigation bar edges out of the way and is replaced by a simple “jump to top” arrow, while the side-to-side navigation remains.

Information Architecture

  • Body information organized in an intuitive way.
  • Embedded videos so user can see multimedia alongside other content without popups.
  • Hidden features encourage exploration.
  • Condensed content to make it more interesting and user-friendly.

Click the image to see a bigger view of Bluecadet’s wireframes for the McNulty Prize website.

We pared down the sprawling content into two main sections (About the Prize and Laureates) and created the Screening Room to showcase the Prize’s beautiful videos. Our designers worked closely with our developers to ensure the animations, transitions, and easing made the site smooth and didn’t distract from content. The site pushes what is possible with HTML, giving a Flash-type experience in a more accessible way.

The site’s unique navigation scheme and clean design gets right to the heart of the McNulty Prize’s impact, while promoting the winners and nominees who contribute the important work that make the Prize possible.

More Web Design Resources

COMMENT