Interactive: Web sites

From a small industrial company needing a new online presence to an established online comic book web site community needing a new look, I have created a multitude of web sites, eCommerce sites, community sites, gateways, eNewsletters, and other web elements for a wide variety of clients. Due to my experience both on the design/strategic side and the SEO/production side, I often take these projects from the concept phase all the way to launch, and usually as the project lead (if not the sole artist/ programmer). The real value of being able to wear these different hats, however, is the ability to understand how to most efficiently and effectively implement company goals and branding strategy in an online campaign. (I have also created a number of flash and a couple of video pieces. They can be made available upon request.)

Below, you'll find a sample of web sites I've recently worked on; thumbnails expand to full snapshots, as well as details on the particular project.

Media Recovery: web site redesign
CONCEPT + DESIGN + HTML/CSS
mediarecovery.com

Media Recovery is a B2B nationwide provider of a broad line of data center and other technology products and services. Their audience is sophisticated technology providers, who will take the time to research solutions and vendors before making purchase decisions. Currently the site lacks clear focus, a strong branding messaging look, and does not convey the breadth of Media Recovery's product and service offerings. Additionally, the web site included an equally poor e-commerce site that did not feel integrated with the static site at all, which increased buyer concerns of purchasing technology products from a 3rd party.
 
In the soon-to-go-live redesign, the goals were 3-fold: design an on-brand, cohesive web site that is more user-friendly and appeals to the technology-focused audience, design a structure that accurately conveys the expanse of the site while being highly navigable and reduces the number of click-paths, and develop a more sophisticated, robust, modular interface that can easily contain a varying number of supporting elements ranging from additional downloads to additional categories. The redesign includes extra features such as breadcrumb navigation, a static and store site search, and a more up-front login that allows the user to feel as if both the static and e-commerce site function in parallel.
 
Part of the confusion with the old site was that there was no clear heirarchy; overview category pages, subcategories, and product detail ALL LOOKED THE SAME. The redesign structured the site much more clearly, eliminating the confusion of where products are and how to navigate to those products. The new design also took advantage of the beautiful product photography, which reinforced the perception of high-end products and services.
 
One of the main client requests was to design a structure that was more robust and allowed for more supporting elements on the page such as pdf downloads and images. In addition to this and making the new pages more Search Engine Optimized and more readable, the redesigned structure includes the ability to easily purchase the viewed product, talk to a rep about the desired product, and find more information about the specific product, making the user experience much quicker, much more helpful and much more pleasant.

The Men's Center: web site
CONCEPT + DESIGN + HTML/CSS
themenscenter.net

The main goal for The Men's Center web site was to create an informative, dynamic site that users felt truly addressed their concerns and made them feel secure in coming forward to seek counseling and therapy. To create this experience, the site used a zen-inspired theme that very clearly spoke to their concerns and detailed the company's very targeted service offerings. News and press releases, upcoming seminars, and white papers reinforced the credibility and sincerity of this small practice. Through the web site, the practice has gained a large number of clients and recognition from news organizations such as NPR.

Knaack Monster Box: web site/video
DESIGN + VIDEO + FLASH
knaackmonsterbox.com

The client wanted to introduce their new Monster Box product through a creative web presence that captured the attention of all visitors to the Knaack website. The goal of the web presence was to promote the extreme durability and heavy duty aspects of the Monster Box, as well as continue to establish Knaack as an industry-leader.
 
The purpose of the homepage flash module was to promote the Monster Box as the most durable, heavy duty, and secure jobsite storage box on the market. After a short video on the many innovative, safety-oriented features, the user was invited to click on highlighted areas to learn more about the product. I was a member of a team that included an outsourced videographer, another flash programmer, and the creative lead. On this element, I worked on video transitioning and the interactive portions of the module.
 
In addition to html layout, I implemented a pretty nifty and light-weight zoom feature for the product images, per the client request.

CGC: web site redesign
DESIGN + HTML/CSS
cgccomics.com

Certified Guaranty Company (CGC) is an independent member of the Certified Collectibles Group of companies. In addition to being painfully outdated, the site lacked a strong creative look, nor did it fit in with the recently rebranded group of companies. CGC itself also underwent a makeover, so the site needed to reflect the new dynamic look.
 
CGC wanted to create a new graphic look for their site that heled better organize their content and was more appealing to the collector: comic buyers. Their audience was motivated by more visual excitement, more educational materials, and a site that offered easy navigation. The concept look-and-feel was defined by the art director, and my role was to interpret the look across entire sections, modules, banners, and other functional elements.
 
 

John Grayman: flash site
DESIGN + FLASH:
johngrayman.com

John Grayman is a part of Shockwatch viral marketing campaign to increase awareness of the ShockWatch brand and product offering (damage prevention products.) As part of a team led by the ACD, I designed and implemented sections such as create-a-scene, and dynamic contact forms.
 
In this fun section I designed and coded, the user creates a mad-lib-inspired story about the hapless John Grayman. As the user creates the story, the scene is updated and visually represented. The user can print out the final scene and is invited to share the game with others.

Vesta, Inc.: web site SEO
SEO HTML/CSS
vestainc.com

The web site was re-considered from an SEO and crossbrowser standpoint and updated. As a result the entire html structure of the site was recoded for pure HTML/CSS control.

SET: web site redesign
CONCEPT + DESIGN + HTML
setenv.com

The objective for this site was to update the look and content on their Web site as well as optimize the site for organic Search Engine listings. The old site lacked the personality, structure, and all-around pleasant user experience as well as being severely standards-NONcompliant, unviewable cross-browser, and any optimization for search engines.
 
The new site incorporated a fresh, clean color scheme and more user- and browser-friendly interface. One of the client requests was to convey the highly personable, yet professional service SET is nationally recognized for. Their audience was motivated by avoiding liability (public relations), flexible/accessible customer service, and efficiency/innovation (to save them money). Thus, features like incorporating up-front messaging in the form of a human-focused flash on the homepage, SET Safety facts and emergency numbers persistent on every page, and a focus on employee experience and recognition reinforced the hands-on, above-standards client message.
 
The new site incorporated a fresh, clean color scheme and more user- and browser-friendly interface. One of the client requests was to convey the highly personable, yet professional service SET is nationally recognized for. Their audience was motivated by avoiding liability (public relations), flexible/accessible customer service, and efficiency/innovation (to save them money). Thus, features like incorporating up-front messaging in the form of a human-focused flash on the homepage, SET Safety facts and emergency numbers persistent on every page, and a focus on employee experience and recognition reinforced the hands-on, above-standards client message.

Enginex: web site
CONCEPT + DESIGN + HTML/CSS
enginexee.com

Enginex was a new Environmental Engineering firm that wanted a site purposed for information sharing and building brand awareness. An off-shoot of SET, the challenge was to convey the same message but to a different audience, and not associate the two companies with each other. Thus, this look-and-feel was derived from a brochure designed by the art director.
 
The site was not very big, nor did it contain much content, but it was important that the user be able to jump between pages and gather information quickly.

ITC: web site
CONCEPT + DESIGN + HTML/CSS
tribologyinstitute.org

The Institute of Tribology and Coatings (ITC) is a collaborative of experts and facilities from leading organizations from various industries, and provides top technical experts for the legal and insurance communities. The objective was to create a site that highlighted the broad base of expertise ITC offers as well as speak to three very different markets: military, commercial, and expert witness (legal consultant). In addition, the site also served the dual purpose of being a community portal that the experts could use to transfer information. Thus, the menu became two-tiered: one clearly designated for the community, and one designated for general static information.
 
Previously, all clients were received through word-of-mouth, and ITC's target audience was mostly unaware of the organization. One goal of the site was to establish ITC's credibility and reputation by very quickly and easily giving the user as much information as possible up-front about the different ITC services and industries. Thus, each service page provided an overview, company methodology, downloads, and a clear bulleted list of additional services that directed the user to request more information.
 
In addition to listing services and speaking to very specific industries, the client also wanted the site to be a substitute for their limited brochures, and so it was important to have brand message-focused sections. "Solve. Assist. Standardize." were pulled out into separate splash pages, with big background photography to give the site the "brochure feel"

Collectors Society: site redesign*
DESIGN + HTML/CSS
collectors-society.com

Collectors Society is a community created by the parent company, Certified Collectibles Group, where collectors can interact and learn about their hobbies, and have access to collector services in grading, education, products, and other areas. Like CGC and all the other Collectibles Group companies, the site needed to be updated due to rebranding and outdated implementation. Additionally, the new Collectors Society web site gained a TON of new features, so the entire structure had to be rethought.
 
The newly redesigned site focused almost exclusively on the community interaction functionality as opposed to the static information found on the other CCG web sites. To that end, the interface was completely rethought and included major shifts in hierarchy. The navigation for the community was brought to the front and the static navigation was dropped to the second level. The site was recategorized into separate areas (and thus color schemes) for coin, note, and comic collectors. More functionality shown on the next screen...
 
The main change to Collectors Society was the addition of the "Control Panel" function. In it, the user can access everything from their personal profile, personal collections, keep an online journal, develop friend networks, build collectible sets, and compete for awards. The addition of all this functionality required an enormous attention to detail, the ability to interface-design on the fly very quickly, and a focus on the overall objective. Originally, my involvement was to assist the programmers on implementation of the stylesheet throughout the site, but it quickly became apparent to me that the site was severely lacking in creative — not to mention any clear — direction, so I pushed and my role was hastily elevated to that of creative lead, both from a look-and-feel design to an interface design standpoint. Because of my involvment, the site won the award for "Online Community Standard of Excellence" from the Web Marketing Association's WebAwards.

NGC: web site redesign
DESIGN + HTML/CSS
ngccoin.com

Numismatic Guaranty Corporation (NGC) the coin-focused grading company of the CCG family. The leader in its industry, and offering unparalleled grading service, NGC is known for maintaining the highest standards in numismatics. The old site, like its siblings, failed to portray this message visually, and needed a refresh. Originally, the scope of the project only included a homepage redesign and fontface change, but soon grew into a complete site redesign.
 
The new homepage incorporated a more elegant, muted color scheme and more sophisticated type treatment. The most popular and important elements such as the news headlines and live price data were more clearly defined and brought up in heirarchy. Overall, the homepage became more modular, making the information much easier to find than in the previous design.
 
In the redesign, I decided to take advantage of the extensive library of coin images and use them throughout the site as a design element. The old site contained very few beauty shot images, reserving coin imagery for the photo gallery. Utilizing the beautiful coin photographs and pairing them with more appropriate typefaces (serifs instead of verdana) brought the look of the site more in-line with the audience's perception of their hobby. Numismatics is a very visual hobby, so the use of detailed coin imagery connected the site with the audience, which gave very positive reception to the redesign.
 
Not only was my task to bring the site more in-line with the company branding, but to also incorporate more independent marketing pieces such as ads and direct-mail drivers into the site. For example, NGC had our company produce a series of ads featuring the Millennia Collection: the most valuable coin collection ever assembled. The ads had a very distinct look that had no similarities with the site, but I needed to create a gallery section that looked both consistent with the rest of the site while still being recognizable to those that had seen the ads. I took the spirit of the ads and incorporated them into a unique gallery section, which was warmly received by the client.

PMG: web site redesign
CONCEPT + DESIGN + HTML/CSS
pmgnotes.com

Paper Money Guaranty (PMG) is the paper money grading arm of the CCG web sites, comparable to NGC. While not as popular as NGC, PMG's audience is similar, and the brand messaging is the same. The site received a similar look-and-feel rollout.

Collectors Society Message Boards
CONCEPT + DESIGN + HTML/CSS
boards.collectors-society.com

The Collectors Society Message Boards would be more aptly renamed to the Certified Collectibles Group Message Boards, as it is the main discussion forum for all the CCG communities: NGC, PMG, NCS, and CGC. The original look was bland, confusing, and lacked absolutely any branding. Perhaps ugliest and most neglected of the CCG sites, the Message Boards not only needed an on-brand, updated look, but also carried the extra challenges of being a third-party product, and the need to be designed for customization across the different communities.
 
The new version of the Boards had a very strong tie to the CCG branding, and very clearly designated different areas on the message boards for threads, news, navigation, etc. Additionally, I designed 5 color schemes appropriate to the various communities which members could choose from. The new design brought a heavily used site from an ugly "orphaned" look to one that placed it squarely within the CCG family.

Gravograph Gravostore: web site
CONCEPT + DESIGN + HTML/CSS
gravostore.com

The Gravograph Gravostore was a new online store for engraving materials, products, and tools, available for purchase engraving shop owners and other engraving-related companies. It was also one of the first points of contact Gravograph's audience had with the new Gravograph rebranding. The site had to appeal to the small, private owner looking to buy an engraver as well as the large corporations looking for the perfect engraving materials for their signage. Another third-party product, the site needed to be designed with a consideration for ease of production as well as user-friendliness and brand-cohesion.
 
One interesting challenge with the site was the redesign of its engraving materials charts. The Gravograph materials catalog contained a series of disparate tables that were poorly designed and created much confusion on the part of the buyer. Information such as surface color, core color, ply, surface treatment, thickness, and multitude of the other characteristics that could be mixed and matched needed to be made available. And because the goal of the site was to make the purchasing process as quick as possible and to minimize the number of customer calls, it was absolutely crucial to make sure this information be displayed as clearly as possible.

Conveyor Accessories: web site redesign
HTML/CSS
conveyoraccessories.com

Conveyor Accessories, Inc. is a small, family-run and owned company specializing in conveyor fasteners, tools, and accessories. Despite its decidedly friendly, personal approach to business, CAI is actually a very innovative company that is constantly ahead of its competitors. Not only was the old site ugly, it was essentialy a partitioned pdf download that offered little more information than the catalog, and was completely unfriendly to search engines.
 
While I was not responsible for the concept or design of the site, my role in the project was to advise the lead designer on basic web design principles, rollout the main designs onto the internal pages, and do the HTML production. SEO was outside the scope of this project, but the site was made text-based, search-engine friendly and standards-compliant.
 
One characteristic of the site was how its product categories distinguished themselves from each other. In the catalog, different categories were defined by different color schemes. The site implemented this technique by incorporating a dynamic stylesheet switcher that changed selected colors on the page to match the category.