Designer | Product Manager | Growth Marketer
fanrock-draft_system-cover_photo-2.jpg

Fanrock | Draft System UX Design

Our company needed a way to scale up the volume and cadence of content publication to our e-commerce store, while reducing the frequency of human error in data entry.

I led the design of a client-facing User Experience that would allow other sellers on the Shopify platform to scale their businesses as well.

We used data validation to standardize the product data tables, mapped out flows to pre-populate metafields for product/ad campaign creation driven off of scripts, and designed a UI for visually inspecting data, metadata and design assets prior to product creation.

Oh Sheet — The Old System

Oh Sheet — The Old System

We originally used Google Sheets to organize all the metadata needed to publish our Shopify Products and the accompanying Facebook ad campaign that would drive traffic to the landing pages.

The system worked for a time, but as our business scaled and we grew our team, it became unsustainable to expect perfect data entry from every member of the team. It was a nightmare to review the tables looking for spelling errors, and finding an errant comma within a list within a single cell was like finding a needle in a stack of needles.

We used our spreadsheet as the basis for mapping out a taxonomy of all the data fields we would need to build into our own system.

Fanrock Draft Manager Homepage

Fanrock Draft Manager Homepage

With the head of engineering, we created a functional UI to allow the scalable creation of new drafts as well as a way to manage the publication of drafts in-progress.

The Product Type, Platform, and Tag fields allow for the pre-population of an array of metadata required for creating the Shopify product and accompanying Facebook ad campaign.

A Sample Draft

A Sample Draft

Every field corresponds to a piece of information required to create the Shopify product or Facebook ad campaign.

Bundling the file upload fields with the product metadata enables the graphic designers, the production artists, and art director to collaborate on the same page and QA the entire product before it gets created.

Final Review

Final Review

Before launching a new product, art directors have the opportunity to review the assets submit as well as the copy and tagging.

Implementing this system led to a reduction of human error in the creation process by roughly 35%.

We grew our weekly product creation rate by 220%.