You may have seen the recent case study featuring the evolution of OmniTI’s brand mark. Work on their new web site started soon after that was finished. This is what we did:
OmniTI’s CTO Chris Shiflett and I worked closely on every aspect of the vision, brand message, information architecture, copy writing and content. For me it was the best kind of arrangement resulting in a piece of work I’m especially pleased with. Along the way we developed the kind of relationship that I’ve come to treasure, making me feel like I work in a collaborative industry, rather than a service one.
Metaphors for the invisible
Discussions around the new site made me think of two interesting design problems. Scalability and performance, security, development and infrastructure are invisible arts. Historically, companies have fallen back on metaphors to communicate what they do visually: Faux boxes of imaginary software; stock photography of happy people at computers; they never worked for me. From my perspective, OmniTI is one of the finest development companies in the world. They’ve written some of the seminal technical books in our industry. They work for some of the most heavily trafficked sites on the planet like Digg, Friendster, National Geographic and Facebook. Their contributions to open source are legendary, with their utilities being used by Yahoo!, amongst many others. When tackling email on a massive scale they built the world’s fastest mail transfer agent. To reduce what they are capable of to awkward metaphors seemed disingenuous. I wanted to do something different.
Another significant problem was how to convey personality. People buy from people, especially in a service industry. The relationships we develop are priceless. Many developers in our business—especially those who attend conferences like OSCON where they often speak—are already aware of the people at OmniTI, but they themsevles don’t tend to shout about what they do. Part of the reason for this is the culture of the company itself: Relaxed and down-to-earth but jam packed full of some of the most talented people anyone could hope to work with. Excellence has become commonplace, making celebrating it feel almost un-natural. It just happens by default. So, the web site needed to show some leg, reveal their personality as well as their work, without forcing patterns of publishing on them that would not be maintained.
These problems made the job interesting. I wanted to accomplish three specific goals:
- Make OmniTI accessible. Personalise the brand, reveal the company character, and the people within it.
- Communicate the scale, quality and depth of what they do to technical and non-technical people.
- Make the whole experience of researching and contacting them simple, easy and useful.
Collaboration
To try and accomplish the goals we took a novel approach to design. It might seem ad-hoc, but it was deliberately organic; we let everything develop collaboratively, at almost the same time: From setting the vision to requirements gathering, persona development and task analysis, through to information architecture and copy writing. It sounds insane, but with a condensed time-line and a lot of intellectualising to be done, it worked in a way that only a small agile team that knows each other well can do.
Along the way we went through four related iterations of style. Each reflected a development stage in the multi-track process we embarked on. The staff started writing a personal note for their own profiles. Some chose to stay with the professional photos, others supplied their own. All of it real though and unfiltered by marketing hype. Read the personal note of Rob Speed to get a glimpse of what I mean. The iterations kept getting better. In fact, everything kept getting better. Nothing is ever perfect, but a feeling of constant iterative improvement is a joy in itself. These are some of the highlights from my point of view:
Theme, copy writing & content
The theme is deliberately textual. OmniTI is a company that manipulates data in ways that are so esoteric that sometimes I had a hard time conceptualising the scale, nevermind the method. Text is the prevalent form of web data. It felt right to focus on it.
Early on I decided to drop almost all decorative images and anything that was not content from the design. The data, the typography, they became the decoration. That went hand-in-hand with the decision to let OmniTI’s people, work and clients tell the company story. We decided to have a dual section in the planet for official company news and relevant posts from the staff’s own personal blogs. For the rest of the site, any copy that didn’t reflect the spirit of the company was avoided, and that which was left would be factual, not hyperbolic. Any claims OmniTI have made are under-estimates, and therefore all the more exceptional.
Tiered detail
I wanted to find a way of communicating the scope of their ability in a simple way. The audience diversity made this problematic. When developing personas to identify who we wanted to reach, two stood out: The technician and the executive. Both have very different requirements from the site. Both required detail in different areas. The first answer to this was for the home page. To grab people’s attention, I had the idea to display the actual output of their work as data in real time. There were technical and disclosure issues. We settled (for now) on showing some meta-level data around the number of pages and people that OmniTI’s clients serve:
This will evolve over time and also be stored in an archive for future reference. Even more importantly, it is no mere boast. The figures are independently gathered and conservatively rounded down.
The next solution was to somehow ease all of the audience into the site, whether they were technical or not. The narrative pattern we developed I call tiered detail. At the first level, like the index or any of the main navigation landing pages, chunks of different data are labeled with headers that encourage page skimming to find interesting topics. Copy is short, terse, accurate. The second level, like a personal profile, is more detailed and specific but has contextual links to related second level topics. The copy has links to third level pages where the focus narrows further to provide the kind of detail some people might want. These third level areas can be on site or off site—we didn’t distinguish between the two. All detail is useful when you want it.
URLs
Both Chris and I love beautiful, clean URLs. So when he came up with the idea of using verbs rather than nouns in the information architecture we we quickly agreed to make it so. The outcome of a fair degree of debate and wrangling is the structure you see today. The about page is http://omniti.com/is, the work page is http://omniti.com/does, etc. Deeper pages have a URL that forms a sentence, such as:
http://omniti.com/does/security
All trailing slashes have been removed making for highly legible and beautiful URLs in any context. More traditional URLs are redirected to the verb, so people can still type http://omniti.com/about and reach the about page. If you wish to know more, read Chris’s post, URLs can be beautiful.
Typography & palette
Evolving an interface from a brand, the type choices of which I had nothing to do with, is always interesting. Trying to find compliments is fascinating, even more so in a design that relies heavily on type composition and treatment for decoration. I’ll pretty much let the typography speak for itself .
Highlights for me are the raised initial used in headlines which I always see as an icon, my favourite Baskerville italic ampersand used in the byline on the home page, and other subtle treatments like the semantics of the page titles or contextual links. I used a traditional scale, body copy is set in Georgia by Matthew Carter with the headlines set in a Lucida stack.
The palette is included in this section because the typography developed alongside it, and they are irrevocably linked. Or, I should say, they are tonally co-dependent. Although the palette is autumnal, it is a counterpoint to the season, and you may see us have some fun with it over time, but the effect will persist: Type highlighted by luminosity, regardless of palette.
Layout, functionality & accessible Ajax
The layout is elastic in every respect to a strict baseline grid. This served the narrative theme, splitting the content in to equal chunks higher in the architecture for skimming, resolving to conventional asymmetric columns deeper in.
Jon Gibbins did a sterling job implementing the JavaScript effects on the site. He chose jQuery and added some flavour of his own to make everything accessible with or without JavaScript turned on. That extends to the Google Map on the contact page which fills the expanding container as font size is adjusted. Jon also audited the site for accessibility generally, applying his uniquely pedantic but practical approach to support a wide range of disabilities, especially where the JavaScript is concerned. You can read more in his post, Accessible Ajax: OmniTI.
All other functionality was handled by OmniTI, with Theo himself building an unbelievably quick search engine with Perl in about an hour, and Chris building out the CMS equally as fast it seemed.
Experience & narrative
As designers, we wear a multitude of hats. In the final analysis I think we’re experience designers more than anything else. In many cases we use design to tell stories, or help a story unfold. We create spaces in which enacted or emergent narratives exist and the OmniTI site is no different. Like all real tales though, there’s still much to be told. Hopefully they have a good starting point; an authentic opening chapter where the history of the last ten years can sit comfortably with the next ten.
For my part, I hope the story is a joy to read. I hope the design is unobtrusive and becomes an ambient signifier that adds a little texture to the content. It is a design I would have liked to implement for Grow itself, so a lot of my own predilections went into it. I was lucky: The great relationship that we have, and the creativity of OmniTI, allowed my ideas some breathing space. We took a journey that resulted in a site that is re-markedly different to other technical companies. Some might view that as dangerous. I think the opposite is true. To me it was a great project to do. Hopefully you’ll find it interesting enough to enjoy. If that’s the case, keep an eye on it; there may be some more subtle changes to come.
Remarks from the log
By t.Gossm in Reflecting on Acceptance:
By Arturo Fernandez in Reflecting on Acceptance:
By Steve Avery in Reflecting on Acceptance:
By inspirationbit in Reflecting on Acceptance: