THE RESULT

THE CHALLENGE & THE JOURNEY

Understanding Dreamworks Animation Pipeline

Many of NOVA's tools were originally born in the Dreamworks Animation studios. They were tailored to solve animation pipeline problems and improve that process. The result was very successful for them, so it was crucial to fully understand the entire history of the products and solutions. Next, the challenge was to translate those tools to work for retail product design and eCommerce photography.

Understanding Retail Product Design

Since we were designing tools for Retail Product Designers, it was crucial to understand as much as possible about their current workflows. Extensive research, interviews, and various exercises had to be conducted before design of the tools could begin. The NOVA platform's goal was to translate their partially digital workflows into a total digital process. It was important to incorporate the best aspects of those workflows into the new tools, while solving the pain points the designers were experiencing with their current process.

Platform Start: Asset Management

NOVA has a suite of tools to use for each step in the process of Retail Product Design. I was responsible for the Asset Management System, which is both the first tool and the backbone of the entire pipeline. This is where all files, design, assets, 3D models are stored. It's also where alerts, renders, and collaboration take place.

Platform End: Virtual Photography

The final step in the platform is the Virtual Photography tool, which is where a Photographer or Art Director sets up different angles of 3D products that are staged within a virtual studio. Each product can be photographed individually, or entire catalogs can be quickly batch 'photographed' and rendered as product images for presentations or eCommerce sites.

THE ASSET MANAGEMENT SYSTEM

Physical Samples & Collaboration

Current industry-wide retail product design relies heavily on physical samples. Moving to an almost entirely digital process helps reduce waste, but is only helpful if the digital representations are detailed and large enough for designers to feel they're making accurate judgment calls. Additionally, they rely heavily on physical color and fabric books to make choices - often viewing them under different lighting scenarios. This was a crucial aspect to incorporate into the digital process. Research uncovered that coordination of up-to-date palettes and assets would be improved with a digital library. The one part of their current process that was important to retain was the feedback / collaborative process of teams sitting in a room together for reviews and ideation sessions.

Mapping Pipelines

Once research filled in the knowledge gap of a retail design pipeline, the next step was to map it to the new Asset Management System, which had been constructed for an animation studio's pipeline. It turned out to the two pipelines were entirely different. This discovery led to understanding technology and interface changes that needed to be made to the underlying platform. Dreamworks had been set up to have open access across departments; it was uncovered that a similarly open system wouldn't serve the needs in the retail environment, so permissions and user access mapping had to be put into place. I worked together with the programmers and engineers to plan the product development stages that made the most sense to meet user needs, while being realistic to NOVA's resources.

Card Sorting

With the help of a UX Researcher I hired, we conducted open card sorts with cards that had five data points meant to describe a file. Although each card had the same set of data points, the order in which they were displayed on each card was randomized each time to ensure the patterns that emerged weren't accidentally influenced. In the end, a clear pattern emerged in how they would organize various files: first, by season; second, by product category.

Interviews

Interviews were also conducted to understand the way different Retail Product Designers had files and assets organized within the companies they worked for. They used shared servers, which were often separated depending on what product design group they were in (example: handbags vs women's clothing). They all also had PLM (Product Line Management) systems, however the designers avoided using them, because they found the experience to be overcomplicated.

Hierarchy & Libraries

Based on everything learned through the research, I designed the information architecture of the asset system to be a seasonal > category based structure. I also separated color palettes, material palettes, & product parts into a browsable shared library system. The idea behind this was to have a single "source of truth" for approved assets that designers could work with. An archive was added as well, because research showed designers typically worked on 3-5 seasons at a time, and past seasons would only clutter the "currently active projects" area.

Browsing & Large Images

Research revealed that designers strongly preferred browsing over searching (PLM systems are heavily search-based), so the interface was designed to focus on that. The research also revealed the importance of having large images, especially for items like materials, as it's crucial to the process for them to see highly detailed samples to make choices from. Other times, it was better to have a list view, so multiple file view options were made available.

Metadata, Versioning & Collaboration

Each asset could have its status updated, metadata added to improve searching, and capabilities for tracking shared resources. Additionally, there was a very powerful versioning system that had come from Dreamworks, which I designed to be integrated with feedback to incorporate collaboration.

Organization

Every library was designed with features that allowed for further organization, which made it easy for any designer to browse through collections and find whatever they wanted to use in their product designs.

VIRTUAL PHOTOGRAPHY

Reviewing Research

The bulk of research for Virtual Photography had already been completed by the time I started on the project. A requirements document had also already been written, and originally the plan was for this to be two separate products. The first product was for setting up scenes with angles and lighting; the second was for producing product images with scenes previously set up. I reviewed all the research and then compiled a list of the unanswered questions I had. Luckily, we had several professional photographers readily available for me to talk to.

Quick First Pass Wireframes

I had less than a week to come up with a first pass at the wireframes due to the development start date. After reading through everything and sketching out ideas, I decided that two products were unnecessary. It made the most sense to have a single Virtual Photography product. My first wireframes incorporated the features that had been written in the original requirements document. Many of those features were heavily derived from 3D software programs and traditional photography processes, including physical camera features.

Reexamining 3D Features

It made sense that the product team, having come from Dreamworks & being experts in 3D software, assumed many of the features most 3D software programs contained should be included - especially the quad-view and the level of detail options (wire, low poly & high quality). However, our Virtual Photography product was meant to be used by Retail Product Designers, so I questioned if these features would be helpful or hindering.

Design For The Target Audience

The original research, and subsequent research, revealed that Retail Product Designers were unfamiliar with 3D software, and expressed a strong dislike for its complexity. They primarily used 2D software programs like Photoshop and Illustrator. Tests showed that, even when offered the option to turn on multiple views, they wouldn't enable it, as they were most comfortable working with a single view. As a result, I removed these unnecessary features.

Further Research & An Epiphany

Luckily for me, we had several amazing photographers who worked at NOVA. One, in particular, was always incredibly helpful to me, and happy to answer any questions I had. He also came from Dreamworks, so he was very familiar with 3D software as well. I spoke with him many times, and during one of our talks, when I asked about various "real life" camera features that were planned to be built-in, he asked me "Is this a 3D camera?". Of course, I said "yes", to which he responded, "If the 'fake' camera doesn't behave EXACTLY as a real camera would, I would be annoyed." As a result, I set off to conduct extensive research on cameras and how they function. My research, combined with these conversations reminded me of a scene from the movie High Strung, where the main character describes buying watermelon popsicles.

Don't Build A Watermelon Popsicle With Seeds

In the quest to design tools to be familiar for traditional photographers, the original requirement document mirrored traditional camera features. However, through my research into how cameras work, I realized the features were there for two reasons: first, creating a desired effect, and secondly, they were necessary due to the limitations of a physical camera. Therefore, I set out to understand what the END RESULT they desired to achieve was using various settings, lenses, shutter speeds, etc. I then designed the tool to easily put these desired effects front and center, without mapping to all the ANNOYING physical limitations of a 'real' camera. We were moving eCommerce photography into a virtual world, and so it made no sense to restrain ourselves, and our audience, by the real-life limitations of physical cameras.

Removing Seeds & Improving Controls

I swept back through the product and removed any controls that were "watermelon seeds" (unnecessary with a virtual camera). As a team, we decided Virtual Photography shouldn't be simplified to the point of being "Instagramy", as we wanted to maintain a high-quality level of control. For the controls we kept, I redesigned them until the user experience was just right.

Changing The Shot List

Based on research, an important aspect of current eCommerce photography process was a "shot list". This was because of the large number of samples that needed to be photographed at different angles. Originally, the Product Team had come up with an idea to import an Excel spreadsheet (which is what most of them used) into Virtual Photography to check off angles as they went along. With the two tools combined into one, the shot list was no longer necessary, as all the angles would be batch-processed for any products of a certain type (example: shoes, purses, etc.).

Style Guide & Atomic Design

Colors & Fonts

I was also responsible for developing the style guides for all NOVA products and ensuring proper implementation. I consistently checked for good levels of contrast since the interface was mostly grayscale. I also made sure all type was set to a legible size.

Iconography

I oversaw the design of all icons and illustrations used within the product interfaces. Some I illustrated myself, while others were created by a designer I hired in order to meet tight deadlines.

Atomic Design

NOVA's Asset Management System was dark-on-light, while the other products including Virtual Photography were light-on-dark. I created an Atomic Design system for both looks that could be used interchangeably across all products.

Collaboration With Developers

NOVA had very large internal teams of developers, but also used external development vendors. To ensure consistency and reduce front-end tech debt, I built a shared Atomic Style Guide in which developers could place code for other developers to use.