Hello. I make things.
MAC Color Play
A corner stone feature of the MAC Cosmetics website rebrand campaign was the Color Play Browser; a innovative experience that allows users to discover all MAC shades, colors & textures from anywhere within the MAC site via a gradient color stripe which emerges from the vertical main navigation menu.
Upon selecting a color from this menu (or by requesting similar color ranges from a product page), the user is launched in to the Color Play experience; a hybrid Flash/HTML/JavaScript application which pulls the color library from the MAC/Estee Lauder database (via the same external JSON RPC Engine I developed for global application usage within the MAC site rebrand project), applies overlay textures based on the returned product library & dynamically sorts the colors with some custom HSL/HSV logic (more on this later).
In addition to color the user may filter by product area, form, finish & coverage. Rolling over any color tile brings up the associated product name (note in the screenshots that the text color is intelligently & dynamically selected, black or white, depending on the product color itself, use as the tooltip background, to insure legibility).
Once the user clicks a tile a “Detail Card“ with information, pricing, add-to-cart & save-to-favorite functionalities is revealed on top of the filtered tile grid. These cards have drag/throw physics applied to allow the user to easily move, rearrange & compare different product cards. A small tooltip & context menu allow the user to tile, arrange or remove the cards. The tiling & arranging functionality applies the same color sorting logic to presented selected cards in HSV spectrum sorting arrangements to assist the user in making their color selections.
Detail cards & their arrangements are remembered from visit to visit so the user can pick up wherever s/he left off. Every product page within the MAC site allows the user to launch in to Color Play with the color of their current product as the default filter – creating a rich interplay to move between this experience & the rest of the sites more traditional e-commerce style product pages.
Several technological innovations were realized related to color theory logic during the development of this product (& later released via Sekati API) such as ColorUtil (documentation); one of the most flexible & full featured color libraries available in ECMAScript.
—
