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.
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.
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.