Look Builder v2
Product development for Generation Tux look builder.
This project was one of the few times I’ve been able to build a version 2 of a feature that I originally helped build. It was exciting to push this project to be better in all ways for the customer while also refining workflows for all the systems behind the scenes.
Some background
When I first joined Generation Tux the company had a product visualization tool in place. This tool had many issues; cost and speed being the main concern. That 3rd party service was replaced by myself and a small team in 2017.
For the initial build we were under an tight deadline and many parts were dropped from the feature to get it launched in time for a new suits arriving in our warehouse.
I worked on a team of 3 to design, prototype, and user test a new version of the look builder.
Problems to solve
For our initial version we photographed, retouched, masked, and re-colored hundreds of garments. We never wanted to do that again. Since the initial build we transition nearly all of the image assets to rendered 3D images (99% of which was done by Patrick Hill).
With re-photographing assets no longer an issue, since we had the beginnings of a render pipeline in place, we could address the remaining issues with our look builder:
- Look preview not visible while choosing products
- Only 5 of the 11 products types visible in the preview
- Products shown 24 at a time
- Customer confusion on if pants were included
Version 1:
Tooling
In order to show all of our products we needed to have a more robust pipeline. We were getting ready to almost triple the number of image assets we needed to render and manage.
Patrick handled updating our 3D models, textures, and scenes in Blender.
I was responsible for outlining a data model that would let us test new designs with our real product data; which contained thousands of items. I built an asset catalog into our prototype to show all products with our old and new assets. This gave us a list to work towards completion.
I wrote a command line tool that could take the output renders, compress and rename them to match the sku of the product. This tool would reaches out to a shared Google Sheet to map the name appropriately. This allowed our team to quickly update product data and continuously render, rename, and test iterations of images in our prototype.
Prototype
With our images and new pipeline in place we could finally start design and code iterations for the new look builder. We built a responsive prototype using React. We have seen significant traffic from mobile in the past year so we wanted to user test with a prototype on desktop and mobile environments.
During our work we were able to implement solutions to our initial problems.
- infinite scrolling/loading of gallery assets
- always visible compiled preview (even on mobile)
- show all product categories in preview
- resolve confusion about jacket and pants for customers
Testing
We did two rounds of external user tests. After each we adjusted layout and navigation to refine the interactions and reduce errors and confusion. We conducted and reviewed over 30 user tests half being on mobile devices.
Production
Once testing was complete, we worked closely with another 3 developers to integrate our prototype into the production codebase. I sub-tasked all stories necessary to convert the prototype to production code. This process went smoothly and was completed in only a few weeks.
As part of this work a new system was needed for uploading and associating 1000+ images. Our current system required our look builder assets to be added manually one-by-one in a CMS. I helped architect a new workflow that used our sku based naming to allow batch updates for all images to our CDN.
With our new system we can now render, rename and deploy all 1000+ images in a single working day. This process for version 1 would take weeks due to many manual steps.
Since Launch
Since its launch the new version of the look builder is performing well with customers and the business.
- Average time spent on the look builder by customers went up 300%
- Garments selected went up 400-600%; meaning that customers were browsing more products
- Noticeable drop in customer service calls asking if look came with pants
- Category browsing increased by 20%
- Filter use doubled