Redesigning Unit Interactive
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.
Other posts in "design"
- Text-Shadow and Too Much Time
- Scoping a Project
- The Most Important Element of a Professional Designer
- The Analog Notepads of Unit Interactive
- Makin’ Days
- Too Wet
- UnitElves
- Designing vs. Making Stuff Up
- Usability vs. Thinkability
- Big Brand 1080px Design
- Design Reimagination
- Define Design
- Delicious Design
- Wired Infographics
- Ugly Websites = User Flight?
- Design in the Sociopolitical Arena
- Infographics in IdN
- Radio Frequencies
- The Consummate Web Designer
- Hey Unitards! Design Mantra?
- Hey Unitards! Are Graphic Mock Ups Even Applicable?
- The Future of Web Browsing
- Beyond Comp Review: Two designs enter. One leaves.
- Hey Unitards! What about TV?
- Hey Unitards! Creative Brief?
- Better CSS Font Stacks
- No Compromise Required
- Do You Know Who You are as a Designer?
- Creating Great Online Experiences
Other posts in "feature"
- Meet the Staff: Ryan Rushing
- Meet the Staff: R.A. Ray
- Students Visit Unit Interactive
- Meet the Staff: Nathan Ford
- Art on Our Walls II: 28 Bicycles
- Art on Our Walls 1: Little Robots
- Meet the Staff: Angela Conlon
- Published: Interference
- Project Launch: Ringstats
- Project Launch: Tapology
- New Product from Unit: Curations
- White Labeling Unify
- Working with Multiple Agencies
- Useful Regular Expressions
- The Analog Notepads of Unit Interactive
- Nathan’s Anniversary
- Developing for Unify – pt. II
- Makin’ Days
- Our 2009 Annual Report
- Sewanee Environmental Institute
- Projects to Kick Off 2010
- The Sum of All Choices
- SnowCraft Fun!
- Risky Wallpapers
- TSTC Web Curriculum Committee
- Designing vs. Making Stuff Up
- Recent Project Launches
- Developing For Unify – pt. I
- Our First Product Launch: Unify
- Nearly 100 More Leads per Day
- Unify™ Private Beta
- Big Brand 1080px Design
- We Refuse
- Define Design
- The Consummate Web Designer
- Hey Unitards! Are Graphic Mock Ups Even Applicable?
- The Future of Web Browsing
- Beyond Comp Review: Two designs enter. One leaves.
- Hey Unitards! Creative Brief?
- Paid Search Follies
- Better CSS Font Stacks
- No Compromise Required
- Too Many Cooks Spoil the Dish
Other posts in "inspiration"
- Mediocrity and the Innovator
- My Morning View
- In Case of Design — Inject Critical Thinking
- It’s a Calling
- The Beauty of the Pentatonic Scale
- A Great Time in Sewanee, TN
- If Only Deadlines Were This Entertaining
- Do You Realize?
- We Refuse
- Design Reimagination
- Wired Infographics
- Design in the Sociopolitical Arena
- Infographics in IdN
- Hey Unitards! Design Mantra?
- The Future of Web Browsing
- Hey Unitards! What about TV?
- Spore
Comments (37)
The new site looks beautiful. And a wonderful write up on it too. I love reading about the design process like this – Keep it up!
The latest redesign looks brilliant, clearly accommodating the recent changes at Unit. Great work guys!
My only slight criticism is that I think the previous version was more distinctive in some ways, with perhaps a stronger sense of brand recognition (more of the ‘Unit’). I still think this redesign is awesome though.
Very nice upgrade, I will explore it in more detail soon.
Any particular reason why the layout doesn’t fit a viewport of width 1024px?
Thanks for the nice comments, all.
@coda: The wide fixed width was chosen for a few reasons. It is fixed because of the specific requirements of the content presentation and hierarchy. The width was chosen, in part, because we wanted to explore the use of more horizontal display space–and our viewer stats would seem to allow for this. Other reasons for the width involve issues surrounding a design agency’s responsibility to lead, and there are a few other things I’m a bit hesitant to discuss openly.
I won’t suggest it is right for everyone to go so wide, but it is right for us.
I was blown away when I first saw the redesign. I had no clue it was coming, it just came out of no where. But in fact the details that have gone in to the new design show a lot of time and attention. Congrats on the new look.
Thanks for the great write-up of your thought process and reasoning behind the design – I’ve read too many that feature insights along the lines of “we wanted a big header, so we made one.”
And on a totally random and unrelated note, for Angela – my best friend from high school was in One Voice at UMHB around the same time as you!
The redesign is as gorgeous as Angela. Good work, everyone.
Is it just me, or does the “We Think You Should See…” section remind you of google ad words?
I have to agree with Matt Robin. Your previous design was more successful in illustrating your brand.
It may be a personal bias but I find that the actual client work is the best brand definition an agency can have. The clients you choose to take on, and the final solutions, show more depth than your site’s current design.
In fact, the problem I find with your new design is that it simply gets in the way of viewing your client work. You’ve chosen a highly active frame to place around your accomplishments that ultimately competes rather than illuminates.
It never feels good to be a detractor to one’s hard work but In reading your personal site for the last few years I know that you appreciate constructive feedback. Hopefully you find this as such.
Thanks for providing a forum Andy.
Thanks Ryan,
Your points are astute and these are issues that we considered carefully in the redesign process. I’m sure that there are quite a few folks who have known (of) us and may share your views. It is always difficult to see one’s own definition of a brand challenged in some way; which this redesign does for those who have known of us for a while.
The fact is our previous design showed some things about us quite well, but we’ve redesigned with a mind to show other dimensions of our brand and articulate some of them differently. This will inevitably cause thoughtful friction in some cases. We’re confident, however, that the results of our redesign do a better job of doing the job comprehensively. I could, of course, be wrong, but I believe that what you now perceive as things competing with our client work features are merely differences in function and motive. We’re attentive to these issues and won’t just be abandoning the site/design without ongoing consideration. Thanks for your concern!!
Ben, the Delicious links in the sidebar are just what we’d want them to be. It is not vital information and so we lose nothing to preconceptions of those who decide not to actually read the content (and know it is not Google AdWords). Those who know our brand know we’d not put ads on our site. Those who don’t will learn (or not) as it pleases them. No worries.
Colin, thanks. And “down, boy.” ;-)
A great redesign, I was a fan of the first. I came here from I Love Typography, and thought the use of type for the employee details was great.
The gradients really do enhance the look of the site and gives it some real depth.
[...] A lowercase installation goodness, and the redesign of Unit Interactive: [...]
A very impressive re-design. Congratulations!
Personally, I find too much of Trade Gothic Bold Condensed a bit overwhelming, but I really like the site’s architecture and organization.
Which CMS did you use for Unit Interactive web site? Are you planning on re-designing the Unit Blog as well to match the new site design?
Thanks Paul. Glad you’re diggin’ the new look.
@inspirationbit, Thanks a bunch. As for CMS, we’ve never used any. We like to “run clean” in that respect with our own sites. The blog is WordPress-based, but everything else is just plain ol’ html/css (and PHP).
We may eventually get around to redoing the blog, but not for a while yet. Internal projects are taking a back seat to client work for the time being.
[...] A little grid goodness, and the redesign of Unit Interactive: [...]
[...] A little grid goodness, and the redesign of Unit Interactive: [...]
Thanks for sharing about your design process. As an agency, reworking your own website can be the most difficult project! I think the end result has a very approachable look and provides a great pathway for clients to explore your agency / work.
[...] http://unitinteractive.com/blog/2009/01/19/redesigning-unit-interactive/ [...]
This re-design speaks volumes about how far Unit Interactive has come in such a short period. You can see this maturity in the boldness and confidence of the new version; it appears more comfortable in saying what needs to be said and showing what needs to be shown.
[...] Andy Rutledge blogs about the redesign of Unit Interactive.com. 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. [...]
Thank you so much for opening the doors to a wonderful process. It is indeed candid.
Best.
[...] Interesting read on the thoughts behind the redesign of UnitInteractive.com. [...]
I would agree with Ben… the “We Think You Should See…” does remind me quite a lot of Google ad words which I think does degrade the integrity of the page at least on a subliminal level. I understand your justification of the design element, however I think it would be a step in the right direction keeping it at the same level of importance with regard to visual hierarchy, but opt for a sleeker implementation.
I really do like your use of horizontal space and I can see it is being put to use in your portfolio. Great work team!
[...] Interactive Unit Interactive – Website and Application Design and Development + Unit Interactive :: Blog :: Redesigning Unit Interactive Via I Love Typography __________________ CSS Search [...]
Really loving this. Great to see how you worked up the details. Something every design team should to communicate with their clients.
The new design looks great!
I have a question. Is there any reason you used sIFR and images for titles?
I have been thinking about using sIFR but I worry about how I can adjust kerning. Did you use the font (Trade Gothic?) because “letter-spacing: -5px” is enough for the adjustment?
It looks good anyway.
@ Miyuki: Thanks for the kind words. We used sIFR in order to facilitate a semantic-friendly way of using Trade Gothic, a typeface we felt necessary to define our brand.
As for the spacing, I am not going to candy-coat it: sIFR, in general, is a bear to work with. I did find this technique, though, that allowed us to control letter-spacing.
I really don’t know of any way to control kerning in sIFR.
Hope this helps!
[...] Andy Rutledge talks about the Unit Interactive redesign. [...]
[...] A little grid goodness, and the redesign of Unit Interactive: [...]
What a great article. I stumbled into your site when I was searching for movies and I must say I really enjoyed your post. Will be back to check more out in the future!
Nice educational post, thanks for sharing tips….
My design IQ went up 5 points just from reading your write-up–thanks for the candid and informative post on the reasons behind the look.
however we want to present pages that were “sick with copy” in the boring, featureless sense that’s right but here i read you had to plan a page structure that would lead a viewer’s eye and invite interest in the information .so thats the good idea.
I’ve fairly recently up and running a web site, the information you provide on this internet site has got really helped me a lot. Thank you for all of your time as well as work.
It’s an interesting view for sure and I appreciate it so this is a little something for all…
Wasting time is an important part of living. :)
Hello there, just became aware of your blog through Google, and found that it’s truly informative. I am gonna watch out for brussels. I will appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers!
Definitely believe that which you said.Your favorite reason seemed to be on the web the simplest thing to be aware of.I say to you, I certainly get annoyed while people consider worries that they just do not know about.You managed to hit the nail upon the top and defined out the whole thing without having side effect , people can take a signal.Will likely be back to get more.Thanks
Your Comment