Project Planning

Creating “Letters”

I’ve been thinking about starting up another podcast (I had four of them in back in College) and after setting a personal deadline of the end of January, I finally got it together!

You can learn more about the podcast from visiting the site or listening to the introductory episode, but basically it will have a different topic in each episode and feature opinions, perspectives, and thoughts from other people.

Since all the podcast stuff has its own home online, I’d like to briefly share my process for getting everything set up here:


1. Site & Hosting

This was the easiest step for me, because I already have hosting (thanks Dreamhost!) and a domain name set up. I might buy a unique domain name for the podcast, but that’s a bit premature right now. For the time being I set up a sub-domain (anything prefixing the main domain) as letters.robrogan.com.

If you don’t have any of the above, you’ll want to shop around for some affordable hosting and a domain name. Both of these should be super easy to find with Google and I don’t feel like writing a tutorial. ;)

2. Setting up the CMS

A CMS is yet another tech acronym for Content Management System. You’ll have lots of content—blogs, podcasts, etc.—and you’ll want to manage it. WordPress is by far the easiest to set up in my opinion so I’m using that.

With WordPress, you can quickly get it set up to distribute your podcast with a single plugin. There are a few to choose from but so far I recommend: Seriously Simple Podcast. What a godsend. Literally all I had to do was fill in the title of my show, author, description, and a few other pieces of info and it was good-to-go.

There are a few other details that I put into my WordPress, but you should set it up however you like. I’m trying to find a balance between practical, low-maintenance customization with just a dash of unique design. Using the plugin Easy Google Fonts I changed the typeface to a much softer sans-serif called Nunito. Note: I would not recommend using more than one or two web fonts as each font file increases the loading time for your site.

3. Making the Podcast

Well this point could be all sorts of things, but let’s just say that at some point you’ll have to sit down and record some audio, then edit the track, save it as a reasonably sized *.mp3 and upload it to your blog’s “Media” (if using WordPress).

In my case, I have a USB microphone (even a cheap one is a lot better than the built-in source) and I recorded with Adobe Audition. If you don’t have Adobe then Audacity is 100% free and gets the job done. Podcast editing a pretty big topic that is covered elsewhere better than I could here, so I’m not going to go into detail.

4. Album Art, Finishing Touches

People can agonize for hours—nay, days—trying to create the perfect artwork for their show. Right from the start I told myself that it will never be perfect, and it’s not going to ooze symbolism either. Erring on the side of simplicity, I just typed up the podcast name in a few fonts and colors and went from there.

I ended up using a strong serif font for the base, and then I masked-out most of an ornamented font, retaining just a few interesting characteristics, and overlayed that in a bright color. I think it has an interesting effect, so that’s good enough for me! Lastly, I needed something else to give it a bit of weight and not feel like a word just floating in the middle of a square. In addition to adding the two lines (reminiscent of lined paper), I added a thick border so that the light background didn’t get lost in the mix of a white web design or podcast app.

Letters podcast artwork

5. Now It Really Begins

So, setting up all of this was a bit of a chore, but in reality it’s just the beginning. I think the interesting challenge remains in creating each episode, especially if I require the participation of other people. I hope it turns into something great, but if not, it’s been a fun design and build process.


Standard
Project Planning, Reblog, Work

“Don’t say you don’t have enough time. You have exactly the same number of hours per day that were given to Helen Keller, Pasteur, Michelangelo, Mother Teresa, Leonardo da Vinci, Thomas Jefferson, and Albert Einstein.”
Life’s Little Instruction Book, compiled by H. Jackson Brown, Jr.


Making Time for Side Projects

By Rachel Andrews on An A List Apart
Rachel Andrews shares some tactics for finding time to dedicate to additional projects, and the motivation to actually work on them.

Make time

Quote
Work

Mount Gay Rum Rebrand

illustration-ageGate
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.

Age Gate


Before:

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. Screen shot 2013-02-21 at 11.25.35 AM


After:

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. Mount Gay Rum Age Gate

Home / Initial View


Before:

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! Screen shot 2013-02-21 at 11.26.19 AM


After:

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. Mount Gay Rum Home

Site Navigation


Before:

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. Screen shot 2013-02-21 at 11.26.40 AM


After:

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:

Long Scrolls

Problem
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.
Solution
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.

Parallax

Problem
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.
Solution
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.

Mount Gay Rum Navigation

Footer


Before:

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. Screen shot 2013-02-21 at 11.26.56 AM

After:

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.
Mount Gay Rum Footer

Legal, and other links you never click


Before:

Oh boy. Café menu? Scrolling page within a modal? What else can we cover the site content with?
Mount Gay Rum Old Legal

After:

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.
Mount Gay Rum New Legal

“Story sections”


Before:

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. This was not conducive to skimming, which is the default behavior for almost everyone jumping from page to page on the Internet. Screen shot 2013-02-21 at 11.28.15 AM

After:

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. Mount Gay Rum story sections

Visit Us / Distillery Tour Info


Before:

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.
Screen shot 2013-02-21 at 11.27.20 AM

After:

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. Visit Mount Gay Rum

Interactions

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 cocktails or Contact Us.
Mmm… the traditional Manhattan
Cocktails

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.

Standard
Project Planning, Wireframes

I just might have to get this!

Thanks to one of my favorite blogs on art and design, Abduzeedo, I came across uxpin.com, which has a solid product offering. At the least, this blend of sticky notes and wireframing is pretty awesome! I suppose I could get some full-page label paper and print my own, but these are snazzy, come with a booklet to plan out your problem, solution, audience, etc., and (although they’re not clear) it looks like those little black bits on the stickies will scan in with their iPhone app and give you a digital version right away!

Standard