Redesign of the MINI global platform website, spanning some 130+ markets worldwide – our goal was to make the best automotive site in the world. An epic two year long project to rethink what a modern, responsive, automotive site should be. Working in small multi disciplinary teams of creative, developers, and UX. Tackling parts of the site in sprint cycles working hand in hand with the clients as the product owners and involving key stakeholders at every step of the way. Involving lots of visits to the global MINI HQ in Munich, Germany to work side by side and presenting to all facets of MINI.

With a project so huge it is difficult to try and condense two years of work into a small case study – I cannot show everything, there simply isn’t the time or space on this page. I have tried to show the most interesting parts of the site – from my perspective and offered some insight and thinking to illustrate how the project was shaped and crafted.

A real team effort – I was involved in all facets of the project, setting tone and direction across key sections of the site which drove the visual language and design direction for the rest of the site, working with tech to break boundaries and push them to solve our creative problems, and supporting our design team with direction, inspiration, and guidance. My roles involved visual design, art direction, creative concepting, developing animation & interaction prototypes, interface & interaction design, client presentations both on-site and remote, spear heading creative documentation, scoping, design consistency, oversight of documentation, oversight of 3rd party technical and creative agencies, guidance, oversight, and mentoring of other creatives and designers.

MINI is one of the few car brands that has a twinkle in it’s eye and a certain British playfulness and tone of voice that only MINI can get away with. At every step we made sure that the site had personality – not only in how it looks, but the little details – small interactions, transitions, and animations – not to mention the copy and storytelling.

It all began in 2012 when AKQA won a pitch to design the new global MINI responsive platform project. This was in the pioneering days of what we know now as responsive design. The project was designed for the future and was AKQA’s vision of how the modern consumer would be using and viewing websites in a couple of years time.

With this in mind the design philosophy for the project would be ‘touch first’, this meant that we designed primarily for touch devices – tablets and phones. This would mean that our designs would work and adapt easily for ‘point & click’ – laptops/desktops.

One of the most important aspects for MINI is the concept of ‘the car is the star’. The car itself was always to be centre stage, like a rock star the site should revolve around the personality and looks of not only the cars on offer, but in fact MINI – the brand itself.

Our approach was to first align with MINI about what they wanted to create. Using ‘Confluence’ a form of wiki, we wrote documents, gave inspiring examples of design, sites we liked and talked about our guiding principles. Those guiding principles defined what direction the site was going to follow and from a top level were:

– Car is the star = Make the cars always centre stage and always looking beautiful, lots of large full bleed imagery, story telling, and good looking layouts, the site should be as stunning as the cars.
– Playfulness as standard = the interface is the brand, MINI is full of personality, when users interact with the site it should feel unique, playful, and unexpected. Of course all as and when appropriate.
– The sales funnel = the core pages have a purpose to inform user about the cars and get them to arrange test drives, order brochures and so. Forms, search, DLOs, should be a state of the page – and should not direct people away from what they were viewing.
– Shallow site architecture = logical structure, information and pages not buried under layers of hierarchy.

With a project this large and with three separate workstreams it was important to manage consistency between layouts – at one stage we had 8 creatives working on the project. Between my creative director and myself we arranged and ran a weekly ‘design consistency’ workshop were we looked at the latest designs and made sure that visual design and interactions were consistent with each other. Creating GUIs to standardise interface elements as well as font styles to make sure the design language was consistent.

Documenting such a site was complex, as at the time of designing we were not sure who exactly was to be the build partner. It shifted from AKQA, to BMW IT, to a range of suppliers. As BMW IT and other build firms were based in Germany, we needed to make sure the documentation of the project was rock solid and easy to understand. We had an assortment of deliverables and documents, from the rough motion studies of interactions, to PSD layouts, to a vast range of deconstructed responsive modules.