Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Lexus Europe: designing a site for one of the world’s luxury car brands

Discover how the team at UK digital agency Amaze grabbed the wheel, shifted through the creative gears and delivered Lexus Europe a full throttle dotcom

Synonymous with executive luxury, Lexus now markets its premium cars to over 70 countries worldwide. Originating from Japan and under the umbrella of Toyota, its fleet of automobiles first arrived as exports to UK shores in the early Nineties having been launched first in the US.

While some may unfortunately know it best as Alan Partridge’s vehicle of choice, the brand encompasses genuine breadth from an ambition to move with driver trends. Within this is of course good marketing and so when Lexus was commissioning a new European-wide website, it did it in style. Digital experts Amaze, with offices in London, Manchester, Liverpool and Brussels, were on hand to make the sprawling project a reality. With the studio enjoying a strategic digital partnership with Lexus Europe for over nine years now, the project really exists within a larger ongoing initiative. This is a client that places real emphasis on supporting local markets with an evolving online presence, maintaining consistency with brand and market requirements.

However, in spite of this already close and established professional relationship, Amaze were not about to be complacent. The total project phase included a whopping four months of strategy, research and planning whereby the team endeavored to redefine the fabric of automotive website design itself. “While automotive websites used to lead the way, that is no longer the case and we found that in general the automotive industry offers a homogeneous digital offering with no stand out players”, explains Creative Director Ross Mawdsley. “Our challenge was to create a clear differentiation for Lexus from its competitors and showcase its products in ways that would make users want to consume the content.”

When you’re dealing with a car brand whose new commercial moniker is ‘Creating Amazing’, you know that the results need to be far better than average. So let’s find out from the key drivers how the gleaming new design rolled out of the showroom.

Choosing the right strategy

“The first phase of this project was deciding upon the strategy”, begins Amaze’s Ross Mawdsley. “Undertaken
by Rick Curtis, chief strategy officer, and his team, this phase helped to define the brief and determine what the site actually needed to do and how we could do it.” When you consider how challenging the initial brief was, this level of thorough preparation seems non-negotiable.A digital project spanning 34 European countries, 26 languages and effectively encompassing 40 different websites all with unique requirements. It’s no surprise then that the core team adopted a militant approach, decamping to a self-christened ‘war room’ where no creative stone would be left unturned.

However from this exile emerged a crucial tightly-integrated working relationship with the client, where an agile direction could be pursued. “On a project this big, it went beyond the traditional one client, one agency relationship”, Mawdsley continues. “We had to take into account the expectations and opinions of our direct client, Lexus Europe, whilst making sure the website was positioning a new global brand direction for Lexus and considering the needs of all of the 34 different countries, which were the recipients of the new website. Such a complex relationship required clear channels of communication and regular dialogue with the many different parties involved.” So not for the first time, talking with the client on a regular basis in an open and frank way turned out to be invaluable.

Involving the client at an early stage

Bringing Lexus into early concept brainstorms and ‘ideation sessions’ provided a more seamless segue into an initially tentative design phase. “Working as part of a multidisciplinary team that included creative, technology and strategy consultants, the initial ideation and concept work was led by myself (Ross), Bes Bujupi, our lead creative, and Andy O’Brien, our creative director of strategy.

This core team locked itself away in a meeting room and set about deconstructing the brief, the strategy findings and the findings from the initial client meetings and ideation sessions.” They went back in that room again, but this time with certain conditions imposed on the approach. Reaching for Photoshop too soon was banned purposefully in order to encourage a refreshingly organic and traditional feel. “As the days passed, we started to formulate the seeds of the initial ideas”, recalls Ross.

“By drawing it out, we found that we were concentrating on the idea, rather than getting consumed and blinded by Photoshop. Once we had the initial idea, we moved on to developing the ‘creative vision’. This is something I really believe works, and it is now something we try to do for all projects of a certain size. It is too risky to go into a concept presentation with a couple of designs and wish for the best.”

This ‘creative vision’ became a 150-page document, detailing everything from fonts, layout grids, graphical inspiration, image or video usage and indeed site navigation. Culminating with a ‘creative DNA’, the document ensured Lexus knew what was on the table. “This DNA ties all of the pieces together and shows how the creative idea or vision is built up from the sum of all its parts, meaning that there is no ambiguity and no surprises for the client. Once the client signed off the ‘creative vision’, we then moved on to producing the initial design, which was signed off in principle in round one.”

So when it came to producing tangible assets, the group could leverage this approval more confidently. A mixture of methods allowed the designers to convey frontend ideas without necessarily going to town on early builds the client was yet to see. “Initially, we started by sketching everything and prototyping at almost wireframe level”, begins lead creative Bes Bujupi. “The prototyping was a mixture of video demonstrations and HTML proof of concepts. We found this process helped us in prototyping ideas, which were conceived based on our ‘creative vision’. Once we had sign-off from the client on the overall idea, we went into a detailed design phase. Working with two designers and the creative director meant we had to keep track of over 55GB of design files. This was only made possible by using the application, Cornerstone, as version control.” It’s a good point well made, a reminder of how much the internal coordination of a big project can rapidly prove a job in itself.

The design phase

Tracking the progress made would of course be essential for not just each team within the design phase, but critical for keeping the client in the loop. “Working with front-end developers within the project helped us make the most efficient design decisions, still retaining the core of what we wanted to achieve in our vision”, Bes explains. “The synergy between design and development meant that we were validating ideas and keeping track of the build at all times. After setting the visual style of the site, we divided the pages into modules and UI components.

This allowed us to work simultaneously in sprints with the developers to build and test as we were designing. Some of the modules required animation, which was done in Adobe After Effects and then implemented as iPad-friendly video or image sequences. By combining cleverly outputted sequences, we managed to integrate animation in the key modules and pages for high visual impact.”

As this look and feel developed, the team soon encountered the inherent difficulties lying ahead. Typically, ambitions for the solution would be tempered by a desire to keep the site nimble and platform-friendly.  “A ‘Greenfield’ approach to front-end developments was adopted and this was where our primary challenges lay”, sayss technical manager Martin Paton. “Our UX and IA pointed to a long-page approach and with the complex creative on top, we were approximating page weights of 5-7MB. With a multitude of devices to support, we had to make sure the experience was satisfactory in terms of loading times and performance.”

This factor of site speed was indeed tied into the larger infrastructure it would eventually co-habit. With Lexus itself a division of Toyota, Amaze were aware of where it needed to ‘live’ within the brand’s existing website hierarchy. “The project also had a small number of server-side technology constraints that we had to take into consideration. We share a common proprietary platform with the Toyota pan-European website developments, in terms of CMS and the supporting data services to achieve cross-brand cost efficiencies, so we had to be mindful of this.”

The importance of localisation

If this wasn’t enough, when development obstacles were overcome there was still the prospect of such a massive launch. Large-scale public promotion was swerved due to the expected surge in traffic surrounding an imminent new car launch. “Although the European site attracts a significant amount of traffic, the real power lies within each individual country”, admits creative director Andy O’Brien. “This is where users can also book test-drives, contact dealers and engage in activities that lead to the sale of a vehicle. We had to launch the site in each country, in its own language and ensure that local content was integrated into each site. This part of the project was delivered through our global implementation and support team and took 11 months to complete!”

As strategic digital partner, Amaze has its work cut out keeping content fresh. “Recent examples have included the development of a sophisticated interactive movie to support the launch of Lexus’ new generation IS, with the launch collateral being turned into an app. This latest phase of work allows consumers to fully explore the interior/exterior features of the latest addition to Lexus’ hybrid line, before they even set foot in a showroom.”