- This digital property has seen countless variations, user testing, data driven enhancements to the user experience and design over the years but this update was geared around user data and a “simple” statement, “Why can’t I take my project with me?”
Innovation, Problem Solving, Designing however you want to label it. Often as a designer my role is to optimize user experience and enhancing visual design. The magic is being able to achieve that along with streamlining processes and cut company cost. Out of everything that I have contributed while working for BEHR, this contribution is probably my favorite, and it saved the company millions.
When ColorSmart by Behr was launched we had limited visualization capabilities. During its infancy all visualization of paint colors on Behr room scenes were achieved by an outside third party service. The user would select a paint color, click a wall on an image, and the information would be sent out, recolored, and displayed back to the user. This turnaround depending on connection averaged about 4-6 seconds per click, but in 2003 this was cutting edge technology.
Let me back up for just a moment.
My time previous to Behr I was heavily focused in Flash design. I had really honed my skills in achieving animations for websites, preloaders and banner ads in very small file sizes. Back then we are talking kilobytes. Some limitations on banner ads were around the 20-40kb range. I developed a method using Photoshop to extract color value in my raster graphics and mixed this using vector color for the motion. This method gave me the ability to achieve a higher fidelity image, while using vector for the heavy lifting in animation and deliver these results in a much smaller file size.
Shortly after the launch of the web application I proposed that we should move from a singular download to a progressive loading flash experience. The added benefit was to leverage my masking techniques and the vector capabilities inside of flash. Not only did this expand our visualization capabilities it enhanced the user experience by eliminating the time it took for the third party web call and reloading of the painted image on the users computer. The progressive loading meant that the user would only have to download parts of the experience the user was engaging with and not sit through a 5mb download (which at the time took several minutes for our customer). Finally, eliminating the third party web call freed us from an annual 6 figure contract.
With the release of HTML 5 in 2008 we moved away from the Flash experience into using a javascript framework. Which also provided support for using a code based color-fill instead of the vector asset. This coupled with the same raster graphic allowed us to seamlessly maintain this method throughout many iterations of the web, mobile and kiosk applications of ColorSmart by Behr. Not only is this system still used today it’s considered the gold standard benchmark as we move into automated Behr visualization tools.
This technique provides another advantage with automation of production assets across the entire color library. Assets like this example are produced automatically across 5000+ colors multiplied by 3 sets of languages.