Influx

The Making of influx.us

The goal? Explain what we do and get people interested in our services.

Audience: What are our users like?

Doing some persona work told us that an interesting challenge we’d have was to teach people a bit about UX while promoting our services.

Requirements: How can we meet their needs?

We did some brainstorming over email and IM. We made lists and crossed things off and ranked things. In the end we had a clear picture of what type of stuff needed to be on the site. Having done the work above, this process didn’t take too long and we felt confident of the results.

Wireframing: Constructing a skeleton

The wireframing process for building this site was lo-fi. I sketched a bit, threw some stuff out, sketched a little more and was happy with what I had. Amanda needed to see it and I hate scanning things, so I just took a photo of my notepad and emailed her.

wireframe detail

Content: Meat on the bones

This was the hardest part. Not only because we wanted to get started on the visual design, but also because we have (at least) three rules for content. It should be meaningful, friendly, and as short as possible. Finding the right balance of the three is important and we’ve spent time thinking about almost every word on the site. We kept the process fresh through a process of writing drafts and revising. Repeatedly.

The result is content that’s easy to grab and go. We’ll be continually optimizing the content after looking at analytics for the site and talking to people that have used it. If we get any questions often it will tell us we should consider adding that info to the site.

Visual Design: The skin

Amanda and I like stark minimal designs but this site isn’t just for us. We started thinking about color right away. There were no right or wrong ideas, only potential solutions. Here are a few experiments.

mockup1
mockup2
mockup3

We modified a WordPress theme called Berita. There are some nice parts to the theme’s mechanics but there are also some things I don’t like at all. I can’t fully recommend it.

Feedback: Initial interactions

Like all websites, this one needed to be reviewed and tested by people other than its creators. A big thank you to everyone that reviewed the site and provided feedback as we approached launch. They found typos, gave us suggestions about strengthening the tone on our services page and critiqued the visual design. A few people told us the site was pretty corporate looking, so we upped the amount of orange in an attempt to off set all of the (lovely!) grey.

Essential Tools for this Project (& Others)

Paper & Pencil
iChat
Google Docs
Firebug
Coda
WordPress
Photoshop & Illustrator & Acorn

Read More
Making Content Shine

Content is not a nice-to-have extra. Content is a star of the user experience show. Let’s make content shine.

Here’s a quick before and after from the recently redesigned District of Columbia Public Library website. Even without clicking the images to see them full size it is clear that the second one is easier to read.

Before

This page coldly presents library policy.

Get a Library Card | District of Columbia Public Library-1-1-1

After

This revised page is conversational and answers real questions.

Get a Library Card | District of Columbia Public Library-2-1

There’s no point putting information on the web, even if you think it is interesting or useful, if it isn’t easy to find, read & process.

By the way, I’m fully aware that the most convenient thing on this Get A Card page would be an actual form with which to apply for a card online. It is on the way. Hurrah for iterative changes and continual improvement.

Opening quote by Colleen Jones via inspire ux.

Read More
More Cowbell, Right Here

We all know how important it is to highlight new content, services, and resources on our library websites, but it’s equally important to do it in ways that engage and delight our users. Like Worthington does right here:

cowbell

When you click through that “find out more” link, you get not only a link to the catalogue record for a Best of SNL DVD, you also get recommendations for other classic shows the library has in their collection. Delightful!

[via #shifted]

Read More
Handmade Sign at the Grocery Store

IMG_1356

With its old-timey feel it really stuck out among the (sterile looking in comparison) printed signs.

Let me caution, however, that this is nearly varsity level signage strategy. The imperfections of this sign are an asset only because it is surrounded by decent looking professionally designed signs. Much like library websites need to be easy to use before they can be filled with social goodness, signs in a library would have to be cohesively well designed before they could benefit from something like this.

Read More
The Power of Simplicity

Helvet

First there was Helvetireader a clean, stripped-down skin for Google Reader inspired by Helvetica. Now there are similarly inspired interfaces for Gmail, Google Calendar, and Twitter. How much would I love to see Helvetilibrary?

Read More
Give Compliments on JetBlue’s Site

give compliments on jetblue.com

This is a nice way to facilitate some positive interaction.

Check out the URL too. It is semantic and, especially for an airline, pretty short.

http://jetblue.com/help/contactus/help_contact_compliments.aspx

Read More
Last Week on Twitter
  • great, engaging video from the library at the college of dupage: http://ow.ly/tZy1 #
  • Sir Tim B-L regrets "//" http://is.gd/4idQ6 That is a whole bunch of extra, collective keystrokes. #
  • want a better website? watch people use it in their natural environment http://is.gd/4ie3W #
  • hurrah for matching websites and twitter profiles! #
Read More
UX Shakedown Giveaway

Does your library’s website need a good going over?

Our UX Shakedown provides libraries with an easy to read, illustrated report detailing what’s good on the site and what could be improved.

To celebrate the inception of INFLUX we’re holding a contest and giving the winner a UX Shakedown.

The Contest

Convince us why we should give your site a Shakedown. How you do that is up to you. Make us laugh, make us outraged, inspire us, motivate us. You might want to keep in mind that we’re big fans of things like flickr, watching videos online, and screencasts.

How to Submit

Use our contact form or mail [email protected]

Important Dates

Deadline for submissions: 31 December 2009, 11:59
Announcement of winners: 11 January 2010.

Fine Print

Nothing outrageous, just a couple things worth mentioning:

  • The lucky winner is not obligated to do anything with the recommendations we come up with as a result of our Shakedown (but you know you’ll want to!).
  • We’d like to post selective results of the contest right here on the site. By entering the contest, you’re agreeing to let us do that. And for that, we thank you!

Any questions? Leave comment, use our contact form or email info[at]influx.us

Read More
UX Link Roundup #02

How to Understand Your Users with Personas is the best comic I’ve read today.

Active Furniture is inconvenient on purpose. Reminds me of one of the times I heard someone say that they didn’t want their library’s furniture to be “too comfortable.”

10/GUI is an attempt to move away from the mouse, into realistic multi-touch computing. Don’t forget, somebody (Douglas Engelbart) had to invent the mouse too.

10/GUI from C. Miller on Vimeo.

Read More
Nice Sign Copy at Trader Joe’s

I’ll admit I’m a little bit of a sucker for Trader Joe’s (despite the constantly crammed parking lots).

Sure, there’s good food to buy but that’s not the only reason I’m a fan. While not really liking the sort of half baked tiki/naval/Pacific Islands aesthetic of the store, I like being there. I know that as soon as I pass the produce section I’ll find some coffee to sample and sip while I shop.

Also, I look forward to seeing what employees have drawn and written on the signs. Here is my favorite from earlier today.

nice sign from trader joes

I’d like to know how many people take the time to read these little quips.

What’s a good indicator that an organization is effectively capturing the hearts of their customers? Without solicitation, a customer makes a commercial for you.

Read More
1 2