Zappos presents Zen.
The home of sneaker culture.

2018

Client Zappos
Agency Reaktor, NYC 
Role Design Director (brand, experience and UI design)

 

Las Vegas based retailer Zappos engaged Reaktor to create an end-to-end product experience for a new brand, called Zen.

Historically Zappos has catered for the needs of "the full family shopper" selling goods at a competitive price and offering a unrivalled customer service experience. Zen aims to connect Zappos with a new audience, a audience who demand a world-class shopping experience as they shop for the latest sneakers and styles. 

 

Zen needed an identity to help set the tone for the brand and experience going forward. The brief was to have something that didn’t blend in with other online fashion stores instead feeling more connected a media or streetwear brand. We decided early on that the Zen logo mark needed to have a sense of movement and have personailty standing alongside other logos in the marketplace.  

Zappos_BrandZappos_Brand
Zappos_BrandLogoZappos_BrandLogo

DESIGN EXPLORATION

As well as creating an identity for Zen, we quickly set out on creating an impactful yet simple design language to use across the product experience.

To differentiate against the norm, we stayed away from clean white layouts and staged product imagery. Instead opting for a darker look and feel with bright colouring and bold typography. In these early stages of the process we did not know fully what direction the brand would go in so it was key to keep the visual design system simple yet give ourselves us the option to expand and build on it as we moved forward.

Zappos_ExplorationZappos_Exploration

CURATE AND DISCOVER

Zen showcases products, video content, people and brands in a simple linear feed. We explored ways to link content types together within the feed, for example featuring the latest Air Jordan sneaker after a historical bastekball video. We wanted to move away from a typical ecommerce patterns, instead creating an experience that felt more like a social feed. 

The main view contains two prominent CTAs, search which caters for the "I know what sneaker I want" shopper and a menu icon where users can easily access their profile and other key parts of the experience. 

Every sneaker has a story. 

Product display pages (PDP) typically all follow similar patterns and layouts, designed to get the user to tap the buy button as quickly as possible. We didn't want to mess with proven design patterns, however we did want to explore the story telling aspect of this particular view.

When buying a luxury product the back story or narative about what that product represents is one of the most important elements in making the sale. We wanted to offer insight and tell that story for sneakers, educating users with a medium interest in sneakers and offering meaningful content to sneaker-heads. The example below shows a timeline style layout for the Nike Cortez, as re-releases launch and collaborations happen, content can be updated, keeping users coming back to what would of been a very boring PDP.

RETAILAINMENT

Zen is about blurring the lines between viewable content and shopping, catering for the needs of the "abstract shopper". When it came to video playback we wanted to offer an immersive viewing experience opting for vertical video playback and surfacing products right alongside the video content. The video below shows a Tinker Hatfield interview, the user can tap the video to view the sneakers Tinker is talking about.    

On top of creating an experience to showcase content and generate sales, Zappos wanted to explore the idea of a feature that we called "Try it On".

The prototype below shows an early example of offering consumers a way to browse through full outfits with a single swipe. It was paramount that whatever we created was easy and fun to use, offering a way to get consumer's eyes onto apparel and sneakers and acting as a tool to help generate sales. Another strong element of "Try it On" is it's potential in a social context, sharing outfits with friends, adding your own images and even gamifing the experience. Watch this space!   

LAUNCH & ROLLOUT

Zen launched in November 2018 at ComplexCon, creating buzz at a packed stand by hosting DJs, sneaker giveaways and conducting interviews with famous sneaker-heads. Zen already has a strong following on Instagram where followers can win rare snaekers via competitions and giveaways, follow Zen here. Zappos continue to develop the platform, rolling out features and functionality.

[unex_ce_button id="content_s80t5z5st,column_content_ftxk7wuat" button_text_color="#000000" button_font="light" button_font_size="13px" button_width="content_width" button_alignment="left" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="20px 60px 20px 60px" button_border_width="1px" button_border_color="#ebebeb" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#bd10e0" button_link="http://philipreadman.com/britain-on-film/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Prev[/ce_button]
[unex_ce_button id="content_s80t5z5st,column_content_p4pzfwpiu" button_text_color="#000000" button_font="light" button_font_size="13px" button_width="content_width" button_alignment="center" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="20px 60px 20px 60px" button_border_width="1px" button_border_color="#ebebeb" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#bd10e0" button_link="http://www.philipreadman.com" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Home[/ce_button]
[unex_ce_button id="content_s80t5z5st,column_content_3vm27xrzr" button_text_color="#000000" button_font="light" button_font_size="13px" button_width="content_width" button_alignment="right" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="20px 60px 20px 60px" button_border_width="1px" button_border_color="#ebebeb" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#bd10e0" button_link="http://philipreadman.com/how-do-you-define-engagement/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Next[/ce_button]