The Back Story

Nixon is a premium lifestyle and accessories brand, bridging the the gap between California surf culture and functional fashion. Over the years, Nixon has attracted a dedicated fan following, and the once small watch brand has become a global lifestyle brand in over 90 countries. From their unique style to their unprecedented collection of technical lifestyle products, Nixon has taken their California roots into a lifestyle driven fashion company.

Through a very collaborative effort, we helped  the California-based brand redesign and relaunch its web platform with an emphasis on e-commerce and a hybrid blend of user experience and visual design.

The eCommerce Strategy

The team at Nixon provided us with feedback regarding their existing site and identified that the new platform needed an elevated path to purchase experience. Along with this, we needed to find ways to incorporate and support their existing brand/culture content. This informed a new strategy of thinking and we sought out to support their higher goals of making the site more transactional in a manner that leverages their use of great photography, pairing it with beautiful interactive design, and streamlining the user flow  in a way that delights and promotes product.

A preliminary analysis of their existing homepage design was conducted to establish what was working, where improvements could be made, and what could evolve into the new platform.

Once we were aligned on the business goals of the new platform, we performed an audit on the existing platform to better understand what was and wasn’t working relative to their competitor's sites. Through a comprehensive UX audit, we established a feature and functionality matrix that aligned with newly defined content hierarchy and information architecture. Secondly, we determined that we would build the site within a responsive framework to accommodate new devices and a variety of form factors.

Establishing Digital Styles & Standards

There was a strong focus in developing the design direction, first. Setting a design language that adopted Nixon's timeless qualities but translated well on the web, through any interactive touch-point. While Nixon was developing a new campaign, it was important to work closely with their creative team to help define a digital style guide that would feel consistent.

During this process, various options were explored that showcased and sampled an online presence. The outcome was a new digital design language, focused on great typography and minimalist design, where products and photography became the site's centerpiece.

A Global Framework with a Responsive Design

Seeing Nixon as globally emerging brand, we wanted to design a flexible framework with dynamic content modules that could be customized per region. This approach would allow Nixon to market specific brand content, product offerings, and brand messaging within one cohesive framework. Through the calculated use of grids, we crafted a system of components that could be repurposed around the site, naturally translating to mobile or tablet devices with a heightened interest of design integrity degradation.

When it came to establishing the framework for the site, there was a heavy emphasis on the mobile user and enabling them to shop with ease on the new eCommerce experience. To avoid losing primary features when downscaling from desktop to mobile, we adapted our designs through a responsive strategy that automatically restructured both our content and functionality.

A Homepage That’s Ready for Anything...

For the homepage, we initially developed a solution using dynamic content modules to accommodate the fluctuations that come with Nixon's seasonal releases, collections, campaigns, team happenings and any combination of the above. There was also an opportunity to leverage their cultural assets to support their goal of having "product as the hero". Our initial concepts explored retaining the existing 'Pinterest Style' but with a more structured, calculated, and digestible framework that lends itself to the globalization we were looking for.

Through thoughtful refinement and invaluable conversations with their design team, less became more. A variety of homepage iterations were created but we ultimately distilled things to its simplest form establishing a strong design language largely that withstood both extremes of content requirements.

Product Presentation & Facilitating Deeper Discovery

Presentation is everything. There was a unique opportunity to mirror Nixon's latest retail initiatives. It was thrilling to learn of their retail expansion and how they set forth in pushing the future of the retail experience. This encouraged us to do the same with web – finding ways to create an experience that pushes the boundaries of eCommerce. While best practices are important, they can also be a bit lackluster and many of the eCommerce experiences we reviewed were very clean and elegantly designed, but lacked any sort of immersive experience.

This presented an opportunity. One that brought innovation to the product browsing experience through thoughtful interaction and consideration of eCommerce best practices. Countless explorations were required, multiple challenges faced, but focusing our energy on an elevated user experience provided a new interface that could be used throughout the site.

Designing Gestures & Interactions to Drive eCommerce

While making the products visually appealing was a primary focus, the purpose of implementing the swipe gestures was to enhance the decision making process. Allowing users to quickly swipe between various finishes created a much more efficient process without having to interrupt the user flow, reducing deeper dives into product detail pages.

After completing the desktop version of the swipe interaction, we then had to adjust to a whole different set of parameters for this to work on tablet. Without the hoverstate interaction to help inform the user that there are alternate finishes they could swipe to, we had to create a subtle tool tip.

Moving from desktop down to mobile was a fairly easy transition.  At this size, the product tiles stacked and occupied the entire screen width so we were able to surface the alternate finishes without fear of a cluttered layout.  This experience is meant to focus more on the details of a few products versus browsing an entire catalog.

For users that want to see more options at once, we needed to create a double wide grid that increased product density. While this view loses the product interaction for usability purposes, it provides a high-level view where a user would be more focused on alternate styles versus finishes of a specific product.

For users that want to see more options at once, we needed to create a double wide grid that increased product density. While this view loses the product interaction for usability purposes, it provides a high-level view where a user would be more focused on alternate styles versus finishes of a specific product.

Telling the Product Story With a Contextual Shopping Experience

Typically, Nixon has a rich story around how a product was developed. There was an opportunity to express this with stronger intent. While there would invariably be more standard products than their premium A+ products, creating a framework that could support content, imagery and storyline felt critical.

Creating a new page layout allows Nixon to communicate its attention to detail and craftsmanship they put into their products. With updated imagery and a refreshed user experience, product specifications were wrapped into a holistic story about the product and brand. Paying close attention to eCommerce and driving transactions, there's a persistent product tile that tracks down the entire page, allowing the user to view available options and quickly add the product to their cart as they become more educated on the features and benefits.

Browsing Innovation & Improving the Sales Funnel

In an effort to convert browsers into buyers, together with Nixon we set out to rethink the eCommerce sales funnel. Our primary task was to diminish potential distractions and facilitate a shopping experience that made the products more explorable and actionable.

We wanted to bridge the gap between brand engagement and the checkout experience by creating browsing and shopping interfaces that were both intuitive and informative. The site now features multiple paths to purchase, leveraging recommendation engines that enable customized content for each individual user. Search has been greatly improved and the site is now SEO friendly with Category landing pages that educate and push featured and seasonal products.

Swipe Gestures & Product Browsing

The product browsing experience has been improved by bringing swipe gestures to the product tiles. This allows consumers to quickly browse color/product options in a fun and engaging way which also prevents them from having to leave the page. This strategy also transitions down to mobile, prompting lower bounce rates and improving the shoppers overall user experience.

Category Landing Pages

SEO was a big area of focus for the marketing team and together we rethought what could be done to optimize the site’s performance on external search engines. To accommodate this, one solutions was to implement category landing pages that enabled Nixon to leverage SEO relevant search terms and body copy while pushing key products and categories.  

Contextual Shopping Experience

When making purchasing decisions, a consumer might find any number of details intriguing to prompt a purchase. The product detail pages provide a rich and detailed experience, where each product potentially has over 20 colorways. To solve for this, a product purchase tile was implemented that follows the user down the page to ensure they know exactly what they are looking at, and potentially purchasing.

Personalized Shopping

When making purchasing decisions, a consumer might find any number of details intriguing to prompt a purchase. The product detail pages provide a rich and detailed experience, where each product potentially has over 20 colorways. To solve for this, a product purchase tile was implemented that follows you down the page to ensure users know exactly what they are looking at and potentially purchasing.

User Generated Content

Social proof has become somewhat synonymous with product reviews. A picture is worth a thousand words and with Nixon's strong social presence, the integration of this content was important for Nixon to include within our designs. Organic content has shown to increase sales conversions which we believe is something to continue building off of.

Want to work with us? Get In Touch