Designing Ryanair’s Boarding Pass

In the following article we’ll outline the beginnings of the project, some of the challenges we encountered and ultimately what we learned from the process of redesigning Ryanair’s boarding pass. Difference between this redesign and many of the Dribble shots that can be found online is that this one was actually tested early on, and …

Designing More Efficient Forms: Structure, Inputs, Labels and Actions

I see it happening a lot: forms without any structure, with wrong types of inputs, with no proper labels, with … – And that’s a bad thing. All the required HTML elements (<fieldset>, <input> types, <label>, etc.) are there, so why not use them? This article has a nice writeup on how to properly create …

Design for Realtime – User experience principles for realtime and reactive systems

Great set of example videos (both right and wrong) on how to properly build interfaces that are updated reactively – without a page refresh (viz. “the realtime feed”). Imagine the difficulty in communicating the rationality of the system to the end user. In the realtime world our challenges are not only to build delightful features, …

Fail them faster

GDS – Government Digital Services – recently reworked a few application forms they have. Instead of letting the user complete everything, and then – at the end – give a notice that they’re not eligible for some reason they’ve put a simple yet clear disclaimer at the very start of the completion process. We knew …

The anatomy of a credit card form

At Wave, our Invoice product enables business owners to create and send invoices to their customers, and to have those invoices paid via credit card. My job was to design the credit card form, given a set of business requirements and constraints. This post is about the design considerations our team explored to arrive at …

From “User Stories” to “Jobs Stories”

Jobs stories slightly revise the format to be less prescriptive of a user action, and thereby give more meaningful information for the designer and developer to build for the user’s expected outcome. […] There is a very slight but meaningful difference between the two. By removing “As a __ ” from the user story, we …

Everybody Scrolls.

We wanted to know how page design impacts user behaviors and to what extent visual cues help users scroll below the fold. To find out, we conducted user testing with 48 participants over 3 days. Everybody Scrolls. → Sidenote: Reminds me of this good old “Life below 600px” Related: Luke Wroblewski also tweeted a few …

7 Principles of Rich Web Applications

My approach is to examine the usage of JavaScript exclusively from the lens of user experience (UX). In particular, I put a strong focus on the idea of minimizing the time it takes the user to get the data they are interested in. Starting with networking fundamentals all the way to predicting the future. Server …

The container model and blended content

One of the key differences between our new beta site and the current Guardian site is the way we approach content curation and presentation. From the outset we knew we wanted to create a modular system. However we were wrestling with how we could maintain a consistent hierarchy of stories across desktop, tablet and mobile …