<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="pnokcbkeah-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#pnokcbkeah-design-gradient-1)">
<defs>
<linearGradient id="pnokcbkeah-design-gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="pnokcbkeah-specialty-svg-01" d="M145.5,28.6c0-0.5-0.3-0.8-0.7-1l-30-8.2l5.2-2.1c0.4-0.2,0.6-0.5,0.6-0.9V3.9c0-0.5-0.4-1-1-1L10.6,0 c-0.2,0-0.4,0-0.5,0.1L0.5,5.6C0.2,5.8,0,6.1,0,6.5V18c0,0.4,0.2,0.7,0.5,0.9l64.2,36.9c0.2,0.1,0.3,0.1,0.5,0.1 c0.3,0,0.6-0.1,0.8-0.4l12.7-16.7l46.5,13.5c0.3,0.1,0.5,0,0.8-0.1L145,41.3c0.3-0.2,0.5-0.5,0.5-0.9L145.5,28.6z M118.5,15.7 l-7.3,3c-0.3,0.1-0.5,0.3-0.6,0.6l-17.2-4.5l25-9.9l0.1,0V15.7z M10.8,2l105.1,2.8l-24.2,9.6c-0.2,0.1-0.3,0.3-0.3,0.5 s0.2,0.4,0.4,0.5l19.3,5c0.1,0.1,0.2,0.1,0.3,0.1l31.2,8.5L125.4,39l-47-13.7c-0.2-0.1-0.4,0-0.5,0.2L65.1,41.3L2.7,6.7L10.8,2z M78.8,26.5l1.9,0.6v10.3l-1.9-0.6V26.5z M81.7,27.3l1.9,0.6v10.3l-1.9-0.6V27.3z M84.7,28.2l2,0.6v10.3l-2-0.6V28.2z M87.7,29.1 l1.9,0.6v10.3l-1.9-0.6V29.1z M90.6,29.9l1.9,0.6v10.3l-1.9-0.6V29.9z M93.5,30.8l1.9,0.6v10.3l-1.9-0.6V30.8z M96.5,31.7l1.9,0.6 v10.3l-1.9-0.6V31.7z M99.4,32.5l1.9,0.6v10.2l-1.9-0.6V32.5z M102.4,33.4l1.9,0.6v10.2l-1.9-0.6V33.4z M105.3,34.2l1.9,0.6V45 l-1.9-0.6V34.2z M108.3,35.1l1.9,0.6v10.2l-1.9-0.6V35.1z M111.2,36l1.9,0.6v10.2l-1.9-0.6V36z M114.2,36.8l1.9,0.6v10.2l-1.9-0.6 V36.8z M117.1,37.7l1.9,0.6v10.2l-1.9-0.6V37.7z M120,38.5l1.9,0.6v10.2l-1.9-0.6V38.5z M123,39.4l1.9,0.6v10.2l-1.9-0.6V39.4z M7.5,10.4v10.2l-2-1.1V9.3L7.5,10.4z M8.5,11l2,1.1v10.2l-2-1.1V11z M11.5,12.7l2,1.1v10.3l-2-1.1V12.7z M14.5,14.3l2,1.1v10.3 l-2-1.1V14.3z M17.5,16l2,1.1h0v10.4l-2-1.1V16z M20.5,17.7l2,1.1v10.5l-2-1.1V17.7z M23.5,19.3l2,1.1V31l-2-1.1V19.3z M26.5,21 l2,1.1v10.6l-2-1.1V21z M29.5,22.7l2,1.1v10.6l-2-1.1V22.7z M32.5,24.3l2,1.1v10.7l-2-1.1V24.3z M35.5,26l2,1.1v10.8l-2-1.1V26z M38.5,27.7l2,1.1v10.8l-2-1.1V27.7z M41.5,29.3l2,1.1v10.9l-2-1.1V29.3z M44.5,31l2,1.1V43l-2-1.1V31z M47.5,32.7l2,1.1v11l-2-1.1 V32.7z M50.5,34.3l2,1.1v11.1l-2-1.1V34.3z M53.5,36l2,1.1v11.1l-2-1.1V36z M56.5,37.7l2,1.1v11.2l-2-1.1V37.7z M59.5,39.3l2,1.1 v11.2l-2-1.1V39.3z M62.5,41l2.2,1.2v11.3l-2.2-1.3V41z M2,7.4l2.5,1.4v10.1L2,17.5V7.4z M65.7,52.6V42.1l12.1-14.9v9.6 c-0.1,0.1-0.2,0.1-0.3,0.3L65.7,52.6z M125.9,49.9v-10l17.6-10.1l0,10.1L125.9,49.9z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="xjxfvfgzzc-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#xjxfvfgzzc-design-gradient-2)">
<defs>
<linearGradient id="xjxfvfgzzc-design-gradient-2" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="xjxfvfgzzc-specialty-svg-02" d="M145,5.6l-9.5-5.5C135.4,0,135.2,0,135,0L26,2.9c-0.5,0-1,0.5-1,1v12.4c0,0.4,0.2,0.8,0.6,0.9l5.2,2.1l-30,8.2 c-0.4,0.1-0.7,0.5-0.7,1l0,11.9c0,0.4,0.2,0.7,0.5,0.9l19.1,10.9c0.2,0.1,0.5,0.2,0.8,0.1l46.5-13.5l12.7,16.7 c0.2,0.3,0.5,0.4,0.8,0.4c0.2,0,0.3,0,0.5-0.1L145,18.9c0.3-0.2,0.5-0.5,0.5-0.9V6.5C145.5,6.1,145.4,5.8,145,5.6z M142.8,6.7 L80.5,41.3L67.7,25.5c-0.1-0.2-0.3-0.2-0.5-0.2L20.2,39L2.9,29.1l31.2-8.5c0.1,0,0.2-0.1,0.3-0.1l19.3-5c0.2-0.1,0.4-0.2,0.4-0.5 c0-0.2-0.1-0.4-0.3-0.5L29.6,4.8L134.8,2L142.8,6.7z M20.6,40l46.1-13.5v10.3L20.6,50.2V40z M27,15.7V4.9l0.1,0l25,9.9l-17.2,4.5 c-0.1-0.3-0.3-0.5-0.6-0.6L27,15.7z M2,29.7l17.6,10.1v10L2,39.9L2,29.7z M68,37.1c-0.1-0.1-0.2-0.2-0.3-0.2v-9.6l12.1,14.9v10.5 L68,37.1z M80.8,53.5V42.2l62.7-34.8v10.1L80.8,53.5z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="xjxfvfgzzc-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#xjxfvfgzzc-design-gradient-2)">
<defs>
<linearGradient id="xjxfvfgzzc-design-gradient-2" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="xjxfvfgzzc-specialty-svg-02" d="M145,5.6l-9.5-5.5C135.4,0,135.2,0,135,0L26,2.9c-0.5,0-1,0.5-1,1v12.4c0,0.4,0.2,0.8,0.6,0.9l5.2,2.1l-30,8.2 c-0.4,0.1-0.7,0.5-0.7,1l0,11.9c0,0.4,0.2,0.7,0.5,0.9l19.1,10.9c0.2,0.1,0.5,0.2,0.8,0.1l46.5-13.5l12.7,16.7 c0.2,0.3,0.5,0.4,0.8,0.4c0.2,0,0.3,0,0.5-0.1L145,18.9c0.3-0.2,0.5-0.5,0.5-0.9V6.5C145.5,6.1,145.4,5.8,145,5.6z M142.8,6.7 L80.5,41.3L67.7,25.5c-0.1-0.2-0.3-0.2-0.5-0.2L20.2,39L2.9,29.1l31.2-8.5c0.1,0,0.2-0.1,0.3-0.1l19.3-5c0.2-0.1,0.4-0.2,0.4-0.5 c0-0.2-0.1-0.4-0.3-0.5L29.6,4.8L134.8,2L142.8,6.7z M20.6,40l46.1-13.5v10.3L20.6,50.2V40z M27,15.7V4.9l0.1,0l25,9.9l-17.2,4.5 c-0.1-0.3-0.3-0.5-0.6-0.6L27,15.7z M2,29.7l17.6,10.1v10L2,39.9L2,29.7z M68,37.1c-0.1-0.1-0.2-0.2-0.3-0.2v-9.6l12.1,14.9v10.5 L68,37.1z M80.8,53.5V42.2l62.7-34.8v10.1L80.8,53.5z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="pnokcbkeah-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#pnokcbkeah-design-gradient-1)">
<defs>
<linearGradient id="pnokcbkeah-design-gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="pnokcbkeah-specialty-svg-01" d="M145.5,28.6c0-0.5-0.3-0.8-0.7-1l-30-8.2l5.2-2.1c0.4-0.2,0.6-0.5,0.6-0.9V3.9c0-0.5-0.4-1-1-1L10.6,0 c-0.2,0-0.4,0-0.5,0.1L0.5,5.6C0.2,5.8,0,6.1,0,6.5V18c0,0.4,0.2,0.7,0.5,0.9l64.2,36.9c0.2,0.1,0.3,0.1,0.5,0.1 c0.3,0,0.6-0.1,0.8-0.4l12.7-16.7l46.5,13.5c0.3,0.1,0.5,0,0.8-0.1L145,41.3c0.3-0.2,0.5-0.5,0.5-0.9L145.5,28.6z M118.5,15.7 l-7.3,3c-0.3,0.1-0.5,0.3-0.6,0.6l-17.2-4.5l25-9.9l0.1,0V15.7z M10.8,2l105.1,2.8l-24.2,9.6c-0.2,0.1-0.3,0.3-0.3,0.5 s0.2,0.4,0.4,0.5l19.3,5c0.1,0.1,0.2,0.1,0.3,0.1l31.2,8.5L125.4,39l-47-13.7c-0.2-0.1-0.4,0-0.5,0.2L65.1,41.3L2.7,6.7L10.8,2z M78.8,26.5l1.9,0.6v10.3l-1.9-0.6V26.5z M81.7,27.3l1.9,0.6v10.3l-1.9-0.6V27.3z M84.7,28.2l2,0.6v10.3l-2-0.6V28.2z M87.7,29.1 l1.9,0.6v10.3l-1.9-0.6V29.1z M90.6,29.9l1.9,0.6v10.3l-1.9-0.6V29.9z M93.5,30.8l1.9,0.6v10.3l-1.9-0.6V30.8z M96.5,31.7l1.9,0.6 v10.3l-1.9-0.6V31.7z M99.4,32.5l1.9,0.6v10.2l-1.9-0.6V32.5z M102.4,33.4l1.9,0.6v10.2l-1.9-0.6V33.4z M105.3,34.2l1.9,0.6V45 l-1.9-0.6V34.2z M108.3,35.1l1.9,0.6v10.2l-1.9-0.6V35.1z M111.2,36l1.9,0.6v10.2l-1.9-0.6V36z M114.2,36.8l1.9,0.6v10.2l-1.9-0.6 V36.8z M117.1,37.7l1.9,0.6v10.2l-1.9-0.6V37.7z M120,38.5l1.9,0.6v10.2l-1.9-0.6V38.5z M123,39.4l1.9,0.6v10.2l-1.9-0.6V39.4z M7.5,10.4v10.2l-2-1.1V9.3L7.5,10.4z M8.5,11l2,1.1v10.2l-2-1.1V11z M11.5,12.7l2,1.1v10.3l-2-1.1V12.7z M14.5,14.3l2,1.1v10.3 l-2-1.1V14.3z M17.5,16l2,1.1h0v10.4l-2-1.1V16z M20.5,17.7l2,1.1v10.5l-2-1.1V17.7z M23.5,19.3l2,1.1V31l-2-1.1V19.3z M26.5,21 l2,1.1v10.6l-2-1.1V21z M29.5,22.7l2,1.1v10.6l-2-1.1V22.7z M32.5,24.3l2,1.1v10.7l-2-1.1V24.3z M35.5,26l2,1.1v10.8l-2-1.1V26z M38.5,27.7l2,1.1v10.8l-2-1.1V27.7z M41.5,29.3l2,1.1v10.9l-2-1.1V29.3z M44.5,31l2,1.1V43l-2-1.1V31z M47.5,32.7l2,1.1v11l-2-1.1 V32.7z M50.5,34.3l2,1.1v11.1l-2-1.1V34.3z M53.5,36l2,1.1v11.1l-2-1.1V36z M56.5,37.7l2,1.1v11.2l-2-1.1V37.7z M59.5,39.3l2,1.1 v11.2l-2-1.1V39.3z M62.5,41l2.2,1.2v11.3l-2.2-1.3V41z M2,7.4l2.5,1.4v10.1L2,17.5V7.4z M65.7,52.6V42.1l12.1-14.9v9.6 c-0.1,0.1-0.2,0.1-0.3,0.3L65.7,52.6z M125.9,49.9v-10l17.6-10.1l0,10.1L125.9,49.9z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="pnokcbkeah-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#pnokcbkeah-design-gradient-1)">
<defs>
<linearGradient id="pnokcbkeah-design-gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="pnokcbkeah-specialty-svg-01" d="M145.5,28.6c0-0.5-0.3-0.8-0.7-1l-30-8.2l5.2-2.1c0.4-0.2,0.6-0.5,0.6-0.9V3.9c0-0.5-0.4-1-1-1L10.6,0 c-0.2,0-0.4,0-0.5,0.1L0.5,5.6C0.2,5.8,0,6.1,0,6.5V18c0,0.4,0.2,0.7,0.5,0.9l64.2,36.9c0.2,0.1,0.3,0.1,0.5,0.1 c0.3,0,0.6-0.1,0.8-0.4l12.7-16.7l46.5,13.5c0.3,0.1,0.5,0,0.8-0.1L145,41.3c0.3-0.2,0.5-0.5,0.5-0.9L145.5,28.6z M118.5,15.7 l-7.3,3c-0.3,0.1-0.5,0.3-0.6,0.6l-17.2-4.5l25-9.9l0.1,0V15.7z M10.8,2l105.1,2.8l-24.2,9.6c-0.2,0.1-0.3,0.3-0.3,0.5 s0.2,0.4,0.4,0.5l19.3,5c0.1,0.1,0.2,0.1,0.3,0.1l31.2,8.5L125.4,39l-47-13.7c-0.2-0.1-0.4,0-0.5,0.2L65.1,41.3L2.7,6.7L10.8,2z M78.8,26.5l1.9,0.6v10.3l-1.9-0.6V26.5z M81.7,27.3l1.9,0.6v10.3l-1.9-0.6V27.3z M84.7,28.2l2,0.6v10.3l-2-0.6V28.2z M87.7,29.1 l1.9,0.6v10.3l-1.9-0.6V29.1z M90.6,29.9l1.9,0.6v10.3l-1.9-0.6V29.9z M93.5,30.8l1.9,0.6v10.3l-1.9-0.6V30.8z M96.5,31.7l1.9,0.6 v10.3l-1.9-0.6V31.7z M99.4,32.5l1.9,0.6v10.2l-1.9-0.6V32.5z M102.4,33.4l1.9,0.6v10.2l-1.9-0.6V33.4z M105.3,34.2l1.9,0.6V45 l-1.9-0.6V34.2z M108.3,35.1l1.9,0.6v10.2l-1.9-0.6V35.1z M111.2,36l1.9,0.6v10.2l-1.9-0.6V36z M114.2,36.8l1.9,0.6v10.2l-1.9-0.6 V36.8z M117.1,37.7l1.9,0.6v10.2l-1.9-0.6V37.7z M120,38.5l1.9,0.6v10.2l-1.9-0.6V38.5z M123,39.4l1.9,0.6v10.2l-1.9-0.6V39.4z M7.5,10.4v10.2l-2-1.1V9.3L7.5,10.4z M8.5,11l2,1.1v10.2l-2-1.1V11z M11.5,12.7l2,1.1v10.3l-2-1.1V12.7z M14.5,14.3l2,1.1v10.3 l-2-1.1V14.3z M17.5,16l2,1.1h0v10.4l-2-1.1V16z M20.5,17.7l2,1.1v10.5l-2-1.1V17.7z M23.5,19.3l2,1.1V31l-2-1.1V19.3z M26.5,21 l2,1.1v10.6l-2-1.1V21z M29.5,22.7l2,1.1v10.6l-2-1.1V22.7z M32.5,24.3l2,1.1v10.7l-2-1.1V24.3z M35.5,26l2,1.1v10.8l-2-1.1V26z M38.5,27.7l2,1.1v10.8l-2-1.1V27.7z M41.5,29.3l2,1.1v10.9l-2-1.1V29.3z M44.5,31l2,1.1V43l-2-1.1V31z M47.5,32.7l2,1.1v11l-2-1.1 V32.7z M50.5,34.3l2,1.1v11.1l-2-1.1V34.3z M53.5,36l2,1.1v11.1l-2-1.1V36z M56.5,37.7l2,1.1v11.2l-2-1.1V37.7z M59.5,39.3l2,1.1 v11.2l-2-1.1V39.3z M62.5,41l2.2,1.2v11.3l-2.2-1.3V41z M2,7.4l2.5,1.4v10.1L2,17.5V7.4z M65.7,52.6V42.1l12.1-14.9v9.6 c-0.1,0.1-0.2,0.1-0.3,0.3L65.7,52.6z M125.9,49.9v-10l17.6-10.1l0,10.1L125.9,49.9z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="xjxfvfgzzc-Layer_1" x="0px" y="0px" viewBox="0 0 145.5 55.9" style="enable-background:new 0 0 145.5 55.9;" xml:space="preserve" fill="url(#xjxfvfgzzc-design-gradient-2)">
<defs>
<linearGradient id="xjxfvfgzzc-design-gradient-2" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="xjxfvfgzzc-specialty-svg-02" d="M145,5.6l-9.5-5.5C135.4,0,135.2,0,135,0L26,2.9c-0.5,0-1,0.5-1,1v12.4c0,0.4,0.2,0.8,0.6,0.9l5.2,2.1l-30,8.2 c-0.4,0.1-0.7,0.5-0.7,1l0,11.9c0,0.4,0.2,0.7,0.5,0.9l19.1,10.9c0.2,0.1,0.5,0.2,0.8,0.1l46.5-13.5l12.7,16.7 c0.2,0.3,0.5,0.4,0.8,0.4c0.2,0,0.3,0,0.5-0.1L145,18.9c0.3-0.2,0.5-0.5,0.5-0.9V6.5C145.5,6.1,145.4,5.8,145,5.6z M142.8,6.7 L80.5,41.3L67.7,25.5c-0.1-0.2-0.3-0.2-0.5-0.2L20.2,39L2.9,29.1l31.2-8.5c0.1,0,0.2-0.1,0.3-0.1l19.3-5c0.2-0.1,0.4-0.2,0.4-0.5 c0-0.2-0.1-0.4-0.3-0.5L29.6,4.8L134.8,2L142.8,6.7z M20.6,40l46.1-13.5v10.3L20.6,50.2V40z M27,15.7V4.9l0.1,0l25,9.9l-17.2,4.5 c-0.1-0.3-0.3-0.5-0.6-0.6L27,15.7z M2,29.7l17.6,10.1v10L2,39.9L2,29.7z M68,37.1c-0.1-0.1-0.2-0.2-0.3-0.2v-9.6l12.1,14.9v10.5 L68,37.1z M80.8,53.5V42.2l62.7-34.8v10.1L80.8,53.5z"></path>
</svg>
Helping buyers find products with fewer clicks
A developer of pharmaceutical formulation solutions gets a brand-compliant Craft CMS website to modernize their online presence and help users find products quickly.
Helping buyers find products with fewer clicks
A developer of pharmaceutical formulation solutions gets a brand-compliant Craft CMS website to modernize their online presence and help users find products quickly.
Ask
A division of the global BASF brand, this team of pharmaceutical experts needed to modernize their online presence while adhering to the broader organization’s brand guidelines. One key goal was to help users navigate the site’s complex structural hierarchy in fewer clicks and streamline their experience.
Solution
By kicking off the project with a series of exercises designed to pinpoint user personas and journeys, our web team started the project with a solid understanding of the client’s core users. We designed the site to work effectively for a wide spectrum of audience types that were key to their success.
Powered by Craft CMS, the website meets each one of the client’s visual and functional requirements, along with three standout features called Product Finder, Learning Center, and Speak with an Expert.
The Product Finder is a series of filters and text inputs that allow users to search through more than 115 products in just a few clicks. In a major import exercise, Craft’s FeedMe plugin helped to pull in massive amounts of product data that now power key areas of this feature.
Built from the ground up, the Learning Center showcases the client’s wealth of publicly available resources and learning materials. We paid special attention to areas that were key to the client’s content outreach, including branded features that promote their podcasts — for example, real embeds brought in via Podigy allow users to listen directly on the website.
With its multi-region support, the Speak with an Expert functionality allows users to reach global pharmaceutical experts with one click of the mouse from almost anywhere on the website. A custom “speak with an expert” page helps users quickly identify the relevant expert in any scenario.
Craft CMS supported all this with robust capabilities, such as strong search functionality and the ability to customize the site’s back end, which we carefully crafted to allow simple content authoring from the client’s side.
The result was a state-of-the-art website that is visually impressive, user-friendly, and performant. Beyond that, it quickly and intuitively connects users with the content they’re searching for.
