Back in 2002, Caremark was a mail-order pharmacy that was just getting its order process online. Their site at the time was filled with marketing offers and sales upgrades that got in the way of the user experience. While doing user research, we learned that users’ biggest frustrations is not knowing where their order was, and when they could expect delivery. To ease their anxiety, they just bypassed the online ordering altogether and called the 800 number, which is exactly what caremark didn’t want them to do. To make matters worse, we would have to hand off designs to their internal dev team, and there were already rumblings that they could not execute or Photoshop comps in HTML.

To solve the problems, we proceeded with a two-pronged strategy. First, we realized we had to design the shortest path between the user and their medications. “First relieve anxiety!” was our battle cry. Once they felt ok about their order status, we reasoned that they would then be much more receptive to other offers and promotions. Our predictions proved correct: calls to the call center decreased by half in the first year, and the click-through rate on internal offers increased 4x.

Next we created what we called a design system. Today, design systems are everywhere but back then it was before HTML5 and CMS systems. Instead of just handing off Photoshop files, we created fully working HTML prototypes, that would show how the code should look in a browser down to the pixel. The code itself was heavily commented, instructing the devs how to build the HTML for that section. We called it “self-documenting code,” because the code itself contained the instructions on how to use it.