Category Archives: User Experience and UI Design

As anyone who makes things for a living will attest, there comes a time perhaps once a day, when a certain question plays upon the lips of everyone on the project. If it’s a particularly trying day, this question will pop up a few times, and if it’s a doozy of a day, it will be flavoured with a peppering of FFSes and at least one WTF.

The question, my friends, is this:

Why are we doing this?

If you’re using them at all, user stories are a good place to find the answer. These little wonders are a fantastic tool for keeping product teams focused. I would go so far as to say that every team should be using these little gems, regardless of the project management and development methodologies you’re currently using.

The reason is this: user stories, when correctly written, serve as a very visual reminder that whatever you’re working on, with any luck you’re doing it to improve someone else’s life.

By phrasing our plans in the context of another person’s life, we can understand both what we’re doing, and why. And given that the user story provides a start and steer for the conversation around solving that particular problem, we can determine whether or not there is any value to doing it in the first place.

What makes a good user story?

The best user stories are the simplest, where the information you need to know is communicated as efficiently as possible, in the right order. Think of it as the pyramid model of story-telling, where you start with the most important fact and then broaden in scope as you go to give you more of the bigger picture.

The template for the standard user story is something like:

As a [persona/role]

I can [do this]

So that [I get this benefit]

Get that right and you can then figure out the acceptance criteria, i.e. the way that everyone knows the story is done. But how do you find out the bits that go between the brackets?

Hunting the meat of your story

In an ideal scenario, the customer is actively involved in creating user stories. If your project has a formal requirements gathering process, this is the point at which you would usually run a user story session.

If you’re lucky enough to have a business analyst on the team they’ll be the one compiling the stories and cross-checking them against the requirements. A good BA is worth their weight in Percy Pigs for this alone.

A more likely scenario on smaller teams is that this responsibility will be shared between product manager and UX or whoever else is well-placed to pick up the baton and run.

But what if you want to bring user stories in on a project that still uses a waterfall approach? There are a couple of tricks that work well in tandem with the requirements gathering phase of a waterfall project.

I’ve seen both of these employed to great success when working with a large financial services client (and boy, do those bankers love their requirements itemised by the armful in Excel spreadsheets!)

Trick 1: The Parrot

If the only way to involve the customer in creating the user stories is through discussion while you’re working through the requirements, then it’s worth adopting a very simple conversational pattern to make sure everyone is communicating clearly and understands what’s being agreed as being in scope of this project phase.

The trick is quite simply to phrase your questions for the customer in the form of a user story. For example, let’s take a requirement as it would usually be phrased:

“Allow customer to confirm/reject payment before sending.”

You can then rephrase this as:

“So, the customer should be able to cancel the payment, to safeguard against paying someone by accident?”

If the customer responds along the lines of: “Yes, and also it saves us the administrative cost of having to refund that payment,” you then have everything you need to write a compelling user story that has both user and business goals at the heart of the story.

It might seem like this back-and-forth exchange would get tiresome if you’re discussing a requirements doc line by line. But in practise, it actually coaches the customer to think in terms of the reasons for the requirements. Before long, the session naturally flows from a stilted reading of requirements to a more flowing discussion along the lines of “Do this because this”.

This is especially critical if your client is internal, – i.e. your development team works on the company’s product and the client is your managing director or board of directors.

Trick 2: The Path

This approach to creating user stories will work well for the UX or product team of one. Once again, the scenario is that of having to deal with a requirements discussion with a client more used to waterfall than to agile.

Our hero, a young UX with little BA support, turned what could have been a session of death by a thousand lines of requirements into a more engaging and productive session all around.

He read through the requirements ahead of the session and drew up a few user journeys that covered all the scenarios that the requirements pointed to.

In the session, instead of sitting down to discuss the requirements line by line, he put the user journeys up on the walls and kept everyone on their feet. Together they walked the length of the journeys as he pointed out the requirements covered off by each part.

A dozen or more user stories fell out of that process, with the added benefit that it also brought the project to life for the stakeholders.

Any other tips?

via Better User Stories, Come Hell or High Waterfall | MindTheProduct.

Better User Stories, Come Hell or High Waterfall

What is a User Story?

A user story is a short, simple description of a feature told from the perspective of the person who desires the new capability, usually a user or customer of the system. They typically follow a simple template:

As a <type of user>, I want <some goal> so that <some reason>.

User stories are often written on index cards or sticky notes, stored in a shoe box, and arranged on walls or tables to facilitate planning and discussion. As such, they strongly shift the focus from writing about features to discussing them. In fact, these discussions are more important than whatever text is written.

via User Stories; An Agile Requirements Approach.

Official Google Webmaster Central Blog: Using site speed in web search ranking

You may have heard that here at Google we’re obsessed with speed, in our products and on the web. As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites.

If you are a site owner, webmaster or a web author, here are some free tools that you can use to evaluate the speed of your site:

Page Speed, an open source Firefox/Firebug add-on that evaluates the performance of web pages and gives suggestions for improvement.

YSlow, a free tool from Yahoo! that suggests ways to improve website speed.

WebPagetest shows a waterfall view of your pages’ load performance plus an optimization checklist.

In Webmaster Tools, Labs > Site Performance shows the speed of your website as experienced by users around the world as in the chart below. We’ve also blogged about site performance.

Many other tools on code.google.com/speed.

While site speed is a new signal, it doesn’t carry as much weight as the relevance of a page. Currently, fewer than 1% of search queries are affected by the site speed signal in our implementation and the signal for site speed only applies for visitors searching in English on Google.com at this point. We launched this change a few weeks back after rigorous testing. If you haven’t seen much change to your site rankings, then this site speed change possibly did not impact your site.

We encourage you to start looking at your site’s speed (the tools above provide a great starting point) — not only to improve your ranking in search engines, but also to improve everyone’s experience on the Internet.

Posted by Amit Singhal, Google Fellow and Matt Cutts, Principal Engineer, Google Search Quality Team

via Official Google Webmaster Central Blog: Using site speed in web search ranking.

Women 2.0 » How To Build Prototypes Without Technical Chops

The purpose of a prototype is to cut down on the time spent building out a product so you can focus on figuring out what people want.

Having a prototype from day one gives you authentic user feedback – because you are able to immediately gauge how users react to your product.

Surveys and interviews are only so helpful since they often depend on how well you’ve phrased your questions or cut out biases.

Here is what I learned while prototyping during the idea phase of my startup Piggybackr, a fundraising website that empowers youth ages 8-15 to raise money for their schools and organizations and ditching methods like candy bars and bake sales. My goal was to confirm that this was a good solution for the educators, parents, and kids I was building it for.

Lesson Learned: A prototype can be made out of paper.

My first prototype was literally a yellow piece of construction paper with a one page sketch of my “website.” I went up and down the neighborhood showing a sheet of paper to parents at playgrounds. I got great feedback just from their physical impressions of what I wanted to create. My favorite was – “Why do I need this? It looks like Facebook.” It made me realize that to not try to reinvent the wheel.

Lesson Learned: The uglier the better.

Don’t be embarrassed about how it looks just yet. You want to get harsh feedback so you can get all the major issues out of the way early on. If you show them something really polished, it psychologically becomes harder to give “negative” feedback.

My second prototype was a piece of purple construction paper with a bunch of Post-It notes on it outlining the flow of the website. It allowed me to move things around to nail down a reasonable user experience flow.

Lesson Learned: Test one thing at a time.

Then came the time to test the functionality. At this time I started toying with the idea of learning how to build a WordPress site or even hiring a developer. I ultimately settled on an existing tool called Weebly, which has drag and drop functions, and enabled me to build a page that tested out one key functionality with users: collecting donations and payments.

Lesson Learned: Leverage existing tools.

After getting enough initial feedback, I started the process of wire-framing the entire website. Tools like Balsamiq made it easy to sketch out a series of linked pages. However, I wanted to show something more designed so that I could provide a better visual for the kids I was working with.

I ended up designing over 15 pages of my website using PowerPoint and Keynotopia, a library of predesigned images and icons commonly found on websites or mobile apps, and linked all the pages together. Shown in presentation mode, the result was a working and clickable website.

I’d talk to people on the phone and share my screen with them using a tool called Join.me and walk them through the functionality of my “website.” Apparently, it was so realistic that one teacher didn’t realize it wasn’t already live on the Internet.

Lesson Learned: Iterate again and again.

Using my PowerPoint prototype, I tested various ideas and features easily iterating on the deck with the click of a mouse. It was much easier than actually building the website and continuously changing it. However, don’t over do it with the feedback. Once you start hearing the same things over and over again, you’re probably about ready for the next step. I stopped when I felt like I had something that stuck and genuinely made people excited.

The best part about prototyping with paper, Post-Its, and PowerPoint, was that not a single line of code had to be written, yet I was able to gain pages upon pages of feedback that made deciding critical features and writing out specifications a million times easier for my minimal viable product.

Doing all the research and learning in action rather than wait for someone else to build it also enabled me to ultimately attract a technical co-founder. Prototyping also gave me invaluable lessons in understanding user interface, user experience, and prioritizing features – all critical pieces for building a successful website.

Today, Piggybackr is a website piloting with over 100 kids and many relieved parents and teachers, all eager to ditch the practice of selling candy bars and magazines. Little do they know it started with a yellow piece of paper.

via Women 2.0 » How To Build Prototypes Without Technical Chops.

%d bloggers like this: