Requirements and Initial Design

Sticking to flat design elements and usability heuristics, I hatched out some concepts of what the basic design would be. There were two styles of layout we chose from: the featured graphic layout and the hero header layout. The feature graphic layout relied heavily on the main graphic and going to many pages. That seem to deviate away from staying simple, so I went with the hero graphic one-page layout.

I used a fixed navigation for desktop and mobile platforms, and empasized the scrolling on the tablet and mobile platforms. Both fixed navigation were for ease-of-use, and the absence (or lack of focal point on) of the fixed nav were to adhere to the demands of each platform. Each block contained information for each different target audience.

Over all, I stuck with a Responsive Design approach with graceful degradation as the main foundation of the site.

Visual Design

Color, contrast, and features were highly important. I used white as the base color for design and the logo colors as a secondary palette. Using the main colors of the logo, I color-coded each section using a corresponding color to display uniformity across the site.

Unity also played a powerful role for each section of the site, as it gives the perception of each section being its own. I further enforced this by switching the highlighted navigation item to coorespond depending on which section the user was in.

I also implemented certain features to both aid in the use of the interface and promote a better experience. As the user scrolls he or she may either use the main navigation as a way to get around, or if he or she just wants to return "home" there is an up arrow that appears once the user has scrolled past a certain point. There is a slight "lazy load" the website does, easing the full website in from a white background, then fading in the hero image. At the bottom there is a form that once it is submitted the page will return to the form with a confirmation message. This was the better solution because of browser compatibility, as I was challenged with designing all the way back to IE7 (fun times!).

Prototype and Testing

After I had a working prototype I did some testing with the site and found some key issues I needed to fix. Many of the test participants had trouble getting back to the top or "home". This was because 1.) there was no home button in the main navigation and 2.) the up arrow was placed in the bottom right corner. I quickly remedied the first situation, as the issue was my targeted audience expects a home in the main navigation, and investigated further into the second. I found that users normally don't look in the bottom right of the page often when scanning it. Placing the arrow on the left is better because it's easier spotted and it feeds the idea of "going back".

There is a slideshow near the footer of the website. Users were trying to read the slides, but they were cycling too fast. Easy fix by slowing down the slider to an optimum speed.

On the mobile view I identified two key usability errors. First, users would try to close the menu by clicking outside its bounds. This is a widely used norm and, realizing I had violated Matching between system and real world, I corrected this.

The other error involved an extra click in closing the opened mobile menu. Once the user navigated to his or her target destination, he or she was originally required to close the menu manually. This creates an extra "barrier" for the user and was deemed unnecessary, so it was removed. Finally, after another round of User Testing (no problems this time! Awesome!) and code optimizing, we launched the site.

My experience with the project allowed me to really flex my muscles in both User-Centered Design. I learned a great amount of how to utilize some neat tools and my UX specialty to create a different experience in showcasing information.