Levi’s Girls online

Levi’s Europe kick-started the spring season with a fresh new look and new sections including a women’s section on its Lateral-designed site.

The spring incarnation of Levi’s pan-European Web site, designed by Levi’s Europe’s digital marketing agency Lateral, includes a new section dedicated to Levi’s 501 Jeans with Anti-Fit campaign. Designed to work closely with the offline campaign in TV, print, cinema, and retail, the section illustrates the attitude of ‘Anti-fit’ – that of self-expression, thinking differently, and refusing to conform to fashion’s trends.

The section encourages visitors’ interaction with the brand through Levi’s vmx: a video mixer that lets users create and send fridge-magnet style messages using the actors from the campaign.

The Anti-fit section of Levi’s Europe site was joined in March by an online magazine targeted at girls. Accessed either from the main site or from its own URL: www.levis-girls.com, the Girls area provides details of Levi’s extended range of jeans fits for girls as well as advice on how to dress and accessorize, and an interactive fit tool to help girls find their most flattering style of jeans.

“Levi’s has a big female following but has not paid much attention to them for a while. We decided to do something about that,” explains Helene Venge, digital marketing manager, Levi’s Europe. “We’d like to get across Levi’s as a credible and relevant brand for girls, and to build a long-term dialogue and relationship with the target.”

A question of education

The key marketing challenge of the brief according to Su Sareen, creative director of Lateral, was to present Levi’s as a credible contemporary brand for girls. “Girls had traditionally seen Levi’s as, at best a unisex brand, or in many cases they thought of Levi’s as a highly male-orientated brand,” she says. “We needed to convince them that Levi’s now offers a range of fits that specifically flatter the female form.”

Lateral devoted over two months to the planning of the new girls section, which included generation of ideas, definition of technical requirements, information architecture development, CRM plan, and a design brief.

“We worked closely with all the Levi’s agencies at the beginning of the process to align our general positioning and approach,” says Sareen. “Internal brainstorms were followed by multi-agency meetings to share and develop ideas. However, as the brief for the Web site was much wider than the other agency briefs, at a certain point we had develop our work alone.”

Of key consideration was how the new section would work in relationship to the main brand and site. Initial issues facing the Lateral team included whether the section should have its own separate identity and URL and how to encourage visitors to return regularly and register for more information.

Lateral’s and Levi’s research indicated a magazine-style approach best suited the target audience’s need for up-to-date, relevant information and features on the Levi’s brand as well as fashion in general.

Unlike the main European site which is updated monthly, certain features in the girl’s section are updated every fortnight. Coupled with the need to present information in five different languages and cover the whole of the European fashion scene, the site’s content and management needed careful planning.

“We determined that we actually needed to build a separate content management system for the girls section of the site,” says Sareen. “It took us some time to come to this conclusion, but once we had made the decision it was relatively straightforward to implement and we were able to move the project forward in leaps and bounds.”

With regards to the content, Lateral had to maintain a consistent brand identity across Europe, while at the same time offering locally relevant detail.

“We didn’t consider ourselves sufficiently expert to write about the whole of the European fashion scene so we hired expert help in the shape of two ‘fashion editors’ with relevant pan-European expertise,” says Sareen. “We’re also working with the local Levi’s offices, who are providing us with their local insights and information. The contribution from local countries is expected to keep growing as the site matures.”
The girls section takes a different attitude to the main European Web site. Whereas the latter has an experiential, playful approach, the girls’ section is designed for maximum usability with two direct routes to any piece of content.

“The Levi’s girls brand was all about ‘tough sexy’, but the site needed to be very magazine-y and feature lots of product. So we took the view that the form absolutely had to follow function and went looking for examples of other media that had done both of these things particularly well,” explains Sareen.

“In the end we found that the best examples were Japanese street magazines. The magazines themselves are clean and accessible design-wise, with a heavy product focus, but are still able to keep their street-cred intact.”

Early designs for the Girls section took inspiration from Japanese style magazines, with clean layouts and simple typography to bring the actual products to the fore. The team then moved to a tougher and sexier look with the use of dripping graffiti ink, street stickers and an overall dark feel. A separate subnavigation and side column was added, mimicking magazine contents pages, for easy access to freshly updated content. Towards the end of the process, the designs moved back to a lighter background to keep the feel lighter and easier on the eye for regular visitors.

From initial brief to launch, Lateral spent over five months working on the Levi’s girls section – three and a half months of planning and then two months of production. The designs for the new area were created in Adobe Illustrator and Photoshop before being prepared in Flash MX for integration with the content management system. “The Levi’s European site that Levi’s girls site lives in is built in Flash MX, so this was always going to be the end format for the site,” explains Sareen. “Yet, we’ve found that when designing sites that do or do not use Flash MX, it’s far quicker and allows for far more creativity to begin by using Photoshop and Illustrator.

Levi's 501 briefs

The Lateral’s brief for the 501 section of Levi’s European Web site was to create an online experience that supported the 501 jeans with Anti-fit campaign.

Historically Levi’s ads have no dialogue or spoken words in them just music, yet the 501 jeans ads are all built around speech points out Lateral’s chairman Jon Bains. “We wanted to leverage this dimension and offer some kind of interaction with these speaking characters,” he says. “So when we started looking around for inspiration, we kept coming back to Max Headroom.

“We wanted the video mixer to be a fun tool that would give users a way to create personal messages to send to their friends using the characters in the ads,” he says.

The look and feel of the video mixer had to match that of the rest of the section – urban and functional.

The design of the word editor was a more complex issue, according to designer Karsten Schmidt. It had to look cool but be intuitive so that users could easily create messages.

The team decided to display the text of the message over images of the actors from the commercials – Rick and Stephanie – who speak the actual words to reinforce the connection with the ads.

Lateral had received a video tape from the commercial, which the team had to import into a computer and then edit out each of the three hundred or so words, so that they became separate clips.

When planning the VMX, the team had built a test environment where the interface and back end of the mixer were brought together for the first time. “Once this was done we set about testing it… well actually we set about trying to break it,” recalls Schmidt.

Once testing was complete, the VMX went live and through messages to friends and family, Lateral let word of mouth do the promotional work.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...