A little over a month has passed since we launched the new website at work, and I realized that I want to write down the whole process out here before I forget everything!
It started last fall; I organized usability testing with about a dozen credit union members. That was fun, if tiring. They came in and used the website on a laptop in a small conference room while we were videotaped. I had some specific tasks I was interested in, plus I had them show me what they do most often. (Don’t Make Me Think continues to be worth every penny I paid for it. Bought it myself at Half Price Books, years and years ago. I should probably go get the 2nd edition!)
That found the usual glaring issues, some of which I even corrected in-between testing sessions, as well as some bigger process problems, general surfing tendencies, weird usability issues, clutter, etc., etc. Over the fall I went as far as I could with the old design to make it more usable, but at some point I just had to break from the old and try something new.
Aside from usability, the site suffered from an over-reliance on the main logo colors, which are quite vivid and should really be used like chili powder: sparingly and for specific effect. (It’s something you see a lot in academia, too, especially on school sport sites. It seems like the obvious thing to do, and yet it can really overwhelm the content.) And it didn’t really use any of the design styling of our print materials.
So I had some ideas about what to emphasize, some new colors to take from our larger corporate palette, and some basic shapes. I also knew I wanted to drop from three columns to two. Which led to the usual sketching, futzing, walking around the block & muttering to myself and so on.
Eventually, I was struck with the Big Idea…
Five years ago, I went to WebVisions sort of by accident. At that event, I saw Jeff Veen give his big talk about making the web better. (I’m sure it was more specific than that, but that’s the jist that stuck with me all these years.) And one of his examples was the HayNet site (which, sadly, has been entirely redesigned — this guy has a screenshot of the old version), and the “Got hay? Need hay?” navigation. (Here’s a picture of him doing what looks like the same presentation, more or less, in 2006.) At the time, it cracked me up, and it was such a weird example that it stuck in my head.
I think I also read a blog post around the same time, probably complaining about stuffiness in credit union website designs, or at least lack of creativity.
Together, it turned into a navigation concept: 80% of our site content falls into “Have money?” or “Need money?” so that became the guiding idea for the homepage. (Figuring out how to link to that other 20% was the big challenge, which I’m still kinda working on.) I swear the general design just flowed naturally out of that idea + color palette + common shapes.
But of course there was plenty more refining to do. Many of my internet friends were helpful in this phase, but I should give the special shout-out to Dylan, who looked at several iterations, pointed me at grid design resources, and, well, gave me the finishing touch for the homepage.
The whole grid “fad” took off as I was working on this, and that stuff ended up being really helpful in placing the different elements of the pages so that they didn’t feel entirely random. The final result isn’t quite a grid, because the math with mixing pixels and percents and ems was just too much for me, but it’s darn close.
And unusually for me, I did all the original design work in Photoshop. The design I had in my head would’ve been too challenging to mockup in HTML/CSS right off, especially since I needed to have samples to show my boss and an internal committee.
I had an opportunity with this redesign to look at online banking, too: not the internals, but the frame and the navigation. I was brutal in paring down the navigation to the honest-to-god basics. (So brutal, in fact, that I had to do some adding & tweaking post-launch. I’m still glad I started simple.) I thought really hard about the verbiage, and making it as clear as possible.
So once the first draft was done, I went out to a branch and hung out for a morning grabbing random members & asking them to look at the printouts. (I gave them Starbucks gift cards.) The feedback was really helpful, as always, and prompted some modifications, but also confirmed that I was heading in the right direction overall. The branch staff looked at them too, and were really excited. That’s especially nice because IME internal folks can sometimes be the hardest on a website redesign. The lingo doesn’t bother them; they know where to find stuff, etc.
Then it was time to start turning the pretty pictures into actual HTML & CSS, which was much less difficult than I’d anticipated. Of course that homepage split slant thing is kinda complicated, and yes, there are a few IE-specific hacks. (max-width, a bit of hasLayout, some width issues that I think are box-model wackiness) But in general it’s really, really simple. Two columns with the left column absolutely positioned, a header and a footer. I used Eric Meyer’s Reset to clear out most of the default styling. A basic print stylesheet; a basic mobile stylesheet (which I think still needs a little work).
I made a few sample pages, and put them out there: first for employees, then for members. For members, I created a comment form, too, so I could get the feedback. It was even more helpful than the morning hanging out in the branch. Yes, the usual mix of “OMG how cool!” and “OMG how horrible!” but also some specifics for tweaking.
Among other things, the general impression that the home page was a little…bland. So I tried a bunch of ideas that never got anywhere, some of which were, honestly, fabulously ugly. This is where Dylan gave me the idea of a subtle touch that added just the right amount of visual complexity. Yay for public domain photos!
At the same time, I was working on setting up my site templates, specialized styles, and Online Banking. That last was a fascinating challenge, about which I will say no more, other than that I’ve learned to do crazy, crazy things with JavaScript, and jQuery rawks.
Then launch day. I came in extra-early, did my switchover while the Online Banking person was doing her switchover, and there it was.
Of course, that’s never the end of things. There were long-standing typos discovered, extra-weird browser glitches (WebTV? SRSLY?), and quite a few tweaks and corrections for Online Banking.
But after a week or so, it was mostly settled out. And I’m happy. I feel good when I look at it, more than anything I’ve ever designed before. Other people seem to like it, too. “Clean” and “professional” seem to be the adjectives of choice, and those are adjectives I can be proud of.
I was also pleasantly surprised that the Need money/Got money navigation was generally very well-received. Only one person was really unhappy about it, and quite a few others mentioned it specifically as a positive. I felt like I was going out on a bit of a limb, but it turned out to be worth it.
I know I’m not done, not really. A website design is never actually done. I keep looking at it, I keep listening to member and employee comments, and it will change over time. That’s just how it is.
(PS to self: I’d like to add a side-by-side screenshot here.)