Make things as simple as possible, but no simpler.
It’s not the old Web, it’s the future Web. It’s changed. It got a summer job, went off to college, got sophisticated.
Looking at this new web and seeing beyond the specificity of the mobile web, or at least seeing it as an extension of the web, allows us to shore up some of the more fragile foundations we’ve laid and find ways to build the web that make a bit more sense.
A List Apart, “Do As Little As Possible”
I found these scanned maps thanks to a tweet from Information Architects Inc. and immediately thought there should be a GIF of these. So here you go!
— iA Inc. (@iA) September 2, 2013
One of my first projects as an Information Architect was to re-architect a new version of the site for Mount Gay Rum. My company is working on a complete rebrand on many levels: label design, posters, printed mailers, film spot, and web. Nearing their 310th anniversary is a historical accomplishment, but unlike tested and traditional fermentation methods, web sites do not age well (especially their last one).
As the only Information Architect in the digital department, my role felt particularly heavy at the beginning of the project. After lots of research and iteration, I am happy to look at the finished product with confidence. Yes, the developers I work with are issuing a new version as I write, and there’s always room for improvement, but I think we’ve taken a big enough first step from where the brand had been these last few years. When the original version of a site is an antiquated Flash experience, it’s hard to do any worse with a new design, but I challenged myself to take this old site as warning that any new design will have to stand the test of time (as much as possible). I had that great privilege to work with a very skilled team and ridiculously talented visual designer, but I can only speak to the functional and organizational aspects of the site, for which I was responsible.
A legal requirement of alcohol web sites is some proof that the visitor is of legal drinking age. In the old version, you had to click on each box to fill out the form, and find your country from a long drop-down list.
Yes, there is still a drop-down list for country selection, but this new version detects your computer’s general location and fills out that part of the form for you. Once you start filling out your date of birth, there’s still no clicking required because your cursor automatically moves from one field to the next – saving your hand the arduous few inches of travel between mouse and keyboard.
Home / Initial View
Once you verify you are over 21, the old flash site presents you with a closed book. You can’t even see any content until you click and drag the book open. Talk about keeping your content at arm’s length!
Once past the age gate, visitors are immediately presented with clear navigation and the latest marketing message (in this case, a new line of Rum called Black Barrel). You can immediately go to the product’s detail page, or scroll to explore other sections of the site.
Not only does the navigation cover the page content, but once you select a page from the menu, it is hidden away like a bookmark behind the book. A perfect example of skeuomorphism at its worst.
While auditing the original site content, it became clear that this brand has a story to tell – not in the cliché marketing regard of conveying brand info through storytelling, but Mount Gay Rum very literally has an impressive history to convey, as the true pioneers of rum.
Although a current (2012) trend in web design is the single page website, I do believe it’s most effective for telling a story because the visitor can experience it from start to finish without going anywhere. This approach has a few negatives that I did my best to design around:
- A very long scroll might not be a huge bother, but it does factor in your split second cost-benefit analysis when deciding if you want to spend precious time on the page.
My best effort for dealing with lots of content on a single page is to divide a single story into pieces and then neatly fold these away into their appropriate drawers, or chapter heads.
Especially after my comment on the old home page, you might think I’m creating an obstacle between visitor and content, but I believe the contrary: I am facilitating engagement, because you would be gently introduced into each topic instead of overwhelmed, and – curiosity permitting – you can pick and choose what parts of the story interest you most.
- Even more pervasive in the single-page trend is the use of parallax, which can be done well and add an impressive depth to the site’s design, but in most cases it isn’t necessary, and in the worst cases it can be confusing.
- It was decided early on in this project that we wouldn’t implement parallax, but we do rely heavily on large photography and commissioned illustrations to pull your attention down the page. What parallax sites often do well is the use of persistent headers that double as a way-finding tool. In the new design, you can see that the header follows your scroll and highlights the current section you’re viewing. It was my intent that this convey the idea that all content stands on equal footing, freeing your conscience to explore as much as you like without risk of getting buried in layers of hierarchy.
I don’t have a lot to say about the old footer. It works, and was very much in the background, as we expect from most site footers. It could have done more, though.
As an obviously product-centric site, it is important to make product information as accessible as possible. At the risk of overdoing site navigation (if possible), the secondary navigation is visually presented at the bottom of the site (with some fun rollover states), and the primary navigation links are reiterated in the footer as well.
Legal, and other links you never click
Oh boy. Café menu? Scrolling page within a modal? What else can we cover the site content with?
As they say, “you can’t polish a turd.” The best one can do with legal content, in my opinion, is to do away with anything too fancy (see above), and keep it out of the way of content as much as possible. Usually these links open a modal or new window that separates you from the page. A cheeky approach in this new design is to bury it below the footer. Yes, if you accidentally click one of these “fine print” links, the site extends below the foot and you are scrolled down a bit to let you know that what you seek is in the abyss. There is a nice big “X” button to collapse this content when you’re finished with it.
The old site was literally a book. You had to flip through every page to get through the website, or jump around with their Table of Contents navigation bookmark thing. , which is the default behavior for almost everyone jumping from page to page on the Internet.
As I started to explain in Navigation, the new content is structured in chapters akin to the skeuomorphic book approach, but instead of requiring a linear path to each piece of content, the story is boiled down to four main “chapters” (plus a visit section). These chapters slide open when you want to read one, and don’t go anywhere while you’re reading. At the bottom of one chapter, is the introduction to the next, which will expand open on click.
Visit Us / Distillery Tour Info
There isn’t much to say about the content, except that once again, it was well-hidden. At the Visit part of the old “book” site, you have to click to pull up a skeuomorph-brochure with several pages within.
Although you might not think many people would go to this site and book a trip to the distillery, analytics did show a majority of visitors being referred here from travel sites – many people touring Barbados were Googling things to see! So, in an effort to get straight to the point, and keep everything accessible, I recommended very minimal content, no collapsing function, and a printable PDF download for those who want more info and something to-go.
I congratulate anyone that has read this far, and will spare you dozens of screen shots for different clicking states and animations. If you’re curious about some of the really divergent features (compared to the old site), check out the or .
Mmm… the traditional Manhattan
If you just scrolled past all the pictures and arrived here at the bottom of the page, please take a second to read this summary and acknowledgement:
The visuals that you see while experiencing the site, the words that you read, and the fact that it loads on your computer is all the work of someone other than me. How it is organized, the fact that it works on your phone and desktop, and the bits of interactivity are more representative of my role. My concepts could not have been refined, visualized, or put into working code had it not been for the efforts of an entire team. I feel privileged to work where I do, and appreciate the constructive reviews along the way that have guided my crazy wishes and expectations into something practical.
Although I found myself doing this to some degree with one of my projects, it is well worth the read to map some key terms and concepts to a method I only just started exploring. Check out the article (above), and I also recommend diving into the slideshare (below) for the original presentation by Mr. Halland.
In this talk at a day-long UX workshop at General Assembly, Abby gave a completely accessible rundown of Information Architecture and although I took a couple of notes, she conveniently shared her slides for all.
Check out her site for more IA goodness abbytheia.