Design Brief

The old site was a major obstacle in quickly pushing out updates to the more than 10,000 members across the state. I learned this from personal experience and decided it was time for an update. I approached the President and Vice President over drinks with my ideas in hand. It didn’t take much to convince them the work was needed and we were quickly under contract and moving towards a final design.

The best thing about the site is the integration of Chapter feeds from across the state.

Before Shot

The old site was trying hard to operate like a blog but was not doing a good job of highlighting important articles and posts. I quickly came up with the idea that the state site needs to operate like a Communication Hub for its members. The homepage should include all of the news that is happening throughout Colorado in a easy to read, quick format.

The Solution

Once I had some clear direction and really understood what the problems were on the site, I focused in on the home page. I knew this page was going to be the most critical component of the entire site.

We added a rotating slider image that I custom designed to include oversized imagery and links to important articles. We also added an action center across the top of the site to focus vistors to areas Colorado TU needs help now. The site includes a lot of custom jquery which hides and displays content on the fly. The overall look is pretty cool. The site is constantly in motion.

Building the Hub

The best thing about the site is the integration of Chapter feeds from across the state. Now when a Chapter leader makes a post the Colorado TU site grabs the feed and displays it right on the homepage. This means Trout Unlimited members can quickly see what’s happening in Colorado. The homepage acts like a news aggregator and delivers on the promise of a statewide communication Hub.

Other Features

This site is so packed with cool features I’m probably going to have to revisit it with another post. The Event Calendar is a nice touch and allows visitors to see whats coming up.

The Drop Down Navigation is pretty slick too. It uses WordPress’s 3.0 Menu System with custom code to allow for the drop downs. This means the Colorado TU staff can manually update the page links without any assistance from a Web Developer, saving them the costs and time of hiring a Web Developer. Not to mention it looks fantastic on the site.

The site is also hooked up to Authorize.net to allow credit card processing. This will allow Colorado TU to accept registrations for events and take donations all from the website.

Overall this is one of the most ambitious site’s we have ever taken on. We were honored to do the design and feel like we took this site and the organization as a whole into a new direction.

When you are looking at your keyword report you will see a visits graph very similar to the overall visits seen in the dashboard. (for an overview of the dashboard check out our previous post Google Analytics Primer- Keywords) The graph shows the number of visits from search engines.

Pages/Visit

The next grouping of information we want to look at is the Site Usage. Here you can get an idea of what your visitors are doing when they come to your site. You want to pay attention to Pages/Visit and Bounce Rate. Pages/Visit will tell you how many pages a visitor from a search engine looks at. The more pages the better.

Your search engine Visitors will be happier when they arrive at your site if they see content they entered in the search box.

If you are getting a small number you may want to rework some of your content to better match your search results. For Example: Lets say your getting a lot of hits for Nicks Special Widget, but none of your pages specifically talk about Nicks Special Widget. It might be a good idea to dedicate an entire page to the Widget. It’s always a good idea to try to match your search results with content on your site. Your search engine Visitors will be happier when they arrive at your site if they see content they entered in the search box.

Bounce Rate

Bounce Rate is a metric very similar to Pages/Visit. Bounce Rate displays the number of visitors who entered and left your site on the same page. A good number here is around 30%. If you have a bounce rate higher than 30% you may want to think about reworking your content to provide similar content on your pages. If you are using WordPress for your site an easy way to do this is to incude links to posts that have been tagged or are from the same category.

Keywords List

Lastly and probably most importantly we want to look at the actual keywords that send visitors to our site. This list includes all major search engines and gives you a great snapshot of the major searches that generate hits on your stie. If your site has been optimized for you’ll be able to monitor the effectiveness of the work by monitoring whether or not your keywords are appearing here.

When you receive your monthly pdf report from us you’ll see it broken down into several categories. I’d like to briefly go over the dashboard.

This page is a quick overview of the visits to your site. If you don’t want to get into the nitty gritty of the site this is a good page for you.

Lets start with the visits graph: This graph shows you the number of visits to your site on any given day for the last month.

The next table we want to look at is Site Usage:

Visits: are the total number of sessions initiated by all visitors to your site, in other words, the total number of new and returning visitors to your site.

Bounce Rate: displays the number of visitors who entered and left your site on the same page. A good number here is around 30%.

Page Views: Are the total number of pages visited by users on your site. A high visit number and a low pageview number means your site may not have enough “good” content to keep visitors.

Avg. Time on Site: Shows how long people stay on your site in minutes and seconds.

The next illustration to look at is Traffic Sources:

This diagram shows you where visitors to your site are coming from.

Direct Traffic: indicates how many people accessed your site by directly typing the URL

Referring Sites: Indicates how many people used a link from another site to visit your site

Search Engines: Indicates how many people used a search engine to find your site.

Typically these three areas will give you a good understanding of the:

1. Number of visits to your site.
2. If your site has enough meaningful content.
3. Where site traffic is coming from.

The next report we want to focus on is the Traffic Sources Overview.

This report gives us an overview of where visitors to your site are coming from. We can quickly review the top traffic sources and the number of visits they sent to your site. We can also look at the top 5 keywords used to find your web page.

A similar report to this is the Referring Sites Report.

This report tells us the top referring web pages that sent users to our site via a link. This page is very important to see how people are coming to your site, especially if you have paid advertising anywhere. You can see just how effective that advertising really is. The Source is the referring site.

Another important area of your report is the Keywords section.

This report shows you all the keywords used to find your site in search engines in the last month. It shows the number of visits and the average time on the site. If your keywords report does not match the basic services you are offering, additional thought should be given to improved content across your site.

The Top Content section shows the most viewed pages on your site. This report is excellent in determining what users to your site are viewing the most.

Lastly the Geography Report shows where in the US and sometimes the world hits to your site originate.

In closing

It’s a good idea to keep copies of your report to compare trends over time. These reports will help you to determine the effectiveness of your offline marketing and online marketing initiatives.

Companies invest in Good Design because it helps them appear trustworthy, identifiable, and profitable. Consumers are wary of businesses that appear unprofessional.

For a more modern perspective you don’t have to look any farther than Apple. Apple has invested heavily in good design and that investment has led to record profits and stock prices in 2010. People trust Apple, when you choose an Apple product you expect a high level of design and superior quality. Good Design is Good Business.

But why?

You don’t have to go far to figure it out. Take quick drive down a commercial street and pay attention to all the advertising trying to get your attention. We are inundated with ads 24/7 these days. Now try to find a sign or storefront that appeals to you. If you knew nothing about the shop, would you go inside the store because of the design of the sign? I do it all the time. Good Design is Good Business because it helps build a relationship with your potential customers. Companies invest in Good Design because it helps them appear trustworthy, identifiable, and profitable. Consumers are wary of businesses that appear unprofessional.

Good Design can set you apart from the competition. The world is full of bad advertising. One way to set yourself apart form your competition is to look better than them. Investing in Good Design can help you stand out and lead to more customers.

Overall using Good Design sets your business up for success in the long term. Your company will appear professional and worthy of your customers business.

Back in early July the President of Colorado Trout Unlimited (CTU) approached me with a very unique opportunity. They wanted Niby to design a custom license plate for the organization. The only caveat was that it could not include a fish in the logo in any way. My initial reaction was “no fish thats crazy” but then I saw the genius behind the plan. By not including a fish CTU can market the plates beyond it’s initial membership- Brilliant. So the scope is wide open and completely up to me to come up with the design. I was stoked to help and honored to be asked.

The work isn’t finished yet. We still need 3,000 signatures to move onto the next phase. You can help by signing the petition here.

I sent off several sketches to CTU to get the juices flowing and eventually we settled on three concepts. A sketchy version that plays off the popular Columbine plate here in colorado, A dramatic version that represents the power of the river, and a realistic version that illustrates the serenity of mountain streams in Colorado.

Originally this was my favorite concept. I like the young playful representation of the mountains and the river. I even managed to hint at fish in the illustration. If you study the mountain and view it as the tail of a fish you can see the river as the body and bam you have a fish.

As the concepts developed and we started seeing actual license plates this version became my favorite. I thought this concept illustrates the power of the river. It started as a water drop with the foaming of the river crashing down the mountains at the bottom. I was trying to capture the energy of the river and it’s importance to Colorado.

This version was a more realistic view of a meandering river up in the mountains. I knew this one was going to be the option chosen. The blue really pops and overall the graphic looks fantastic when printed on the plates.

After submitting the plates to CTU it was a waiting game until we heard back from the state. I was shocked when I heard we got actual license plate mock ups from the Department of Corrections. It was pretty surreal to see a concept you worked on mocked up on a actual license plate.

As I predicted the board selected the realistic version. While driving around one weekend and had a brilliant idea. What if we could get decals approved with the plates. These could include a fly fisherman or a rafter. I mocked up a version and sent it to the DMV. It was re-soundly rejected, oh well. It was still a cool idea.

Overall this was the most far reaching project Niby has ever worked on and we were beyond excited to help Colorado Trout Unlimited.

The work isn’t finished yet. We still need 3,000 signatures to move onto the next phase. You can help by signing the petition here. By signing the petition you are not pledging to buy the plate, just that you support the concept and wish to see the legislation move forward. Please help out CTU by signing the petition.

If you want more information on the plate and how it will help Colorado Rivers vist the Colorado Trout Unlimited Blog

When you open your eyes and see the designed world all around you it can be a fascinating place.Every piece of advertising was designed by someone, for better or worse. When you sit back and think about all the work that goes into everything you can’t help but be inspired. I hope to have several posts under this heading in the near future.

Being a web designer in Denver Colorado I am blessed with the ability to look out my office window and see the mountains. Mountains have inspired artists for centuries. The logos below expertly represent the majesty of the mountain and help keep me inspired for future projects.

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

This logo is fantastic. The mountains, a fish, and a deer all rolled into one. Beautiful

View Source

View Source

Shortly after collecting and analyzing the answers from our questionairre I begin work on the web schematic. This is one of the most important documents we create because it lays the groundwork for the web design to come.

Website Schematic Definition: A graphical representation of where navigation and links will appear on a proposed website.

That sounds great but what does that mean? Well let’s break one down to learn how to decipher this document.

Website Schematic Legend

The best place to begin is to take a look at the legend. Let’s break it down…

Essentially the purple box is a webpage. In this example it’s the “About Our Chapter” Page. Each blue box represents a link on that page. The color coded circles help me group similar layouts for future web templates. Any text not included in a link represents the beginning thoughts on the content of the web page. The gray lines extending out from the links show where the user will be directed when they click on the link. This is typically another web page.

Once you understand that each page is represented by a purple box and the gray lines show you what page you will be sent to when you click, you have a basic understanding of the schematic.

Full schematic breakdown

These graphics are not final by any means but they are crucial to helping me move onto the next step of design-wireframing. Essentially these schematics begin to organize my thoughts on what links and content need to go on what pages. While I am producing wireframes I am constantly referring to this schematic to insure I am staying on track and not duplicating work by making extra templates when I don’t need to.

I hope this breakdown helps you to better understand what it is you are looking at and illustrates just how important this web schematic can be when designing a web site.

I typically have them printed locally which saves me a lot of money verses buying cards online. Plus I like to fit three cards per sheet to help keep my costs down. Not to mention the fact that it is a lot of fun!!!

The site uses a few new CSS3 tricks and I created a custom options panel in the backend of wordpress. This is the first fully customizable site that we have launched. Needless to say I am pretty excited for it to go live. I hope you enjoy the preview.

Google Calendar Integration

Custom Back End Options Panel