swatchbook mix

mix

Platforms

Mac | iPad | iPhone

Project Overview

In 2019 I, along with my mentor CEO Yazan Malkosh, designed the “swatchbook mix” app. It is a 3D design, configuration and visualization application that was initially designed for the iPad Pro (for best hand held computing power at the time).  Working closely with executives and engineering, the vision was to provide the fashion industry with tools that allow real-time design use and insight of digital materials provided by mills and tanneries on the swatchbook platform without sacrificing the designer’s creative core.

This app was primarily designed for enterprise use as well as education. It is trusted by clients like; Nike, New Balance, Merrell, Victoria’s Secret, The Shoe Surgeon and Laguna College for Art and design to name a few.

“mix is an amazing tool to develop new designs based on materials and seasonal colors”, said John Burch, Senior Vice President of Product for Merrell, a Wolverine Worldwide brand. “To be able to explore hundreds of designs and color combinations in full 3D and AR in a matter of seconds is a tremendous boost to our creative process. With the ability to output a virtual Bill of Material and renderings for every variant mix is the first tool to connect creative, production, and retail - and that all from a mobile device.”

Execution

The premise was simple, empower the designer to iterate & make informed visual decisions enabling them to communicate amongst their team, their clients and their manufacturers.

In order to establish that, we had to understand design processes for these brands. Interviewing and working closely with clients, design processes proved to be wildly different with an overwhelming untapped potential to be better streamlined. The common denominator was the need for faster iteration & quality visualization (using real world materials) but providing an enjoyable user experience for the designers while doing so was what we grew passionate about.

Having to make important (not to mention impactful on cost and the environment) design decisions based on a spreadsheets and a flat Techpack is unfathomable at this time and age. We were determined to push the industry forward in that respect.

swatchbook is basically the world’s first and largest digital (real world) material library, It also allows you to host & process your own 3d assets. The two main ingredients for product visualization. The mix  app was the cherry on top; the designers elects the 3d product they would like to design, selects the material collection(s) designated for this project, selects the dedicated color palette(s) and they’re off to a configurator.

 Now, this is where the magic happens;

  • The user is able to set up design rules, for example; the toe box needs to be light coloured, the heel & neck need to be dark, the avatar needs to be ignored, the lace needs to use the “lace” collection only, and the logo material needs to be exclusive.
  • The user is able to assign a specific material to a specific part. They have that part of the design figured out they don’t need to iterate.
  • They fire mix up, they are presented with ALL possible iterations. They swipe right for the designs they like and left for the ones they don’t, this would train the model to better “guess” what they’re looking for. Keep in mind, this was early 2019! Meaning this was AI before AI was cool.
Select an aset
Assign materials to part(s)
Set up some rules
Swipe to like/dislike/pin
View material colors

In the following versions mix grew to incorporate fast and effective recoloring as well as the ability to start a design from blank and the ability to share uneditbale/locked variants with free viewers.

Comical post on team channel about mix viewer personas; JJ (color blocking genius) works with Kat (pro designer) & Meili (admin material librarian) on developing variant designs to be sent for manufacturing review. The team there is excited to see the designs, maybe also a little nervous to see what the designers came up with.

Some of the A/B testing conducted was to choose recoloring UI. try prototype Spinwheel , Tap to select , Linear

The wheel proposal tested best in Time on task, error and abandonment rate KPIs, among the patterns identified was that 4 out of 5 participants found the wheel to be too small for their fingers. The wheel UI was enlarged 20% as a result.

Once the user likes a design they can save it, adjust it and share it with their team or manufacturer with a complete virtual bill of materials that gives you access to the material’s physical properties, physical video and physical sample with a touch of a button. This right here is a dynamic, interactive and intuitive Techpack. Most clients loved this so much they integrated it into their main design and manufacturing workflow. Other clients were a bit reluctant to use it to its full potential, for some it was pure corporate politics, some feared their departments to be replaced and some design departments just did not have a voice at the executive level.

 

Results

 The ability to go this deep into a design proposal before creating a prototype was not as tangible before. This not only saves money, effort and the environment but is very valuable for the education industry too.

 Brands often have to hire specialized graphic designers to create the digital twin material maps (swatchbook has developed a faster more accurate digitization process), hire 3d, visualization and rendering artists to come up with one design at a time (mix does that with a touch of a button). Each design is then communicated with spreadsheets and a Techpack for a prototype to be made, only for it to be rejected at a later stage of the design process.  

 swatchbook and mix not only do all of that with a few buttons it also enables designers to order and store physical samples of the materials and their information.

Visit the website

Download app