Zappos.com
Did the shoe fit?
Free overnight shipping; a liberal return policy; friendly service: it’s no secret that Zappos.com positions the customer as the cornerstone of their brand promise. A beloved online retailer with a rabid fan base, Zappos.com not only delivers your purchase quickly, but makes you feel that they genuinely care about your experience as a customer.
Yet despite their success, Zappos.com was a website with a problem. No, not a sales problem: customers were joyfully buying mountains of shoes every day. Nor was it a service issue: Zappos.com has an army of amazing customer service representatives available to discuss each and every issue, big or small, 24 hours a day. And it certainly wasn’t an awareness problem, as Zappos.com is widely known as the online destination for must-have shoes and clothing.
The problem was that their business growth had outpaced the slowly-evolving aesthetic of their website. While the site enabled customers to make their purchases quickly, it didn’t capture and embrace the hallmarks of the Zappos.com culture. The site lacked the personality that customers were used to seeing with other company touchpoints.
Aware of this broadening gap, the Zappos.com user experience team embraced the idea of a website redesign initiative to faithfully represent the Zappos.com experience. For customers both old and new, a revitalized site experience needed to emulate the best aspects the Zappos.com brand: fun, friendly, and endlessly helpful. For the tireless and reliable customer service department, it had to be the place where their unique brand of service was matched with a world-class product browsing interface.
More than a re-skin
Initially, Happy Cog was brought in to assist in a comprehensive “re-skin” effort. As we began digging, several challenges were easy to diagnose. The old site lacked a core defining visual style that felt purposeful. Individual elements didn’t necessarily contribute to a collective, consistent visual language. Many content modules had an aesthetic all their own. Page spacing and layout structures often felt forced together and disjointed. The unique Zappos.com tone of the site copy was evident in some places and absent from others. Some copy made customers laugh, smile, or feel inspired while the text in other sections felt rigid and instructional. Typographic choices were often at odds with the design, and felt like styling afterthoughts. Copy and navigation were shoehorned into valuable pixels of whitespace. The parts didn’t add up to a coherent experience.
After our initial exploration, we determined that a re-skin was only part of the solution. The Zappos.com web team needed something different. They didn’t just want a bunch of newly designed pages, they needed a design system. We set out on a mission to create a system of typographic rules, versatile grids, and flexible modules that would enable their internal teams to better react to the ever-changing e-commerce landscape.
The Zappos.com design team leadership elegantly summarized that their definition of “design” wasn’t just creating an attractive site:
We are pretty keen on viewing design as a verb, not a noun here. We never finish designs, we never “redesign,” we evolve. Business needs are always changing, economies change, customer needs change—hence how we tackle these issues need to evolve.
Trying things on for size
The Happy Cog design team got to work, delving into a purposeful array of visual design concepts. Exploration immediately focused on the key problem areas of the old design. The new-look Zappos.com site needed to sport a highly modular–based design system floating on a systematically-deployed grid. A cohesive set of typographic styles would be the consistent glue holding everything together, helping give the site copy and calls-to-action a visual personality. We even got involved in identifying opportunities to inject clever examples of a more Zappos.com-centric voice with the site copy.
Keep them window shopping
Zappos.com is more than shoes. They sell things like bags and coffeemakers too, and all these products are showcased in self-contained modules at multiple levels of the site experience. Happy Cog recognized that there needed to be a common style for the multitude of product showcase modules. Our modules solutions were based on a universal 5-column grid, and could be expanded horizontally or vertically as the content dictated. Such flexibility allowed the Zappos.com team to add mini-product showcases to gaps in page structures when up-sell and cross-sell were needed.
Product modules and orientations
Constraining and normalizing typography
By introducing typographic constraints across the gamut of navigation, headlines, and descriptive content, we kept the hierarchy of information clear. Browser-safe fonts were purposefully implemented to keep page weight down and allow primary navigation elements to be rearranged or updated easily.
Search interaction and typography
When more personality was needed, we employed the versatile Sentinel web-font family. The inclusion of Sentinel can be seen not only in various graphics and headers, but also in offline collateral like the “Zappet” television commercials.
Sentinel deployed on YouTube
Keep them smiling
As an enjoyable interface system emerged, the cheeky Zappos.com copy voice found a natural and fun way to become part of our process. Every product category has a unique landing page with an accompanying product photo. The page titles and product photo showcases on such pages became blank canvases for funny, quirky, and irreverent snippets of copy that added a distinct Zappos.com flair. Sprinkled throughout the site, these distinctly Zappos.com headlines added delight to the shopping experience.
Bringing personality to products
A bit of oomph, both in typography and copy
Smart Implementation
Referencing a detailed Style Guide Happy Cog assembled, Zappos.com implemented Happy Cog’s recommendations bit by bit, testing the efficacy of each change as they went. This approach assured that the changes were not overwhelming the customer, while validating the benefit of each interface improvement. When all was said and done, Zappos.com customers sensed a new ‘experience’ without necessarily realizing the timing of its unveiling.
Through the development of a flexible design system, streamlining and constraining typographic elements, and helping to bring the Zappos.com personality to the surface, Happy Cog helped one of the world’s most successful online retailers push their customer experience to the next level.
Responsibilities
Graphic design, user interface design, style guide creation. Project completion 5 February 2010.