Responses by MOUTHWASH and Adrien Picard, developer.

Background: The site was part of a rebrand we were tasked to do for Goodfight, a fashion label and creative studio in Los Angeles. The purpose of the site itself was to serve as a digital platform that houses the brand’s shop, journal, archive, mood board and resource guide. We like to think of it as an online home; we’re simply the architects.

Design core: The rotating images you encounter on the homepage are a memorable way to experience the brand’s look and feel. Being easily browsable with a unique distortion effect, it really encourages and rewards interaction and exploration. The pace of the entire site is really up to the viewer, giving them control and freedom that deviates from traditional approaches. This feeling is also echoed by the transitions found on the archive page, shifting in and out of the individual stories. It’s a foundational piece to the overall UX of the site, and it served as a through line in the design and development process.

Favorite details: Redefining the branding and wordmark for Goodfight formed an exciting portion of this project that helped solidify the web launch as a line-in-the-sand moment for the brand. The new wordmark is typeset in Synt, an unreleased font by ABC Dinamo. Being one of the first to use a font is a big moment for a brand, and it helps create an ownable and memorable mark that will stand the test of time.

Challenges: There were two major tasks for us when we approached the project. First, we needed to create an online shopping experience that was both engaging and functional. E-commerce sites tend to carry a negative connotation of being boring and homogenous, so we wanted this site to feel alive and fun for people to browse.

Second, we needed to simplify all the content from Goodfight’s previous site and present it in a way that would be easily digestible. We executed this by implementing five core pages: Shop, Archive, Information, Good Life and Mood. A lot of refinement went into this process, but we believe you have to say goodbye to a lot of things in order to give space to what’s most important.

Navigation structure: The overall concept was a “side-to-side” navigation, which we executed in a few different forms. We wanted users to browse the brand’s editorial pieces before they ever felt they were being sold anything. Our solution was to create an overview experience on the homepage, enabling viewers to familiarize themselves with the spirit of the brand—as well as the site navigation—upon entering the site.

Technology: The site is built with Nuxt.js, a JavaScript framework created around Vue.js. For the back end, we coupled the Shopify API with Craft CMS, which gave us the flexibility to build complex editorial pages and a better authoring experience.

Special technical features: The Homepage slideshow—probably one of the most memorable features of the site—was built with PixiJS.