Editing Products: finding the right level of customization 

 

I have selected some of the most important developments that have driven product at LOOKCAST. This could be seen as a fun record for me, a possible education for those interested in product management and insight into "how I think."

 
 

One of the core value propositions of LOOKCAST is the ability for users to embed product details within their beautiful marketing images. A lookbook is an immersive/dynamic tool to convey the story about a brand or collection. Lookbooks are not catalogs, as catalogs forgo much of the artistic variability that are typically the purview of lookbooks. At the same time, a lookbook is not just a "picture book". Lookbooks are a tool for communication/marketing and sales. Being able to include pricing and product information is a must.

In LOOKCAST 3x we released a new feature called "product hotspots". Basically these are icons that open product details when clicked. A LC user can position them anywhere on their lookbook page, and when their audience clicks on the hotspot they see product details that correspond to that page. It's a wonderful way to embed "messy" product information while keeping campaign images beautiful and clean. 

 
 
 

We updated our HTML text editor to allow greater font customization. This customization helped us really feel the style limitations within our hotspot product display.

 
 
 

So we gathered our most common requests for hotspot editing from our customers and started designing. Scale, color, opacity and icon type were the most frequently requested feature updates. Still there was the UX challenge of adding yet another type of content editing to our already robust Lookbook Editor.

I knew that we had to tread carefully, and that even a solid improvement would have to be learned & adopted by our users. I like to say that nothing is as intuitive as what you already know, and software updates have typically not respected this fact. Obviously improvements must be made, but the key is to have empathy for all the people that think they know how to use your software until they discover you updated it!

The mockup below shows one of my earlier explorations (total of 8 variations that I won't bore you with). Benefits of this design were a WYSIWYG product display and clearer hotspot editing, however a main concern was the scale and usability of the product/hotspot modal. As the browser window scaled down this design became less and less usable.  Additionally, even on larger screen sizes, there were many instances where the product/hotspot editing modal would cover the hotspot on the canvas/artboard. This became a bigger issue than I initially thought, as showing a preview of the hotspot within the modal didn't actually offer much help to users. The problem was that our hotspots had opacity & color values that were user controlled, and as any designer knows, both of those values are completely contextual and in our case tied to the background image, which again was a users generated.  

 
 
 Helpful WYSIWYG product display helps users understand that hotspots = products

Helpful WYSIWYG product display helps users understand that hotspots = products

 The hotspot needed a preview became problematic

The hotspot needed a preview became problematic

 

Both of these issues led us to design a modal that would cover the entire artboard. This simplified the app by limiting a users choices while editing product details & hotspots and enabled us to show a "window/cutout" showing the hotspot on it's real background!

 
 
 

One month after this release product creation and hotspot customizing grew by over 300%. If you would like you can learn more about this features check out the video below: