the redesign

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.)

bits & pieces

I haven’t written in a while, and I actually have a whole list of stuff, including some unusual (to me) professional-type blogging. But first, the sort of things that have been the focus of this site since 2001. 🙂

A couple of weeks ago I reached 1000 miles on my new bike, and the first time I’ve ridden 1000 miles in a single year. (When I took the cyclometer off of the Townie in February, it had about 800 miles on it.) Cycling continues to be one of those things that always makes me happy. 10 miles a day, almost every day, on an insanely beautiful trail.

We got thrown into a bit of chaos over the last week: Elizabeth, my youngest sister, who has been living in So Cal with mom, got a job in Federal Way. That starts next Monday! So she’ll be visiting while she buys a car, finds an apartment, etc. I’m actually finding I’m excited to see & hang out with her. OTOH, we’re having to do some super-quick work to make the house liveable for three people, which is a bit (very?!) nerve-wracking. Plus, I haven’t lived with roommates in 15 years, and C hasn’t in 11 years. So we’re somewhat 🙂 unaccostumed to other people in our space. She arrives on Saturday, and hopefully we’ll be ready by then.

The weather this summer continues exceedingly strange: today it poured most of the day, whereas the end of last week got up into the mid-90s.

I’ve been maintaining my weight fairly easily; I think I finally hit my long-term goal a couple of months back, and it’s been quite stable. I went thrift-store shopping with a couple of co-workers last month and picked up a bunch of nice work clothes for hell-cheap in sizes I haven’t worn since just after college. Combined with all the biking, I feel better physically than I have in years, maybe ever. (the only caveat being my keyboard-and-mouse-wracked hands and my noisy knees. it’s weird; I can bike 5 miles easily & happily, but then my knees snap & creak crazily going up a single flight of stairs. WTF?)

A final random thought: as of this year (I don’t remember when exactly) I have been making web pages for 10 years. I’m a little bit boggled.

links for 2008-08-14

links for 2008-08-08 [delicious.com]

links for 2008-08-05 [delicious.com]

a bit of summer

The last week or so was some pretty cold & gloomy weather for July, so it was a welcome change to see things perk up over the weekend. And I managed to take pretty good advantage of it!

I’ve been on this schedule over the summer where I work an extra hour a day to get every other Friday off. It really is quite handy to have 3-day weekends in the summertime. I don’t know yet if I’m going to keep it up into the fall & winter…the dark seems to dampen my ability to get up even an extra half-hour early.

So Friday was a pleasant day with C; not getting anything done, really, but enjoying each other’s company. And checking out bikes. He picked up a bike he’d ordered a while ago, something he can ride around town, do errands with & such. It had to be specially ordered because he’s pretty darn tall. While he was getting set up, I took a test ride on a Kona Ute…OMG I totally want one. It rode so comfortably, and it has so much freaking “cargo space” we could probably get rid of our car. 🙂 Apparently the ’09 is going to come with some slightly better gear, and it’s going to take me a while to save up for it, so there we are. (Bikehugger review: I concur.)

My friend Joe in Seattle is moving to Denver at the end of August; Kat organized a little get-together with the 3 of us on Saturday. Originally it was to have been canoing from the UW rental on Lake Washington, but for some reason we thought that might not be available because of Seafair. (Bleh, Seafair.) That turned the day into a play-it-by-ear adventure, though!

Here’s the map. (7.3 miles!) We started at Kat’s downtown. Lunch was at Charlie’s on Capitol Hill, which is where the writer’s group used to meet once upon a time. (That’s how Kat & I met Joe.) Dinner was at Little Thai in the U District. In between those points: plenty of wandering, including the lovely Arboretum and the swampy islands just north of the 520. We saw an otter & something heron-like, plus lots of boat. They caught a bit of the Blue Angels out of the window at Charlie’s…I was facing the other way, so all I got was the noise. All along, lots of wonderfully random aimless conversation; I’m terribly disappointed that Joe is moving, but that’s life. Also, I need to hang out more with Kat.

I had been planning to stay over, because of the craptacular Olympia express bus schedule, but C offered to pick me up in Tacoma. Turned out to be a good thing, too, because I SLEPT in on Sunday. Again, nothing really got done except some dishes & laundry, but CBA came down to visit & the 3 of us went on a big rambly bike ride. About 11 miles, taken pretty slowly. Then Once Upon a Time in China, along with L who dropped by about a half-hour in. (I wrote about the movie a little bit over at Shelley’s.)

This week is supposed to be sunny & hot. I’m okay with that, really. It is August, after all, and I’m happy for it to be August right now. I’ll definitely be getting out on the bike!

Oh, and Kat got a new camera and is taking fan-freaking-tastic pictures. She’s only posted a few so far; I’m hoping she’ll put up the shots from Saturday sometime soon. I forgot my camera & was very annoyed about it, but Kat’s pictures should make up for that.