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

Leave a Reply