We all want great looking, easy to navigate websites that accomplish our mission. Our client Kingdom Bound, a leading not-for-profit, has a lot going on. They provide concerts and events year-round in addition to a major 4-day festival each year at Darien Lake Theme Park. All of that means their website was going to have a LOT of functionality and content, and a lot of challenges. In fact, the initial sitemap we drafted looked like this:
After a surprised double-take at this behemoth of a document we had just created, we set to work wire-framing, designing, and prototyping to make sense of it all. The results? A very successful site and a happy client. See what you can learn to help your own web efforts:
Because there is so much content, knowing where you are in the pile of pages is very important. But, we didn’t want to use drop-downs for one simple reason; there would have to be WAY too many, and they would each have to be WAY too long! So instead, we adopted a dual navigation system in the header. This provides a consistent navigation on top that exists on every page, and below it we created a sub-navigation which is colored to match a brand value of the organization. These brand values are: Celebrate, Create, Connect. The corresponding colors are Red, Green, Blue.
Value branding via the colored sub-menus makes the site feel smaller, as a user is only dealing with one section at a time with a small navigation of the most important items. This is in stark contrast to a mega-menu that emphasizes how huge and scary the site is. This goes somewhat against the traditional UX concept of having each page accessible from every other page, but the results have been positive. Possibly because users to the site generally don’t need pages from other sections in a single visit.
We had no shortage of great images and video. This became an essential resource for us to present the client’s message throughout the site. The home page and festival page both contain large, full-width video banners, and colored, full-width sections with background images down the page. This clearly establishes hierarchy between these two pages and the flatter, simple design of interior pages. Additionally, these sections provide various funnel points for the site that users will want to be easily directed to. The use of powerful, background images provides instant emotional comprehension of what that section is about, but also allows the focus to be on the buttons. Plus, it looks elegant and provides a little eye candy.