After more than a year of static design, it was time for Echelon to refresh not only its logo, but also its web presence.  Counting among its members a variety of project managers, marketing professionals, programmers, and designers, Echelon was able to draw from within its own community to redefine its look.  In this month's Monthly Feature, guild officer Flippandra provides a glance inside the Echelon logotype design and web development processes — project models used by leading consulting firms to Fortune 500 companies.  If you are interested in the behind-the-scenes activity that launched our new site or would like tips for your own website, read on.

So how did it all start?  Why redesign at all?
I actually had a problem when initially approached for this project:  I liked the site just the way it was.  However, the guild lacked a true logo and was in need of a single look for all the modules used throughout the site.

original site

new site

That started a long 2 months of research.  What is Echelon's competition?  What are other guilds doing and (more importantly) not doing that could set us apart?  What are the current design trends in game software sites?  As a web developer from a conservative pharmaceutical company, some of this was new territory for me.  Luckily, the development and design processes remain the same.

What were the first steps?  How do you start designing and developing a website?
In the web development project model, the first thing to do is identify the site's goals.  Easy — www.the-echelon.net is a community meeting place that provides game resources and areas for organization and planning.  Besides some pretty accent images, this site is not about graphics.  It is about passing content to the users.

Next, you need to determine who your audience is.  Obviously, both current and potential guild members.  But there is another audience that may become a critical presence in the future:  the game developers.  Some guilds become official, sponsored testing guilds.  The more our MMORPG participation grows and raises our visibility, the more important it becomes that we maintain a tight, professional aesthetic in our web presence and incorporate good design principles in our site.

What are good design principles?  How are they important to the success of www.the-echelon.net?
Good design principles like consistency of fonts, industry-accepted color pallets for maximum legibility/eye comfort, and appropriate use of white space create welcoming, usable environments that instantly build brand awareness and user trust.  Using these good design principles will create a set of visual rules for your site.  Statistics show most users spend less than 10 seconds on new sites.  Therefore, it becomes all-important to design a site where those visual rules are instantly recognized and learned.  There should be no surprises.  With just 10 seconds to spare, your visitor has to learn how to use your site in a single glance.

What are these visual rules?
Things like "every link has this look and behaves this way when you 'mouse-over' it," "every title is in this font," and "every chunk of body text is formatted like this."  Navigation pieces are consistent in look and position throughout the entire site.  All these parts work together in a way that lets users rapidly scan a page and know where everything is without actually reading anything.

Did you design the site first, before the logo?
No.  The site is part of the Echelon "brand."  After the logo, consistent colors and graphics are most important in establishing a visual calling card.  So both evolved together.  The new site, like the new logo, was intended to be the natural evolution of an already outstanding site.  The visual skeleton is the same.  Same black background.  Same size fonts.  Same body text font face.  The sunset in the top banner was part of our signature look — so the new site has a fresh version of that graphic, complete with new, extra mountains hand-painted on each side to accommodate the wider windows of very high resolutions.

original banner

new banner

Following the standard web development project model, I put together a style guide, displaying these fonts, colors, and key graphics for the site, including the logo.  When that was approved, I offered a comp image for the officers' review — essentially a proposal for how the onscreen pages would look in final code.  (See the original officers' review comp on Flippandra's site.)

style guide

site comp

Let's talk about the new logo.  You kept the old font, but where did the dragon come from?
When you design a logotype, you consider (1) the audience, (2) the constituency, (3) the culture, and (4) the direction of the organization, as well as (5) the logo text itself.

After identifying the Echelon's site goals and audience, the logotype research was half-finished.  Much like our banner sunset, we have already displayed "The Echelon" in the font Abaddon for so long that it has become part of our identity.  It was just a matter of putting the logo on a white background and looking at the shape of the words and letters.  What was the most important word?  Obviously, "Echelon."  Which letter is most important, most striking in that word?  "E."  Does that letter's shape evoke any imagery?  In Abaddon, the "E"'s shape seemed reminiscent of a dragon curled slightly inward, tail trailing below.  (I had some initial hesitation that using a dragon may alienate science fiction-based MMORPG players, but ultimately used the dragon after remembering books such as Ann McAffery's Pern series.)  Once the dragon seemed the "right" graphical accent, I considered two things:

• What is Echelon 'about?'
  (comradery, altruism, maturity.)

• Who are Echelon's members?
  (Primarily 25-50 year-olds.  Large percentage are married.  Substantial number have military backgrounds.  Extremely diverse career choices.  Typically characterized by being family-oriented, mature, loyal, courteous, kind, professional, and fun-loving.)

72 dpi sketch

72 dpi vector draft

72 dpi shaded draft

300 dpi final print

In the end, we have a logotype that can stand alone — the eDragon icon.  When used in the guild logo, it pulls the eye to the word "Echelon," raises the "E"'s profile (creating an elegant triangular shape in the text), and makes a slightly edgy look while preserving dignity and maturity.  In addition, the guild creed is now tucked beneath the guild name — it will always be included wherever the logo is used.

1.  Classical triangular shape of new logo
2.  Eye is drawn to "E" of "Echelon"
3.  Illusion of "E" x-height raised above that of next tallest letter, "T"
4.  Guild creed is included in logo

Print purposes — you must be referring to our Echelon Store merchandise.  How did we come to have an ecommerce section?
Outside of personal websites, there are very few static web pages anymore.  In the industry, we speak about 'web solutions:'  integrated web-application packages that fulfill a variety of corporate/organizational needs.  Echelon already has features like a gallery, database-driven forums, and news feeds.  In all, it is an extremely sophisticated site.  Only one piece was missing from making www.the-echelon.net a complete web solution for the guild.

For some time, members had been asking for an official guild T-shirt.  This is always a complicated offline task.  With our nearly 600 members spread around the globe, collecting money and distributing finished goods would be a potential migraine.  To circumvent those transaction issues and to gain the ability to offer more merchandise besides T-shirts, I added the 3rd party vendor, CafePress, to the site proposal.  After reviewing their business model, the officers approved our use of CafePress as the manufacturer and distributor of official Echelon merchandise.  Every purchase supports the guild by building capital for future features or guild events.

Did anyone else work on the new site?
Yes — without the assistance of Andorin and Klar, this new site would not have been possible.  Andorin gave up an entire Saturday night to check my PHP syntax with me.  Ultimately, he wrote a very powerful 12 lines of code that controls the right block drop and middle section expansion in the modules like Forums.  Klar gave up several evenings to prepare a test environment on our server and to assist in the design's copy from that test area to our production site.

What's next?
Sleep!  *laughs*  Actually, you may see that the site is still being fine-tuned.  In the next few weeks, there will be additional changes to the modules as I match their look to the theme of the site.  But I've been daydreaming of the evening when I can finally play a game or — *gasp* — shut down my PC and read a book!

Flippandra is a Senior Web Content Developer/Designer with a small pharmaceutical company in the Northeast.