I’ve been working on this project at Sputnik for that past couple of months. It’s a microsite for Google Apps.

I worked on the creative concept, the content strategy and some of the copywriting. I’m currently working on the UX for the second release.

I’m really proud of it. I’d love to hear what you think!

Try it out on a mobile or a tablet.

What Are You Working For?

UX, at least in my experience, is multidisciplinary practice that entails an indepth, embedded knowledge of one’s culture. It’s a practice that sits at the nexus of creative design, content, and technology. It’s in the middle of hard data, soft data, aesthetics, intuition, communication, and account management. Not many people can hold every single aspect of a web project in their heads, so inevitably we develop heuristics and shortcuts to make things more efficient. We rely on our experience, our implicit knowledge and our intuition to work together.

Research is important. Data driven design is important. UX practice can and does involve very close-focus decisions that are informed by testing and analytics. Testing is everything from guerrilla testing to A/B and multivariate testing. Analytics is everything from bounce rates and page consumption through to user flows, goal funnels, hover patterns and user tracking. This is all important.

However.

Chances are, unless you’re working in a consultancy with an extensive testing contract, or working in a UX team with a testing lab, or working on a high-traffic web site with functionality for rapidly-deployed multivariate testing, you’re not going to be able to do all of this. On some projects, you’re not going to be able to do any of this.

If you work in a design agency, or a creative agency, you’re probably working on multiple client websites. You’ll rarely have access to the history of the project, particularly anything that was done by the agency before you. You’ll probably only be brought on to specify the current project, which may be anything from a whole site refresh / rebuild, to the design of a single page. You won’t know what the previous agency tried to do, and why it didn’t work. Chances are the previous agency was in the same situation you’re in. They were probably using a best practice approach with limited information, and the project may have failed in spite of that. Maybe there was a downturn in the market. Maybe someone stuffed the site with keywords and Google nuked its pagerank for 6 months. Maybe the client had $10k and wanted to compete with CNN. Maybe the client got cold feet halfway through the project.

You will probably never know any of this. But you have been tasked with making a website that keeps the client happy, appeals to their users, is usable and accessible, on-brand, on-message, within budget, on-time, and beautiful, even in IE6. And by the way, the client’s bought into a ten year contract with a kludgy CMS that never, ever generates decent code, your dev team are overloaded and have priority bookings on other clients, you’ve only got 16 hours of billable time for UX/content strategy/analytics framework and your designer is about to go on holiday. What do you do?

This is a little checklist that I try and work from. I don’t always manage to use it, but it’s pretty good place to start. It’s useful for getting on top of a project from the very start.

Step 1: Get a brief.

Do you have a brief? If not, get one. Get a sit-down briefing from the account manager.

Still no luck? Write your own brief. Should take about 15 minutes.

Basic brief structure:
- what is the project?
- what do they want to achieve?
- budget
- timeframe
- constraints
- requirements

Ok, now you’ve got a brief. Give it to the account manager. Account managers are always busy, and they can be a bit hard to deal with if they’re in the middle of something. However, account managers are your friend. This doesn’t get said enough, so let me say it again: account managers are your friend. They deal with all the numbers, the clients, the organisation stuff so you can do your job. You know how much you hate doing your tax? That’s the kind of stuff they do every day so you can be creative. So cut them some slack.

So, with that in mind, ask your account manager to have a quick look at the brief you’ve written up. They’ll very quickly let you know if you’ve missed anything, or you’ve gotten anything wrong. Take notes, fix your brief.

Ok, great! We now have a brief.

Step 2: Coffee shop

Now, take your brief, a stack of paper and some sharpies, and go to the coffee shop.

Purchase a caffeinated beverage of your choice. I like a soy latte. Doppios are good too.

Don’t begin your beverage just yet. Let it sit on your table, gently tickling your nose. Mmmmm.

Ok, so, now read your brief. Read it again. Highlight the things that jump out at you. Highlight the things that you _know_ are going to be a pain in the ass. Highlight the things that you’ve worked on before. Circle the things that need research. Note down any references to previous projects that were similar. If you work in an agency, you’ve worked on at least 3 specifications for every 1 project that actually got built. Some of that stuff is reusable.

Ok. We’re trying to see this project from every angle. That’s why you’re not allowed to drink your coffee yet. I want you to mess with your brain chemistry just a little bit. The perspective of a hungry, impatient, un-caffeinated person is different from that of a well-fed, juiced-up coffee fiend.

Ok, now you can have your coffee.

Step 3: Drink your coffee!

Mmmmm. Good, yeah?

Step 4: Sharpies.

Once you’ve got some coffee inside you, pick up a Sharpie and start taking notes.

Firstly: what is the client trying to do? Not ‘what have they asked for’. What are they trying to do? The answer is rarely ‘build a website’. A website is a means to an end. The end is usually ‘make more money’.

List out all the other things the client could do to achieve the same goal.

For example:

You have a client with a small business selling bath soaps. They want you to build them a brand new website. They have an existing site that has never generated much business, and they feel a new site will bring in more traffic. They have a budget of $5k, and one of the owners can edit a bit of HTML and is familiar with Facebook and Twitter.

What else can we do in this situation?

Well, we could:

- Tidy the existing site
- Run a social media campaign
- Do some SEO and SEM to drive traffic to the existing site
- Create a content strategy

There’s a few things we can do in this situation. Take note of the other possibilities, and take a few notes on what the project might entail. Take note of how much it might cost. Particularly take note of possibilities that are likely to be more effective for the client. Clients are usually willing to be sold on a more effective solution. In this situation, my initial thoughts would be to:

- Tidy up the existing site template
- Work up an SEO / SEM strategy to bring in more site traffic
- Work up a content strategy to ensure the site is being regularly updated, in line with the SEO strategy
- Sketch out some ideas for a social media strategy that the staff can work on together, to launch in a couple of months
- Propose a stage two project with a more in-depth site redesign, contingent on the success of the initial project.

In this situation, we want the client to have some ‘quick wins’. There’s a lot they can do, and a full site redesign is just going to chew up money and time. Some smart campaign work with social and SEO, and a site ‘tidy-up’ is going get them some results now, rather than six months time.

Also, once they start making more money, they can see a) your skills and b) the value of investing in their web properties.

This, hopefully, means you’ll have a larger budget for the stage 2 project.

Step 5: Diagram.

Ok, so, you’re still at the coffee shop, and you’ve thought through all the different options. Take 5 minutes and sketch up a diagram of the different options with some notes about complexity, benefit and cost. You’re going to take this back to the account manager and show it to them, so make it easy to read. They’re busy, remember?

Now pay for coffee, pack up your stuff, and go for a walk around the block.

Step 6: Walkies.

Pull out your mobile and call your favourite developer. (Well, I do this because my developers are in Melbourne. You might be able to just chat to them in the office.) Have a quick chat to them about what you’re proposing, and get a sense of the relative complexity of it. Developers are also usually busy, and they don’t appreciate distractions any more than account managers do. If anything, they’re probably more irritated, because they had the entire structure of their current project in their head when you called. So be nice.

Make sure they know that you want to get their input because a) they know more about actually building the damn thing than you do and b) you don’t want to give them a poorly specified job. Also, you want their input because it’s much more efficient for you and them if you have the chat up front, rather than in a week after the client’s already signed off on the specification.

Ok, now you’ve gone through the initial process. You should have a sense of the project scale, the alternate options, things to look out for, and what other projects you’ve worked on that you can reuse / appropriate. You’ve gone for a bit of a walk to clear your head, see if anything else comes to mind.

Step 7: Accounts

Now, go back to the office, and have a chat with your account manager. Wow them with your attention to detail, your commitment to creating the best solution for the client and the users, your thoughts around how they can position the work into an ongoing project, and your thoughts around potential budget-busters. They’ll appreciate your work, and they’ll take it back to the client and convince them of its value.

Having gone through this process, you’ve given yourself a good start on the project, brought the account manager and client into line with your thinking, and you’ve given the developer a heads-up on what’s going to land on his desk next week.

Step 8: Get to work.

You know this bit. Hop to it.

Trying out some new designs for this blog, trying out the iPad version of Omnigraffle. Want to make this site into a portfolio site, with a blog and some portfolio pages for my academic work, UX work and video art.

Some paper wireframes:

And some iPad wireframing:

Pretty happy with this workflow.

In response to a thread about emerging UX themes, some wild speculation and a bit of a wish list about UX in 2012:

Invoked computing and web tools / cloud services

Decoupling from specific physical devices, powerful-enough mobiles and tablets, plugging into persistent subscription cloud services. Focus on faster streaming and efficient in-browser behaviour rather than constant machine upgrades and physical storage. Think iTunes Match and Google Docs, coupled with increased bandwidth and mobile internet. Security will be an issue to be addressed.

Functionality in context

There will be less software with massive menus listing every function, more intuitive surfacing of functionality in context. Inevitably, power-users will complain when their workflows are disrupted, but this will be offset by large numbers of new users.

Tablet design patterns

Tablet designs will start to mature, supporting dominant hand-switching, orientation changes. Apps will remain popular for the limited screen real estate on smartphones, but web apps will be more popular on tablet. This will also lead to convergence between tablet design and desktop design. More people will be designing for mobile first, and will be looking for efficiencies. Luckily, this will lead to the death of on-hover menus.

Convergence in mobile devices

This is a big call, but there should be a shakeout in the massively fragmented mobile OS market. I’m hoping for a dominant flavour of Android to emerge, as well as the Kindle Fire OS reaching maturity. IOS will remain strong, and Windows Phone 8 may turn out to be a strong competitor. Supporting every permutation of Android will turn out to be as frustrating as supporting IE6. Analysts will focus on the phone usage and data consumption as a measure of mobile OS value, not merely product activations. Low-end Android ‘feature-phones’ are a separate category to smartphones, and they will be treated as such.

and lastly:

Flash will continue to lose relevance

Flash will continue its current trajectory towards being a tool to create multiplatform games and animations, and not a common file format. No-one’s cracked Flash on the mobile yet, and people will realise that it’s a problem with Flash that can’t be fixed by throwing more processing power at it. Flash is an artefact of a mode of desktop computing that was rooted in an endless upgrade cycle. Low-power tablet computing will lead to a move away from crufty, crash-prone formats like Flash. HTML5 isn’t there yet, but gaming will be handled by smartphone apps, and video will be h264 and its alternatives.

Postscript: gamification

Gamification will lose favour once people realise adding badges to a boring experience doesn’t make it compelling, and adding badges to a compelling experience is redundant.

There’s some good stuff in gamification – it’s the stuff that’s been ripped wholesale from interaction design. The rest is misapplied pop psychology and bad pedagogy. UXers and game designers will reclaim interaction design, and gamification advocates will move onto the next consultancy trend.

Sketching up a responsive site before going into wireframing and mood boards tomorrow.

Using my new UIStencils for sketching, UX Movement’s Interface Library 3.5 and the Less Framework stencils for wireframing.