Faith Connexion by RWATGG & Norgram

In the spring 2016 RWATGG & Norgram joined forces bridging technology and design into a progressive branded e-commerce pitch for Paris based fashion brand Faith Connexion. This article servers as a public rundown of the entire pitch presented at Faith Connexion in Paris.

George Hard, Faith Connexion F/W 16 Lookbook.

Faith Connexion is a young luxury fashion brand of men’s and women’s wear with a strong street-inspired aesthetic and a focus on collective creation. Their goal is to connect designers, artists and brand enthusiasts into a creative community, the Faith Connexion creative family.

“At Faith Connexion we believe that creativity in fashion needs to become open source to maintain vibrancy and choices.” — Faith Connexion.

E-commerce is a cornerstone of Faith Connexion’s growth strategy. Making a new e-commerce experience needed to communicate the rich creativity and strong collective culture of the brand while at the same time being intuitive to navigate and seamless to make a purchase.


Creative Approach

We wanted to explore and define a new approach for the Faith Connexion e-commerce experience bridging progressive technology and a design direction that clarifies the visual expression of the collective rather than cluttering it.

“A collective is an organism that facilitates a canvas for individuals to express their art, progressions and personality. These expressions all together is what makes up the brand of Faith Connexion” — Mathias Høst Normark, Norgram.

Our vision was to create a solid, timeless design system that both gives the users a great shopping experience but also becomes the artist’s canvas for great expression.

“We don’t believe in collections — we believe in progression.
A constant, ever-changing, flow of inspiration.”

Before stepping deep into the solution it was important for us aligned and have a common direction for the proposal. We defined 4 core parameters as a base for the experience — making sure concept, design and tech was in sync all along.

The 4 core project parameters.

Timeless
Overall the aesthetics of the framework needs to be timeless making sure that it dosen’t over power the visuals of the artist. At the same time it’s important that UI elements are relatively recognisable for the user in order to have a seamless shopping experience.

Transitional
The system is not only lifted by design but also code in the form of unique transitional elements and interactive features the enhances the overall brand and shopping experience.

Expressive
While being timeless and intuitive to navigate it’s important that the feeling of using the site comes across with a lot of expression and attitude that supports the artists.

Canvas
The design acts as a dynamic canvas where it’s possible to customise areas unique to the type of expression that fits the artist.


User Experience

It may sound overkill to make UX for a visual proposal but for us it was not a matter of making an entire UX flow but instead define a couple of high-level common rules for our approach.

Merging shopping and brand experience

A key rule for the user experience was to break down the silos of shopping and brand experience into a more coherent and unified experience where shopping and brand can intersect nicely. Connecting the progressions to the artists.

A high-level overview of key pages and the breakdown of how brand and shopping intersect.

Embracing the aspects of mobile first

Mobile first is not just about making an experience that works on mobile – it’s an exercise of understanding and deciding on what’s important. At the same time mobile gives you the ability to tab into progressive enhancements like providing users with notifications, longpress features — making it more of a web app than a mobile site.


Design Direction

The design direction is based on our 4 key parameters: Timeless, Transitional, Expressive, Canvas. We started with developing a simple framework as the canvas for the artists. View all designs in the pitch document

The striped framework of the design direction.

After exploring and defining the rules of the framework we started to apply the expressions and content from the artists and Faith Connexion.

Framework with content
Mobile first design based on the expressive universe of by French graffiti artists Le H and Reyz
http://labs.rwatgg.dk/fc/video-zoom-2/

To make the most of the assets that already exists, we created a prototype of an interactive video to illustrate a solution that does not compromise the aesthetic value while transporting viewers straight to the featured products or content.

Visual summary of the design direction showing how the system works across mobile, tablet and desktop.

Technology

We proposed in the technical scope, to use several key progressive enhancements to increase user involvement and make the platform geared for the future of the web.

At it’s core Faith Connexion includes new artists at a constant rate, making the look and feel of the brand very artist-specific, as a consumer or fan you might only be interested in one specific artist. With this mindset visiting faithconnexion.com can be an overwhelming experience.

Longpress options and push-notifications

To streamline this, we proposed to setup a notification stream that would connect and engage individual artists and fans directly via Push Notifications and Artist-individual Newsletters, this way you could follow your favourite artist closely without having to engage with a huge brand and their every update.

We wanted users to follow their favourite artist closely even when offline, bridging the gab between Native Application and classic e-commerce websites —Felix Nielsen, RWATGG.

So as artists would upload new content of mood-boards, upload pictures from a back-stage show or launching final products, we would use (background-sync), update the PWA (progressive web app) and notify the user via push notifications. Combining this with Offline Mode the user would then always be able to access fresh new content from their favourite artists through the Faith Connexion platform even when Offline making the platform connectivity independent.

Prototypes

We developed several prototypes throughout the ideation process in order to explore visual concepts and ideas.

Parallax scroll and image sequencing

We explored image sequences as the user scrolls through a parallaxes stream of images working both on mobile, tablet and desktop.

Mobile parallax effect and image sequencing on scroll.

During the process we used Robert Penners easing equations without any framework, which ended up as a codepen on how to use these wonderful easing equations with custom values.

Transition prototypes
http://labs.rwatgg.dk/fc/parallax-1/
http://labs.rwatgg.dk/fc/parallax-3/

Unique Transitions for every progression

We explored a transition effect that where aligned with the disruptiveness of the brands look and feel, making unique transitions for each progression.

http://labs.rwatgg.dk/fc/displacement-transition-3/
Two parts make up the transition.
An image and a runtime generated mask.
The mask is a threshold-generated copy of the image, upscaled and converted to a plasma fractal to give the masking effect most dynamic.
The effect is defined by the original image structure.
http://labs.rwatgg.dk/fc/displacement-transition-7/?zoom=4

Using responsive technologies we would turn these effects down on mobile devices where we want the experience to feel fast and snappy.

Transition prototypes
http://labs.rwatgg.dk/fc/displacement-transition-3/
http://labs.rwatgg.dk/fc/displacement-transition-7/?zoom=4

Longpress features

As apart of the progressive approach to mobile we wanted to enable users to have easy access to to features like: Add to wishlist, Shop this look and share by long-pressing on any item.

Demo made with Principle app