At last night’s UX Craft meetup, Carlo Kruger and Rich Archer from Unboxed Consulting gave a great talk about launching the Contiki agents site redesign on time and on budget. Here are my notes from their presentation.
The design team was at Contiki in London and the development team was at Unboxed in Cape Town, so they needed to work harder to establish good communication and to have good knowledge transfer. One of the things that led to their success was their focus on design as a process rather than an artefact.
The process
A previous project that redesigned a different part of the site relied heavily on using Photoshop documents (PSDs) as a starting point for development and discussions: not so this time. They started very lo-fi: sketches. The discussions around the sketches let them establish a shared vocabulary, clear up scope, and uncover things that hadn’t been thought about in detail. It also let them see areas where this wasn’t “just a reskin.”
They moved from there to Axure prototypes that the design team built, to the pleasant surprise of the dev team. The lo-fi nature of the prototypes meant that they were quick to make and quick to change, and that they could experiment easily. The design team were asking more questions and figuring things out at the prototype stage after spending a few days on it, rather than asking questions after spending a few weeks working on PSDs.
Getting sign-off
This lead to one of the more interesting aspects of the talk for me: about sign-off from management. On the previous project, the bosses had only been willing to sign-off on PSDs of whole pages. On this project, they signed off on (black and white, fairly low fidelity) Axure prototypes. It’s interesting that the aspect they were willing to relax was fidelity rather than clarity of layout.
(A few bits of further reading on the hairy topic of responsive deliverables: Responsive Deliverables by Dave Rupert; Delivery Logistics by Laura Kalbag; A Maintainable Style Guide by Ian Feather)
Front-end Style Guide
Once the prototypes had been signed off, the design team moved on to Photoshop to flesh out the designs. The dev team jumped into HTML and CSS at this point, rather than waiting for the finished PSDs. They built up a Front-end Style Guide, using a system similar to Atomic Design by Brad Frost. They also convinced the design team to work on modules rather than pages, meaning that pieces of pages could be built as design work was continuing.
Another interesting thing was the use of the style guide for states: the steps in a user journey. The style guide would display each step in the log in process, for example, next to each other on one page. This let the team check for correct styling and consistency across the steps.
Measuring the effect of the change
Perhaps the best part is that by deciding on metrics up front, they were able to measure and demonstrate a link between improved user experience and increased sales and between improved site performance (in terms of speed) and increased sales. that is pretty awesome.