The conditions were ideal. One of great retail brands of the world, the inventor of denim. A brand with a rich history that not only evolved with the spirit of the times, but in some ways, was part of progress itself.
But online, it was a mess. Stuck with an albatross e-commerce platform bound by maintenance contracts that hindered innovation. Our mission: design over it.
This was January 2012, a perfect time to completely re-invent the Levi’s brand, online. Combing through the vast amounts of material created by W+K for brand and seasonal campaigns, and in-house brand design, and bringing it to life online like never before. Over 6 months of design concepts, and another 6 months of execution, we took the best practices of the time, and applied them in a way that amplifies the character of the brand, while better serving a varied audience on their various devices.
The plan was to start with the global platform, and unify all countries outside the USA with the same design, and then bring that home to the USA.
The final product is rough around the edges, and five years on, looks dated. A few ideas live on in the current website. Like any first attempt, it was a big step forward, but needed ongoing edits, care, improvements. It needed the kind of relationship we couldn’t provide, as an agency too expensive to keep around, for a brand likely planning to build an in-house team.
Our success was in getting a big brand to start embracing new at the time but now commonplace ideas that would help make e-commerce part of everyday life, and eventually prepare them for the mobile present we live in today.
This wasn’t a new idea in 2012, but it wasn’t something big brands were doing yet. That customers would use a phone as readily as a desktop computer to shop online was still an idea that had to be fought for.
Images previously reserved for print. Product, lookbook, campaign, brand, history: all impeccably photographed and an internet with the bandwidth to show it big and borderless.
A brand that for a century had a truly American typographic character (and helped define what that means), suffered the scourge of Arial for decades. Finally, we had web fonts, but brands this big were still afraid to use them.
Beyond workman’s denim: practical fashion, for men and women. This was the positioning for the products, so we applied it to the website. Make it elegantly functional; design it to do a job.
No tricks. Flat. Photos on white, black text. These were the days of iOS 6, but the thinking was Classic MacOS. And by going counter to the stylistic conventions of the time, we’d also align ourselves with the fashion brands Levi’s was chasing with its expanded clothing line and ambitions beyond denim.
Some ideas fell into place immediately: long pages of “filmstrips” instead of click-through carousels. Grids that behaved like text, wrapping with the page, centered like words. A loose layout that uses typographic contrast and whitespace as signposts.
Eventually, extra elements snuck their way in, adding more refinement, but also losing that initial naively spartan purity.
The straightforward, honest voice of the brand is best expressed when all distractions are eliminated.
Care and attention to detail, consistency, pattern, rhythm, elegance.
Fearless, confident. We express our ideas clearly. We speak in caps without shouting.
Built to last beyond fashion seasonality. History sets the stage for the future.
The strength of black is controlled visually through line weight and dotted lines.
White is negative space, or knocked-out elements on a photographic background.
Although uppercase text has become associated with shouting, historically, it's common in signage and commercial titling. The uppercase on Levi.com connects us with that history.
We reserve caps for titles and brief callouts.
Whenever possible, caps should be gently letter-spaced to allow the letters to breathe.
Instead of using color to denote visual hierarchy, we use font weight. Heavier type is optically darker, while thinner is lighter. This, along with size, white-space and border lines, allows for limitless variation.
As in photography, the constraints of black and white can be an opportunity.
Webfonts and CSS3 are the key to using Trade Gothic on Levi.com. In CSS, always obtain licensing through fonts.com for Trade Gothic.
Always ensure that the fonts are correctly mapped to their respective weights, to avoid the “fake bold” effect that distorts the typeface.
This design seems so obvious, so pedestrian today, but at the time, the struggle was real.
The idea: users scroll without thought, without having to make any decision. But a click is a decision, it’s heavy.
Let the images loose and tell a vertical story, like a super-tall magazine, simplify the interaction to one axis, no clicks, and let it unfurl.