XGO Rebranding + Interactive

The First Layer of Defense

XGO makes some of the hardest-working apparel out there, though you’ll rarely actually see it. Their base-layer is designed to be worn against the skin, under your clothing, to keep you warm and dry under the toughest conditions.

They’re designed with tactical forces in mind — military, law enforcement, and rescue teams, among others. No need to take our word for it; with the U.S. Army as one of their biggest clients, their quality stands on its own.

Before this year, XGO products were available exclusively to tactical forces. In 2010, knowing they had a killer product that could stand tall against anyone else on the market, they decided to take the plunge and start offering their products to the public. We were invited to their facilities in West End, NC to make a plan for transitioning from B2B to B2C.

Superheroes

Our first move as their new agency-of-record was a complete brand overhaul. The men and women who wear XGO are often called heroes, but we wanted to take that a step further. Inspired by the heroes of modern, gritty comics and combat video games, we used dramatic editorial photography to transform them into larger-than-life superheroes.

Our photography was shot on location in Fort Dix, NJ and Altadena, CA, with help from the Los Angeles Sheriff’s office and the L.A.P.D’s Special Response and Mounted Patrol units. After four long days of shooting, we brought the raw photos back to the office and spent three weeks on post-production. The final images were cut together and processed to give the scenes a surreal, otherworldly quality.

Brand Refinement

We were pleased to find that XGO already had a solid logo in place, but we found a couple opportunities for improvement. Bars at the top and bottom of the old logo made it hard to make out immediately. We removed the bars and added subtle shading to give the letters extra depth and dimension.

As an extension of our logo refinement, we created new branding guidelines for all XGO materials. Rocky grays with black and orange accents were applied to everything from business cards to mousepads and set a baseline for consistency through the remainder of the project.

Product Catalog

The XGO product catalog has long been the biggest component of their sales process. Dealers and customers alike use this to learn the features and benefits of each line and the technical details for each piece. While we planned to let the website start handling a lot of this communication, a beautiful catalog was still an absolute requirement.

Many new XGO customers had found confusion when trying to decide which product to buy. Our catalog treatment took special care to highlight the difference between the various product weights and features. We crafted charts to show which product lines were ideal for various weather conditions and grouped similar items together based on their weight and fit. Custom iconography helped to further recognition of must-have features for any type of buyer.

XGO on the Web

Before Airtype got involved, the XGO website did little more than support the catalog content and help users find their products. In our world there’s nothing more important than what users do while on your site, so our first priority was giving them a rich set of functionality to keep people coming back.

In addition to fleshing out their sales copy and improving the site navigation, we added e-commerce capability, an interactive dealer locator, and a system for dealers and media to download official logos and product images.

We also created “The Base” – an area where they can add news posts, blog entries, and “Field Reports” — testimonials from the men and women who wear their products in the field.

Making Software Play Nice

While building software from scratch is a great exercise, in production it’s preferable to let someone else do the work for you. Finding the best software package is a great start, but what do you do when it’s not enough? For this project we needed to combine two of our favorite publishing systems – ExpressionEngine and WordPress.

Using ExpressionEngine and WordPress together may seem redundant, but it’s our preferred way of managing a content-heavy site with blogging features. WordPress does blogging better than anyone else. Commenting, RSS feeds, and SEO support are all ready to go right out of the box, leaving nothing to do but implement the theme. EE allows us to manage just about anything imaginable with minimal setup and a client-friendly editing interface.

The code to join them together is fairly straightforward – we used cURL to grab global data from EE and send it to WordPress. Going the other way, XML was used to send WordPress data back over to EE-driven pages.

Ecommerce Development

For this build we decided to use Interspire’s platform as our ecommerce engine based on the initial features they stated were available to the user & admin. Interspire does a great job of processing transactions, but getting it to work the way we wanted proved to be a much tougher task. Even though we only used the basic functionality of the product, we still had to modify close to 100 files to get the look and functionality up to our standards.

We spent alot of time building some neat features on top of the core engine. We wanted the user experience to be as simple as possible as well as the administration. Rather than loading an additional page when a user is sorting by style or category, we implemented some slick jquery madness that shifts & displays products based on the filter.

If you fail to choose a color or size you are prompted with a nice slide-down message allowing you to fix this error. You can’t proceed to the checkout stage until these options are selected.

All color options of products as well as alternate views are served dynamically and shown to the user via a rollover action or lightbox. This alone can be a nightmare to manage when adding or modifying products to the interface. So we created some nifty code to do all the legwork.

Each product has only (1) large version (png) of each available color uploaded to the system. We created product backgrounds that display based on the type of the product. So if a product is part of a “Phase 1″ category, the “Phase 1″ background is shown, with a resized product photo overlayed on top of it along with each color variation – automatically.

This same process was then implemented across the board based on colors, larger & smaller views & product relations. Our interface determines how & where the image needs to be placed, sized, grouped & viewed on the fly.

We also made sure the customer receipts & admin notifications were as pretty as the shop itself. The admin area was a little clunky out of the box, so we took some time re-skinning it. This helped the training session/usability to translate much better to XGO’s order fullfillment staff.

iPad EmailUnit WebApp

XGO reps were also in the need for gathering new customers information on the fly for marketing purposes. We developed this iPad web application that allows users to sign up for XGO’s email/marketing list at special events. We created a touch icon, allowing XGO staff to instantly launch the app from the iPad home screen. From there, users can enter in their information and subscribe to the XGO elist.

Users are sent a confirmation email and upon confirming their email address, they are sent a nice html email confirming their subscription. Confirmed and unconfirmed subscribers are automatically stored into XGO’s email list database powered by Airtype’s “Atom” email campaign system.

The Experience

A killer experience is made by nailing all the details, and we’re really happy with how well those details came together to make a great package for them.

Outside of providing us with approvals and product details, we handled every aspect of this project on XGO’s behalf. Hosting, ssl’s, & merchant account configurations were just a few of the services we provided in addition to designs & overall development.

Check out the site at www.proxgo.com

Resources

WordPress
Expression Engine
Interspire
Atom Email Marketing