Brad Haynes / Blog

After nearly seven years of designing and coding ocado.com, I’ve decided that I really need a bit of a change creatively and logistically (living in East London and getting to the office in Hatfield was never ideal). Luckily Ocado has led the way in online grocery retail since it started trading and just about all the things we’ve implemented on the website over the years have become part of the vernacular in grocery site design.

Some of the best bits:

Smart trolley

Allows customers to get more of a handle on the shopping they are (or aren’t) going to buy. My favourite bit is the AJAX’d pictures view that shows quantities as multiple items.

Speed

From day one, we knew that buying groceries online was a fairly unique task for most users - with most visits resulting in around 50 products being added to a trolley. Speed is a key factor in making this a viable option for customers. Pages have always been as light as possible (in terms of HTML, numbers and weight assets, and simplicity of the DOM for fast rendering)

Catalogue navigation

In the latest incarnation (currently in beta testing at time of writing) the catalogue navigation has seen a huge overhaul and now uses meta data to drive structure. This has enabled us to create contextual navigation that allows the system to represent different modes (type, status, storage, lifestyle, who it’s for, brand) of decision making throughout the task of finding a product. This also works to make an interesting journey if users don’t exactly know what they’re looking for. There are many other advantages to this system which I’ll blog about another time.

Simple delivery slot booking

Slot (delivery time) booking has become inherently complex with multiple address functionality, variable pricing, variable thresholds and minimum delivery values, availability and green vans. Throughout these changes and additions we’ve managed to keep the process simple.

Simplicity

My goal with any design is simplicity at a very high level. This may sound like an obvious usability goal but refining any process or interface to its most minimal constituent parts at an early stage is something that often appears to be overlooked.

Accessibility

For the most part accessibility is EASY! However you have to think about it as a fundamental part of design and code creation — it’s a painful thing to have to tack on. I also think that it helps you make lots of the right design decisions. If you design with accessibility in mind I think this also helps avoid many obvious usability problems.

Making the customer the most important

Luckily this is something that’s been at the core of Ocado and the way it behaves towards customers is reflected in all aspects of the business (with the exception of some rather irritating radio ads). I never saw any resistance to changing things on the site purely to make users’ lives easier.

First Non-framed UK grocery site

This was a pet goal of mine for many years. Ocado used frames for a long time, for performance of ‘adding to trolley’ and the stable user interaction behaviour it provided. I never liked this even though I was fully understanding of the advantages it had. The semantics of having different pages in different states appearing as one, and the inherent problems and design issues this has meant that I was always aiming for a non-framed design that could offer the same performance.

Ocado.com has some new features available to customers this week. The thing I’m most pleased with is the full-page trolley viewer, organising products and images to give users a more positive understanding of what they’re going to buy.

(more…)

Reading a very interesting blog posting about the demise of Flash, I was left with the question: Is Flash really in demise? I also wanted to add my thoughts as to why it should be.

(more…)

I’ve recently finished some work something called Ocado Lite, which is designed to cater for as many different browser platforms, devices and users as possible. Primarily, it’s reason for being is to allow customers with mobile phone web access to be able to create, modify, cancel or check orders.

(more…)

Creates great images and is better for managing sets of Raw digital images than Photoshop™, but totally lacks a useable user interface. I don’t think I’ve found a more unintuitive piece of software on OS X before, and yes that even include the rather dire Microsoft Office suite of applications.

(more…)

I was asked today what my design philosophy was. I must have one, I’m pretty opinionated and definite when it comes to design. But nailing down what exactly it is has proven to be a quite a challenge. I’d never considered myself outspoken enough to formulate and write down any philosophy I might have. So far I am pretty confident in falling into the category of Modernist with all the ethics that back it up, and a minimalist in terms of aesthetics, although perhaps not in terms of functionality. I believe that good design should be entirely fit for purpose, and should selflessly consider the user over aesthetics.

Last week Ocado picked up Visionary Design award from the NLB. I don’t really have any idea how many visually impared people use the website, but since we enforced a few rules and made the semantic markup more strict, it seems to work pretty well.

(more…)

Whilst doing some cross-browser testing, I fired-up Internet Explorer 5 for the mac (yes, it would be totally retarded to actually want to use this browser) and was seriously amused to see this messge as it downloaded the default msn.com homepage:

“Why does MSN look like this?
…If you are using Internet Explorer for Mac, we recommend that you use another browser to have an optimal experience on MSN.”

Microsoft default msn.com homepage

Let’s hope this means they aren’t going to write another crappy browser for the mac.

Saying I was a bit shocked is putting it mildly. This week I was introduced to Sainsbury’s To You’s ‘new’ website design, and my chin almost hit the floor. How can such a big company have the balls to blatantly copy just about every aspect of Ocado’s website? Having been the only web/user interface designer at Ocado since the website was launched I know exactly how the Ocado website design evolved and where all the ideas have came from, and there really is nothing original about the Sainsbury’s To You design. Earlier this year Tesco’s largely plagiarised Ocado too (even using some dubiously identical graphics), but Sainsbury’s have taken it one step further and really ripped-off the design completely.

I guess there are several ways of looking at this:

1. The Ocado website design is perfect (which it isn’t) and can’t be improved (which it definitely can)
2. Ocado is such a threat to other supermarkets’ online services that they are scared to do anything different to Ocado
3. Sainbury’s To You and Tesco are lazy
4. It’s a compliment

Thankfully the coding behind Sainsbury’s new site isn’t great, accessibility, speed and browser compatibility are still problems for them.

This week I have mostly been drinking Old Bob. Don’t mistake this for some sort of dodgy pass-time, it’s simply a bloody fantastic real ale. Brewed by Ridley’s of Essex, I’ve yet to find a better pint in a London pub. Sadly Ridley’s has just been sold to Greene King, so the beer is bound to take a drop in quality if they decide to brew it in the sugar-beet hell that is Bury St. Edmunds. I’m thinking of joining CAMRA and growing a beard so I can blend with real ale aficionados - I already have a battered corduroy suit jacket, so the look will almost be complete.

I saw ‘40 year old virgin‘ at the cinema which I’m going to have to recommend. It could have been really fucking awful, but it’s not. I cared about the characters and it even had me laughing, which is rare lately.

I finally got around to working out how to copy DVDs onto my mac - not as simple as it sounds as you’ll know if you’ve ever tried. I won’t go into great detail as I’m sure it’s not legit, but I want to keep the movie’s I’ve bought on my computer. I’m not really sure why copying ripping CDs onto my iPod is okay, but copying a movie from a DVD isn’t? Anyway, Mac The Ripper works a treat for extracting the DVD content, removing the region code and macrovision protection. FFmpegX (after a fidly installation) will encode your VOB files into just about anything you want, and for any device. I’ve been going for the H.264 format as at 1/10th compression with very little loss in quality it’s a minor miracle. Sadly, I need a bit more oomph in processing power than my powerBook can muster as currently the average DVD encoding process is taking about 8 hours.