This is the archive of jontangerine.com version one, made in 2006, launched in 2007, and active until 2012. It’s archived to preserve the original design and its content that was referenced in multiple posts, books and galleries. There’s a holding page before the new site arrives.

Entries tagged with ‘work’

Display:

  1. Anakin

    I’m pleased to be able to say that Analog is joining forces with Fictive Kin! We already work together on Brooklyn Beta and other projects. We share the same ethics and ambitions. We have fun together. We’re good friends, and often old friends, too. They asked, we said yes. We had a beer. That’s pretty much how it went.

    The Analog adventure that started in 2009 continues, just bigger, and hopefully better, with more fun, inspiration, and collaboration. I like to think of it like assembling Dai-X from Star Fleet but Voltron may serve if that’s more familiar to you.

    It think Cameron came up with the word ‘Anakin’ from our two brands in 2010. It’s been used by us ever since whenever we get together to work or celebrate. It made me smile at the time, and even more so now, just like the echoes of the Analog identity in the lovely new Fictive Kin logo.

    Fictive Kin logotype

    If you fancy keeping an eye on what we’re up to, follow @fictivekin. There’s more on the Fictive Kin blog, and in a post by Chris. Thanks for reading. Onwards!

    Share

  2. Self-promotion

    The world has changed. Everything we do is more immediately visible to others than ever before, but much remains the same; the relationships we develop are as important as they always were. This post is a few thoughts on self-promotion, and how to have good relationships as a self-publisher.

    Meeting people face to face is ace. They could be colleagues, vendors, or clients; at conferences, coffee shops, or meeting rooms. The hallway and bar tracks at conferences are particularly great. I always come away with a refreshed appreciation for meatspace. However, most of our interactions take place over the Web. On the Web, the lines separating different kinds of relationships are a little blurred. The company trying to get you to buy a product or conference ticket uses the same medium as your friends.

    Freelancers and small companies (and co-ops!) can have as much of an impact as big businesses. ‘I publish therefore I am’ could be our new mantra. Hence this post, in a way. Although, I confess I have discussed these thoughts with friends and thought it was about time I kept my promise to publish them.

    Publishing primarily means text and images. Text is the most prevalent. However, much more meaning is conveyed non-verbally. ‘It’s not what you say, it’s how you say it.’

    Text can contain non-verbal elements like style — either handwritten or typographic characters — and emoticons, but we don’t control style in Twitter, email, or feeds. Or in any of the main situations where people read what we write (unless it’s our own site). Emoticons are often used in text to indicate tone, pitch, inflection, and emotion like irony, humour, or dismay. They plug gaps in the Latin alphabet’s scope that could be filled with punctuation like the sarcasm mark. By using them, we affirm how important non-verbal communication is.

    The other critical non-verbal communication around text is karma. Karma is our reputation, our social capital with our audience of peers, commentators, and customers. It has two distinct parts: Personality, and professional reputation. ‘It’s not what was said, it’s who said what.’

    So, after that quick brain dump, let me recap:

    • Relationships are everything.
    • We publish primarily in text without the nuance of critical non-verbal communication.
    • Text has non-verbal elements like style and emoticons, but we can only control the latter.
    • Context is also non-verbal communication. Context is karma: Character and professional reputation.

    Us Brits are a funny bunch. Traditionally reserved. Hyperbole-shy. At least, in public. We use certain extreme adjectives sparingly for the most part, and usually avoid superlatives if at all possible. We wince a little if we forget and get super-excited. We sometimes prefer ‘spiffing’ accompanied by a wry, ironic smile over an outright ‘awesome’. Both are genuine — one has an extra layer in the inflection cake. However, we take great displeasure in observing blunt marketing messages that try to convince us something is true with massive, lobe-smacking enthusiasm, and some sort of exaggerated adjective-osmosis effect. We poke fun at attempts to be overly cool. We expect a decent level of self-awareness and ring of honesty from people who would sell us stuff. The Web is no exception. In fact, I may go so far as to say that the sensibilities of the Web are fairly closely aligned with British sensibilities. Without, of course, any of our crippling embarrassment. In an age when promoting oneself on the Web is almost required for designers, that’s no bad thing. After all, running smack bang through the middle of the new marketing arts is a large dose of reality; we’re just a bunch of folks telling our story. No manipulation, cool-kid feigned nonchalance, or lobe-smacking enthusiasm required.

    Consider what the majority of designers do to promote themselves in this brave new maker-creative culture. People like my friend, Elliot Jay Stocks: making his own magazine, making music, distributing WordPress themes, and writing about his experiences. Yes, it is important for him that he has an audience, and yes, he wants us to buy his stuff, but no, he won’t try to impress or trick us into liking him. It’s our choice. Compare this to traditional advertising that tries to appeal to your demographic with key phrases from your tribe, life-style pitches, and the usual raft of Freudian manipulations. (Sarcasm mark needed here, although I do confess to a soft spot for the more visceral and kitsch Freudian manipulations.)

    There is a middle ground between the two though. A dangerous place full of bad surprises: The outfit that seems like a human being. It appears to publish just like you would. They want money in exchange for their amazing stuff they’re super-duper proud of. Then, you find out they’re selling it to you at twice the price it is in the States, or that it crashes every time it closes, or has awful OpenType support. You find out the human being was really a corporate cyborg who sounds like you, but is not of you, and it’s impervious to your appeals to human fairness. Then there are the folks who definitely are human, after all they’re only small, and you know their names. All the non-verbal communication tells you so. Then you peek a little closer —  you see the context — and all they seem to do is talk about themselves, or their business. Their interactions are as carefully crafted as the big companies, and they treat their audience as a captive market. Great spirit forefend they share the bandwidth by celebrating anyone else. They sound like one of us, but act like one of them. Their popularity is inversely proportional to their humanity.

    Extreme examples, I know. This is me exploring thoughts though, and harsh light helps define the edges. Feel free to sound off if it offends, but mind your non-verbal communication. :)

    That brings me to self-promotion versus self-aggrandisement; there’s a big difference between the two. As independent designers and developer-type people, self-promotion is good, necessary, and often mutually beneficial. It’s about goodwill. It connects us to each other and lubricates the Web. We need it. Self-aggrandisement is coarse, obvious, and often an act of denial; the odour of insecurity or arrogance is nauseating. It is to be avoided.

    If you consider the difference between a show-off and a celebrant, perhaps it will be clearer what I’m reaching for:

    The very best form of self-promotion is celebration. To celebrate is to share the joy of what you do (and critically also celebrate what others do) and invite folks to participate in the party. To show off is a weakness of character — an act that demands acknowledgement and accolade before the actor can feel the tragic joy of thinking themselves affirmed. To celebrate is to share joy. To show-off is to yearn for it.

    It’s as tragic as the disdainful, casual arrogance of criticising the output of others less accomplished than oneself. Don’t be lazy now. Critique, if you please. Be bothered to help, or if you can’t hold back, have a little grace by being discreet and respectful. If you’re arrogant enough to think you have the right to treat anyone in the world badly, you grant them the right to reciprocate. Beware.

    Celebrants don’t reserve their bandwidth for themselves. They don’t treat their friends like a tricky audience who may throw pennies at you at the end of the performance. They treat them like friends. It’s a pretty simple way of measuring whether what you publish is good: would I do/say/act the same way with my friends? Human scales are always the best scales.

    So, this ends. I feel very out of practise at writing. It’s hard after a hiatus. These are a few thoughts that still feel partially-formed in my mind, but I hope there was a tiny snippet or two in there that fired off a few neurons in your brain. Not too many, though, it’s early yet. :)

    Share

  3. Introducing Analog

    Analog logotype

    Just before Christmas, a few friends and I launched a new company, Analog. Writing this, I’m still a little surprised at the praise from all those generous people about the holding page. After all, to me, analog.coop is just that: a little holding page. We did work hard on it and laughed a lot after the easter eggs started to appear. (Have you found all three, yet?) Then, we kept on laughing every time we saw them — a good sign. However, we never felt like the copy was quite right, and know we have more to do. Maybe that illustrates why I’m still chuffed a couple of weeks later.

    We stand on the shoulders of those who’ve come before, but we also lean on the shoulders of those around us. That simple truth is why I believe in collaboration, and co-ops in particular, and why Analog exists. It’s a company of friends.

    Analog is a change of tempo in a co-operative playlist that started a long time ago for me. I’m not sure where it began but I’m pretty sure it was way before I actually knew what a co-op was. (That is, apart from the Co-op supermarket near my Nan’s house.) Back in the early ’90s, running club nights and working behind the plates, I always ended up doing stuff with other people. I’d invite veteran jazz musicians to jam over the beats, with a mic plugged into the mixer. I almost always worked with other DJs. It was always so much more fun to have other people around. A friend who worked in a print shop was indispensable when I was designing flyers back in 1992. I remember designing a comp on a piece of paper. It was a logomark with a bit of copy. In the print shop we printed lines of text at different weights in different fonts, cut out the bits we liked, and stuck them into place with spray mount. We photographed the layout, and made a plate to print from. We chose the card together, and the dark silver ink. I would never have used either without my friend’s knowledge and help.

    Fast forward a bit to the early part of the ‘noughties’, and realising how working collaboratively across disciplines was so critical for web sites, I founded Grow Collective. I think of it as a test run for Analog. What it proved to me is that the co-operative principles made sense, and turned me into something of an evangelist. I believe that everyone working on a project should profit equitably from it according to the scope of their participation. I believe we should have the right to claim our own work irrevocably, without suffering the indignity of being white-labelled. (It still happens.) I believe that working for nothing in order to secure clients is daft, and reject the notion that designing ‘on spec’ has any benefit whatsoever for anyone involved. I believe that there are other choices than working either for an agency, or freelance. I believe that if democracy and freedom are important to us, then they shouldn’t be signed away when we take a job.

    It seems that everyone reaches a certain stage (or is that age) when the security of being an employee compares badly with the quality of life that independence can bring. I attach great value to being able to decide where the lines are drawn between profitability and quality; between when to rest and when to work; between what to do, how to do it, and who with. It’s a question of happiness. If independence is directly linked to happiness, but collaboration is the catalyst that makes good ideas work, a co-operative is an obvious choice, and Analog is my answer. I think it has all of the benefits of independence but a structure that could compete with the brand equity of agencies. It’s an hypothesis that is still unproven, but I believe in it. It feels right.

    Of course, the members of a co-op are all-important. If I may, I’d like to introduce you to my colleagues:

    • Alan Colville is a veteran user experience designer. He’s worked both sides of the fence as the customer experience guy for large companies like BT, and a user experience design consultant for Blackberry, Vodafone, and Visa. If ever there was someone who understands design thinking as well as design doing, it is he. He’s a serious man on a mountain bike, too!
    • Andrei Zmievski is the former open source fellow at Digg. He was previously a platform engineer at Yahoo, and is a core developer of PHP. He co-wrote PHP Developer’s Cookbook, and is the architect of the Unicode and internationalization support in PHP 6. If there’s a technical conference somewhere, the chances are Andrei’s giving a talk. Oh, and boy, does this guy know his craft beer.
    • Chris Shiflett wrote the HTTP Developer’s Handbook, and PHP Security, as well as having numerous articles and other book contributions to his name. He’s given talks at the best developer conferences for a decade, combining the sensibilities of a designer with the rigor of an engineer. He’s also pretty decent with a (real) football, too (for an American).
    • Jon Gibbins used to develop accessible music software for people with disabilities. He’s the best accessibility researcher I know — formerly an admin at GAWDS and moderator of Accessify forum — and a priceless interface engineer to boot (every designer should know one). After calmly wrestling with browsers for years, he can still play a mean guitar today.

    These guys are some of the best people I know. Not just in their work, but personally, too. When we wrote ‘good people, good work’ in our opening paragraph on the Analog site, it was a manifesto rather than a statement. Leaning on their shoulders has already given us great fun with JavaScript and CSS (the Analog easter eggs), with GeoIP, the Twitter API, and our little #grid. All of them can be seen on the Analog holding page. I’m proud of the work we’ve done already, and we’ve barely started. Sitting here in a lounge chair at home, with my feet up, and Ommwriter soothing my ears and eyes, I’m smiling to myself at the thought of things to come. Remembering some of the kind words people have said, I’m pulling that wry face we sometimes get when the praise of others is humbling, warm, but still a little embarrassing. Thank you if you’re one of them.

    After a brief excursion to wrestle a three-year-old (involuntarily), I guess I should wrap this up. I don’t know how this Analog gig will play out. Sometimes, back in the early 90s, I would often start with familiar tracks that I and the audience knew and loved. After a while, I always had an urge to try and play something different. Maybe an accapella over an ancient break-beat, or the intense Pao De Acucar from Pacific Jam. Analog is one of those gigs.

    If you fancy keeping up with how we do, follow analogcoop. If you’d like to work with us, please get in touch. If anyone has questions about co-operatives, feel free to ask, or keep an eye out for follow-up entries. One of them is sure to be about how to form an international co-op, as well a bits about the brand, the site, and things I’ve learnt so far.

    Here’s wishing all of you a happy, healthy 2010!

    Share

  4. All Change, Please

    Exit door.

    ‘One door closes, another opens’ is an idiom that has always resonated with me. It reminds me that serendipity† is the salve of change, and returns to mind when I have news like this: I’ll be leaving OmniTI at the end of August.

    †Coined by Horace Walpole in a letter of Janurary 28th, 1754, and based on The Three Princes of Serendip.

    I have a natural reluctance to go into details. Suffice to say we have very different views on how design should be done; each are valid, but I have to be true to my own. Those who know me will probably have a good idea what my opinions are, and some may have gleaned them from talks or articles. If friends wish to know more, drop me a line via the usual means.

    The dynamics of how OmniTI wanted to implement design changed in a way that made me reassess everything. After a lot of reflection, discussion, and valiant attempts on both sides to satisfy everyone, it became clear to me that my future would be elsewhere. An amicable disagreement followed, and here we are.

    It’s been a roller-coaster time at the company, keeping me very busy going back and forth across the pond. That was always supposed to be temporary. My intention was to move my family across to the States as soon as it was reasonably possible. Running a design team across time zones and an ocean was never going to be sustainable in the long-run — you lose too much of the natural osmosis that physical proximity converts into inspiration, energy, and ultimately, good work. Reading back over the post when I joined the company sharpens my disappointment that what we set out to do wasn’t possible at OmniTI, but I’m looking forward to pursuing the same goals in the future.

    I still hold the people there in high regard; they are without doubt some of the best in the business at what they do. If you need a company to optimize infrastructure, databases, or scale a site to serve millions of people, they should be your first choice. I’ve also been lucky enough to get to know Brooklyn, and Dumbo, pretty well. I still love the city, and I’m certain I’ll be back, devouring sushi from the Rastafari chefs at Gen, or a croissant from Almondine, with hot chocolate from Jaques Torres very soon.

    So, to the future. For the moment, I’m going to be taking some time to refresh. There are some interesting discussions going on in the background. I’ll have a little more time to get involved with all of the discussions around web design and typography. I will write more, perhaps give a few more talks if folks are kind enough to invite me. One thing’s for sure, my sorely neglected blog will probably be groaning under the keystrokes again shortly, and I’ll be assaulting your eye with my version of design soon after.

    Share

  5. Growing OmniTI

    Grow Collective and OmniTI logomarks, merged.

    ’Twas the week before Christmas, and all was hectic in the house.
 Or, at least, that’s how it seems! The last few weeks have been a little wild, culminating in one big event: I’m excited to announce that I’m the new Creative Director at OmniTI.

    One reason it’s such big news for me is because this is the first time I’ve been employed for many years. I’ve spent a long time in the fertile fields of freedom, or so it seems looking back. Before the turn of the new millennium, I spent most of my time skipping around the country and the world trying life on for size — finding amazing moments to punctuate the scrapes and mischief. Since then I’ve spent most of my time working with like-minded people from within Grow Collective. So, this event was a long time coming — over a year in fact — and all the better for it!

    The truth be told, I doubted if I would ever take a ‘proper job’ again. It may sound dramatic, but it was true! The ability to measure my actions by my own standards, decide what jobs I took, and report only to myself was too precious to me; I thought I’d be unemployable. It had to be something extraordinary to turn my head, and OmniTI is. In my view, it is the most important web company you’ve never heard of (especially if you’re a designer). If you’re a sysadmin, developer, or involved with the open source community, you’ll probably know that there’s hardly a single significant technology deployed on the Web today that someone at OmniTI hasn’t contributed to. If you use Apache, PHP, Perl, PostgreSQL (to name but a few), or frameworks like Cake and Solar, you’re probably reading books, using code or documentation that people at OmniTI have written, or helped create. They also have an awesome client list, featuring the likes of National Geographic, Digg, Facebook, Friendster and Ning. All that is exceptional, but not enough to pry me away from Grow Collective. The thing that tipped the balance was the culture.

    How I work is equally as important to me as what I work on, as anyone familiar with Grow will know. OmniTI started life as a family-run Internet and web operations company. It was founded by Theo, one of the world’s foremost authorities on Internet architectures, scalability and performance. Also there from the start were Theo’s equally talented brother, George, and mother Sherry. Since 1997, a lot of people I admire — like Chris — have found a home at OmniTI. They’ve grown in almost the exact opposite direction to most other companies: from operations, to data management, to web application development, and now to interface design and user experience. It means OmniTI can create and build complex web applications, but also deploy the infrastructure to support the hundreds of millions of people who might use them. They have a special approach to their work with an engineering rigor to what they create and manage. They’re a family-orientated and collaborative culture, with one of the lowest staff turnaround rates in the industry. I think it’s exceptional.

    So, when my equally exceptional friend, Chris, asked me if I’d consider joining them, I had to give it serious thought. A year or so later, and here we are. I’m stoked! Chris has also shared his generous thoughts on behalf of the company in the official article.

    A few people have asked about Grow. Up ’til now I’ve been unable to talk about it, but now I’m happy to also announce that Jon Gibbins is joining me at OmniTI! He’ll be a core component of the interface design team. Officially, he’ll be an accessibility engineer. A posh-sounding title that basically means he’ll be doing what he does best: accessibility consulting and training, interface development and quality assurance. So, that effectively means that we’ve ported ourselves to OmniTI; the core of our small interface design team at Grow has been acquired!

    Our ambition, for a long time, was to expand the co-op to take on larger, more meaty projects, and work with more amazing people. However, being so busy with client work always made managing that problematic. We had some notable successes like Alan, who’s going to continue to practice his outstanding user experience design skills from Ezyas. However, there were a couple of disappointing experiences. It became obvious that some people were not suited to working within a co-op. Especially one with such a rigorous ethical and qualitative bias. The ambitions remained, though. As the deal with OmniTI was being fleshed out, it also became obvious that we could skip the pain of growing organically, and jump straight into an organisation that already had exactly the kind of people we wanted to work with, and the kind of projects we love to work on. Not only that, but the culture had strong similarities to the one we wished to create. So, effective from now, Grow is no more. The domain and the organisation is in stasis from this point. My emotions are mixed. Looking back, I’m proud of what was accomplished over the last six or seven years, and a little sad to see Grow Collective retire. Looking forward, I’m already engaged with fantastic projects, and thrilled to be working with such great people. I have a feeling that we’ll be working with Alan again soon, as well. The best is definitely yet to come, and I’m excited to be part of OmniTI — 2009 is going to be a great year!

    Share

  6. An Ephemeral Site: Denna Jones

    Denna Jones is a designer, and we recently launched a site for her that is unlike any other that Jon Gibbins and I have done before. This is it:

    Screenshot of dennajones.com

    The evolutionary bit for us is under the hood, and to understand why, let me introduce you to Denna, herself.

    Introducing Denna Jones

    Denna’s fascinating to talk to because she is genuinely erudite. Her influences are as diverse as her roles. She’s a former Designer-in-Residence at Central St Martin’s College of Art and Design for the B.A. Architecture course. Currently, she’s Lead Artist for DLA Architecture’s Masterplanning Team, Deputy Editor of Art and Architecture Journal, and the Resident Curator responsible for delivering the arts strategy for the massive Devonport regeneration project. Most recently, Denna’s contributed to books like 1001 Buildings You Must See Before You Die and had an invitation to be the editor of a new tome in the series, 1001 Houses You Must See Before You Die.

    Luckily for us, Denna’s work with spacial narratives is often exploratory, so she was open to our newfangled experiments.

    A Web 2.0 problem

    Denna is also prolific around the Web. She documents her projects and travels using Flickr, and regularly reads, writes about, and observes Web culture as part of her work. So when she came to us to discuss a site it seemed to me she embodied a problem I’d been thinking about for a while: How can our domains be connected to our other personal accounts more naturally? Domains are our identity. However, much of what we publish is locked into other sites where we share it. It’s accessible by APIs at best, or clunky widgets at worst. Technical people can pull everything together but for non-technical people it’s not intuitive. Then there’s the issues of legacy content and copyright. Unsolved as yet, but looming. What will happen to all of our content in five, ten or twenty years time? Will we still have content strewn around the Web disconnected for the most part? Somehow we need to connect the dots. Maybe portable social networks are part of the answer, or Google’s OpenSocial. Whatever the answer, I wanted to include Denna’s existing content in her own site, and to make the future relationship between her Web activity and personal site as seamless as possible.

    Web services, say hi to dennajones.com

    The content on Denna’s site is delivered exclusively by Web services. We take advantage of the ability to share and manipulate data that those services provide to Denna, then let her choose what to publish on her site, and in what context. This is how:

    • Flickr is used to manage all images and some of the site copy direct from Denna’s account. That includes the main display images on the home page, the introduction copy on her work page, and the images and copy for projects. Work projects are managed via a specific Flickr collection, with each set being a project. This enables Denna to choose the display image and write a description that appears on the site. Visitors can also drill deeper via the project link to see other images that Denna has added to each project on Flickr.
    • Tumblr is used for Denna’s blog and her about page. The site archives her entries and allows access to tags and dates exactly like a conventional blog would. We also use tags to display different content around the site like the entries tagged with “projects” that are displayed on the work page.
    • Ma.gnolia is used for bookmarks.
    • Twitter is used for random thoughts and snapshots of her day.
    • Upcoming manages events.
    • Technorati is used for references to her posts in the wider blogosphere in place of allowing local comments which were considered but discarded.
    • Feedburner manages all feeds.
    • Google is used for site search.

    Jon Gibbins did the heavy lifting around the idea, using CakePHP and SimplePie to manage the incoming data. He also added functionality like Technorati reference counts, and the ability for Denna to refresh her site as soon as she published something elsewhere if she didn’t wish to wait for the automatic updates.

    Other small touches were also a pleasure to see unfold, like Denna’s footer image being her Flickr profile image, and the text describing her blog coming directly from her Tumblr byline.

    Denna’s Tumblr account is not linked because she wishes it to remain private.

    Tumblr posed the most significant problems. When we started development, tags were invisible on Tumblr. Entries could be tagged, but tags were not displayed anywhere for people to use. They were absent from the API. Jon Gibbins wrote a workaround and fired an email to Tumblr suggesting it might be good to give people some way of using tags. After a couple of weeks Jon came back to me and declared that although he hadn’t had a reply, the API had just changed to allow tag access. Perfect! We got an email a couple of days later from the Tumblr crew: Did we know that the API supported tags?

    Visual design, typography & layout

    I wanted the design to be a container to allow Denna’s own content to flourish. Although we discussed style, and helped Denna formulate her own house style, it was very much in her hands. Strangely, I had no reservations about this. Putting the choice of stock images in the hands of a client might seem risky to some folks; to me it was exciting, especially as Denna was so enthusiastic about having such an intimate level of control over her own site.

    Typography and layout have a touch of the Swiss modern using Helvetica Neue or Arial (depending on your platform) with a traditional scale. The layout is a hybrid—part fluid, part elastic — meaning it defaults to a 1024px viewport width, shrinks to fit 800px-wide viewports, but grows with browser font size until it fills the available viewport and then wraps.

    Information verbitecture

    The information architecture mostly uses verbs in the directory names—an idea that first surfaced with Chris Shiflett during our recent OmniTI design. It means that web addresses make up sentences wherever useful. For example, a blog entry has a URL of http://dennajones.com/writes/entry-title.

    HTML, JavaScript & microformats

    Plain old semantic HTML is used with CSS for styling. The interface was designed with accessibility firmly in mind; all JavaScript is introduced as a progressive enhancement to PHP-powered features like the slide-show for the home page.

    Microformats are used wherever appropriate: hCard for Denna’s contact details; hAtom for blog entries; hCalendar for Upcoming events.

    There is still more things we’d like to do, but in the meantime we’ve got a great head start and hopefully the beginnings of something special for an exceptionally interesting voice on the Web.

    Parting shots

    Working with Denna was inspirational. Her boundless curiosity, willingness to experiment, and professional skill made the whole process lots of fun. Her uncompromising belief in the ability of art and design to improve people’s lives makes her just the sort of person we need consulting on the future of our public spaces. It was a pleasure to give her a quasi-professional site that hopefully embodies the spirit of collaboration, personal creativity and expression we all admire. You can read more of her own thoughts on the design in her entry, Websites and the Science of Happiness. I’ll leave you with the opening line of that entry; it’s humbling to be though of in this way:

    “The designers of this website are happiness merchants.”

    Thanks Denna.

    Share

  7. A Site for Sore Eyes: OmniTI

    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 index

    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.

    OmniTI Sketch mark

    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:

    1. Make OmniTI accessible. Personalise the brand, reveal the company character, and the people within it.
    2. Communicate the scale, quality and depth of what they do to technical and non-technical people.
    3. 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:

    Screenshot: 'last month we helped some of our clients publish 880 million web pages, seen by 93 million people.'

    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 .

    Italic Baskerville ampersands in the byline

    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.

    OmniTI contact Ajax

    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.

    Share