Each website project poses a unique set of UX (user experience) riddles to solve and branding challenges to analyze and build upon. Development and design, from how the site looks and feels, to the things that it actually does, conquering the challenges set before us and turning them into something that is cohesive, user friendly, and produces return on investment is its own reward.
Pioneer Camp and Retreat Center, celebrating 70 years of service, is a beloved premier destination for year round adventure and development, serving people of every age, and groups of every size. Situated on 75 acres of lakefront property that includes nearly 800 feet of beach on the beautiful shore of Lake Erie, Pioneer has grown to new levels of quality and service and needed to communicate their value to the world. The Eastco Group was retained to help and after much research and corporate identity work on their brand vision and marketing objectives, we performed a complete redesign of their website from scratch. Here are some highlights that may help you with your own communication objectives.
A very popular navigational trend that borrows from the visual and functional language of mobile apps is the fixed primary navigation. It has proven effective because of the way it couples functionality with a comfortable visual experience. Our own site uses a fixed nav so that the most important navigational elements are always available regardless of where the user is on the page. Since scrolling down a page has become second nature to most users, and modern design trends encourage lengthy scrolling pages (an aesthetic/behavior again borrowed from the mobile realm) with large hero statements, big type, scrolling animations and full-width content broken into bite sized chunks it often a necessity.
One very subtle touch that sets the fixed navigation on the Pioneer website apart from others is the deliberate use of transparency as the user scrolls down the page. When the user is at the top of the page the navigation will have a 100% opaque white background. Once the user has scrolled down the page at least the number of pixels that the navigation is tall it fades to 93% opacity very subtly revealing the context behind it.
The navigation will only remain transparent while the user is not using it. When the user moves their mouse over the header indicating intent to use one of the navigational items it will become fully opaque again until the user moves their mouse off it.
The impression this subtle use of transparency gives is impressive. Not only does it add a nice visual touch that speaks to the craftsmanship of the site, but it also serves as an inconspicuous usability function.
Fixed navigations are great, and useful but they do have a drawback. They eat up valuable screen real-estate. Even when the space is used effectively just having a navigation always sitting at the top of the page takes away 50 – 100 pixels that the user cannot have access to on a single screen. On a desktop this is less of an issue, but on smaller screens 50 pixels off the top of the screen can be a significant amount of space plopped off the top.
Allowing the fixed navigation to be partially transparent when not in use allows it to visually assimilate into the design a little more. The user can focus more on the content and look through the navigation sitting at the top. Additionally it allows those 50 – 100 pixels to be partially visible, increasing the space the user has for visual clues down the content. It allows the space to be usable but accessible for navigation when needed.
A major goal in the redesign of Pioneer’s website was to clearly incorporate some of the new brand values and business models that were being developed by our marketing team. These concepts were extremely important to communicate so that appropriate target audiences would at once understand the new offerings the organization was providing, and immediately identify with them. To solve this we created a 3 x 3 image grid that takes up the majority of the “above the fold” area on the home page.
The image grid is designed so that as a user hovers over an image an overlay is brought up with a short statement and a button to “Learn More”. Each of the images and statements were carefully chosen to present a brand message, as well as tell the overall story as a whole in a single glance.
For example, the second image in the bottom row shows two young people on a jet ski. As the user hovers over the image a blue overlay fades in with the words “Explore New Shores…”. In the context of the jet ski image, it specifically calls out the brand message of the beautiful waterfront of the Pioneer campus where jet ski’s and other outdoor water activities can take place. But in the context of the whole image grid it tells the story of the waterfront as a single piece of the entire Pioneer story. Each of these pieces are arranged radially around the brand proposition “For every Pioneering Spirit.”
Additionally, the use of color allows the eye to easily bounce around the presentation and understand it in a cohesive sense around the single phrase. Bright shades of green, blue, and red lead the user around the tiles and in themselves have something specific to say about the brand.
As a user scrolls down the homepage, they will find this:
When the user clicks on the “EXPLORE THE PIONEER CAMPUS” button they are taken to a separate page showing the illustrated map. As the user hovers over areas of the map the arrow will change to a pointer and the user can see that each of the main buildings is clickable. Clicking on each of the buildings will bring up a small info box with a short description, title, image, and link to “LEARN MORE”.
We created this page and custom functionality as a way to fulfill two objectives. First, the Pioneer campus is large and has a lot going on. Many users (and the Pioneer staff) would greatly benefit from having an easy to understand illustrated map that displays all the major features and places available and where they stand in relation to one another. The flat isometric style and colors were chosen to compliment the style of the rest of the site.
Second, many of the buildings on the map are available at specific times only. For example, Wendt Shelter shown below on the bottom right is rented frequently to host wedding receptions. For those just getting comfortable with the campus and what it offers, the pop-ups provide a very brief explanation as to the function of the building, show a picture so they can become visually familiar with it, and also link the user straight to more detailed information about rentals and the building itself. And the best part of all? This info is tied into a WordPress content management system so the client can edit it when needed in the future.
A lot of hard work goes into creating a website that is user-friendly, beautiful, and meets the needs of the client and their brand. Seeing it all come together in the end is a joy, especially as we hear clients and their customers declaring “this is my favorite part of the site!” If you would like help creating an effective site that others will love and use, please feel free to contact us and let us know what you have in mind. And visit the Pioneer Camp and Retreat Center website and let us know in the comments below what YOUR favorite part is!