Unit Verse

Last week we launched the redesign of Unit Interactive.com, marking an important milestone in the progression of our company. All of us here—Angela, Andy, and Nathan—had a hand in this effort and we feel great satisfaction with the results. We thought it might be useful, both as catharsis for us and as inspiration or instructive example to others, to share a bit about our process and goals and to provide insights into some of the details of the results.

Why redesign?

Brand definition and evolution is the primary reason for our redesign. We began our agency with a clear vision and a strong internal understanding of what the Unit Interactive brand represents. It has, however, taken us a while to form an equally clear vision for how best to articulate those values and brand characteristics through our website. Our original design did not allow for us to express important aspects of our brand as well as we’d like and some pages were not designed to display certain kinds of information in the most effective or appropriate manner.

Another important reason for this redesign is that our agency has grown and we’ve added to our core competencies. These issues need to be reflected in our public face, and not just forced into a site that might not elegantly accommodate them. Design should be elegant, and so should a design agency’s website, of course.

The original design did express some things quite well. It was simple, uncluttered, and crisp, which expressed one core characteristic of our fundamental design value. Also, the main page allowed for a bold reference to one client project, providing us with a focused way to show off an example of our work to potential clients. In the end, however, we found the need for our site to do more.

Brand expression

We’ve built our company culture upon a set of uncompromising core values and have made a conscious decision to feature them strongly in our professional interactions; internally and externally. The result, we believe, sets us apart from other similar agencies. In order to build a brand, you’ve got to make a promise. Our expression of our values and difference is a big part of that promise, but we needed a better way to express it through our most conspicuous public face.

A better view of us
Unit Interactive is also founded strongly on the individuals involved. As a small agency, we have no room for staff inefficiencies. Everyone here is here for specific purposes and vital to our overall success. Since we trade largely based on the names and reputations of the individuals working here, we needed a better, more flexible way to reference our staff.

Additionally, we’re a young company. Our market is still getting to know our brand, so for the time being we need to expend more energy (and more website space) toward describing our values, explaining our services, articulating our differences, etc… than we might otherwise need to do. In time our brand will become better known, allowing us to pare-down our expository content. For now, however, our specific needs require contextually appropriate structure and volume.

Design features & theme

The visual design we pursued in this effort was meant to visually express certain characteristics of our brand and company culture. Also, elements of our individual tastes and aesthetic needed to be articulated. While the copy would do much of the heavy lifting in expressing our brand values, the rest of the design had to do its part.

Grid
As any Web designer knows, the grid is the foundation of order and meaning in design; established by how one adheres to or breaks with it. The grid for this redesign was determined by the categorical needs of the content. For our purposes, a 6-column grid would work best.

Personality
We aimed for a bold and candid vibe. This meant that a strong typeface was required for titles and page introductions; one free of frivolous forms or ornament. For this, we chose Trade Gothic Bold Condensed. We tried other similar typefaces, but kept returning to this strong candidate. We chose to use it in all-caps for a couple of reasons, but an important reason was that the page design and layouts would utilize very little in the way of structural elements. The copy—the titles especially—would have to imply structure. Trade Gothic Bold Condensed is perfect for such an assignment. We used a combination of image replacement techniques and sIFR to implement this font into our pages.

Since we did not want to burden the pages with a lot of structure, the content layout required a strong convention and visual mechanism for suggesting a sequence of content consumption. One of the best ways to accomplish this is to rely on horizontal rows of information. We planned our content to fit comfortably into this format and planned the copy volume of successive horizontal elements to maintain the necessary consistency.

The structure that was there, as provided by heading copy and structural heading containers, had to present a logical and effective relative contrast—horizontally and vertically. Careful selection of where, and where not, to apply delineation with dotted lines was also necessary in order to maintain clarity without compromising simplicity.

Copy
Given our expository needs, the pages were going to have to accommodate quite a lot of copy. We did not, however, want to present pages that were “sick with copy” in the boring, featureless sense. Therefore we had to plan a page structure that would lead a viewer’s eye and invite interest in the information. Our choice of Trade Gothic for the titles was important in this effort, but so was our copy writing.

In our client dealings, we are very direct and candid. We needed our website copy to reflect this characteristic of our brand. We avoided jargon and stated our message plainly. As we are primarily a design agency, we also need the physical structure of the copy to support the overall page structure, too …to reflect our design DNA. Toward this point, on any horizontal plane of content the copy volume was written to maintain physical dimension consistency. Doing so helps to visually simplify and produce a rhythm of sorts in the content.

Details
We invested quite a lot of thought and consideration into every element on every page of our new site. While stylistic and thematic consistency is important in describing a brand, so is the articulation of subtle details and novelty within that context.

For instance, it was our desire to allow for a more expressive showcasing of our staff on the site. We chose to use a type-o-graphic motif to share interesting and offbeat information about the individuals at Unit Interactive. It is different in format from the rest of the design, but the use of Trade Gothic Bold Condensed maintains an important level of thematic consistency.

We’re big believers in the idea of an agency main page being used to strongly and quickly convey an example of the experience or results of working with that agency. We worked to craft a bold way to provide this example. We then set it upon a subtle, aesthetically pleasing and effective backdrop. We also wanted flexibility in what sort of content appeared there, which we have now achieved.

On the case study pages, we wanted to detail more information about what we did in each project. This is especially important because of what sorts of skills and practices we’re able to employ from project to project; some of which go beyond mere graphic design and front-end development. For the page design we decreased the contrast between the header area and the content area to allow the important content—the project screenshots—to provide more contrast on the page.

We believe that a website form is often the first chance someone has to interact with your brand. That interaction can lay the tangible foundation for someone’s impression of your brand. In light of this fact we designed our contact form to simulate something of a conversation with potential clients.

Each time someone enters content and then tabs to the next field, an appropriate response or prompting (suggestion, comment, or alert) is triggered in the copy above the form. We wanted this copy to inform and almost create a dialogue between us and a potential client. Our portion of the dialog, while automated, is imbued with some of our personality and should support our brand.

Since we’ve worked with folks in Japan, Canada, Israel, The UK, and elsewhere, we thought it important to say so (again, our current expository needs), especially for clients who are not right next door. The mechanism with which we chose to do this is made from a custom JavaScript, rather than flash. It is both mildly interesting to interact with and provides some tasty graphic content on an otherwise text-centric site.

And finally

In the end, our aim is for all of the elements and details work together in concert to produce just the sort of theme and impression we want and need to convey through our website. While no one element provides full dimension of our brand or identity, we’re satisfied that the whole does. We’re excited about our new site design and hope that you like it. We also hope that you’ve enjoyed this look into our process and aims, and hope that it may have given you something(s) to think about.