The Issue: Product Information in a Digital World

It’s hard to imagine in today’s social media, digital photography-heavy landscape, but M·A·C founders Frank Toskan and Frank Angelo launched Make-Up Art Cosmetics in response to the fact that back in 1984, makeup didn’t photograph well. Their first makeup counter in a Toronto store was dedicated to only employing professional makeup artists and selling high-quality products that looked beautiful in any circumstance. Today, M·A·C is sold in over 120 countries around the world and is one of the most recognized brands in beauty. Because M·A·C has a reputation for hiring only highly-skilled makeup artists, M·A·C employees are expected to know everything about its vast collection of products. From ingredients to benefits, customers look to M·A·C artists to advise them on one of their most personal aspects: their makeup. The problem? Accessing product information in an extensive and cumbersome Product Knowledge Manual was time-consuming and inconvenient at best. It was clear: M·A·C needed a digital, searchable, and hyper-accessible way for artists to access product information the moment they needed it. Doing so could allow them to continue providing the five-star customer service M·A·C was known for every day, with every customer, and every product.

Customer Requirements:

  • Had to be easy to access
  • Easy to navigate (quick info lookup)
  • Must work on mobile devices (mostly iPad)
  • Should work offline
  • Must look and feel like a MAC branded product

The Journey: A Beautiful Solution

After one look at the archaic Product Knowledge Manual, ELM decided to create a carefully designed custom intranet site with M·A·C branding and a powerful search engine easily accessible for M·A·C artists on mobile devices. The solution also addressed the M·A·C technical team’s initial worries about mobile response times and varying bandwidth speeds. And, because data is power, ELM also implemented Google Analytics to monitor how many M·A·C artists were using the site to give management a better idea of how, when, and where the site was being accessed.

The Design

The design was inspired by the M·A·C consumer website. Taking texture, color, font and tone from the website created a stunning yet simple visual presentation.

Approach to Product Development

We were very close with subject matter experts at Estée Lauder (parent company) to develop a tool that would not only meet their current needs, but be developed in a way that it could be easily extended in the future. We chose to create a simple flat-file CMS that didn’t need to be connected to the internet or database to function. All query and responses were handled and rendered by the front-end through Angular.js and Express.js. We also built a custom search feature that allowed for instant lookup/search of all the products in the catalog including keywords and SKU numbers.

The Outcome: Saving the Environment (and the Bottom Line)

While saving time was the end goal, the new online manual also resulted in a huge budget savings, too. Updating, printing, and shipping the PKM all over the world cost $300,000 each time—not to mention multiple hours spent by various team members updating the content, managing tedious printing specifications with vendors, and coordinating shipments to 150+ locations around the globe. What’s more, each new product launch rendered the PKM out-of-date, requiring a reprint. Moving to a digital version allowed M·A·C to provide the most current content to a wider audience—for only 17% of the cost. It can be updated in real time and continues to be instrumental in giving customers the five-star service they expect from M·A·C artists. Overall, the ROI for this project was 336%; results that are more than just skin deep.