<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="hsrdvkllej-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(#hsrdvkllej-design-gradient-1)">
<defs>
<linearGradient id="hsrdvkllej-design-gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="hsrdvkllej-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="gwhqwendob-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(#gwhqwendob-design-gradient-2)">
<defs>
<linearGradient id="gwhqwendob-design-gradient-2" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="gwhqwendob-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="gwhqwendob-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(#gwhqwendob-design-gradient-2)">
<defs>
<linearGradient id="gwhqwendob-design-gradient-2" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="gwhqwendob-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="hsrdvkllej-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(#hsrdvkllej-design-gradient-1)">
<defs>
<linearGradient id="hsrdvkllej-design-gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="hsrdvkllej-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="hsrdvkllej-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(#hsrdvkllej-design-gradient-1)">
<defs>
<linearGradient id="hsrdvkllej-design-gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="hsrdvkllej-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="gwhqwendob-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(#gwhqwendob-design-gradient-2)">
<defs>
<linearGradient id="gwhqwendob-design-gradient-2" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="10%"></stop>
<stop offset="100%"></stop>
</linearGradient>
</defs>
<path class="gwhqwendob-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>
A B2B e-commerce site with fluid UX
An industrial magnetics manufacturer gets a new e-commerce website with a Product Finder tool, streamlined checkout, and intuitive user experience.
A B2B e-commerce site with fluid UX
An industrial magnetics manufacturer gets a new e-commerce website with a Product Finder tool, streamlined checkout, and intuitive user experience.
Ask
With multiple sub-brands encompassing hundreds of products available for sale, Industrial Magnetics, Inc. (IMI) needed to modernize its old website infrastructure to better support its B2B sales team, streamline the user experience, and enable customers to make quick, easy online purchases.
Solution
With entries for 15 industries, dozens of applications and sub-applications, and more than 250 product listings, the first step was to help IMI sort through the sheer number of assets required for the website. We used technologies like Notion and its Databases system, along with a series of custom templates, to simplify content entry and consolidate information consistently. Using Figma, we added helpful context to the design and content creation process with visual examples.
Then it was a matter of making all that content easy for users to navigate. Building on the brand’s bold visual style, our web team designed eye-catching highlights, icons, and CTAs to draw the user’s attention to the right areas. The site’s meganav breaks down its many internal categories in an intuitive way, helping users navigate sections quickly.
A new website category improves the presentation of IMI’s sub-brands, highlighting them in a more unified way and allowing users to browse products by brand. Existing areas of the site, such as sections for products, events, and resources, now feature enhanced visuals and functionality.
Our developers also tackled the e-commerce portion of the site, which is powered by an interactive “Product Finder” function that lets users filter through products by brand, type, and more. Buyers can now shop certain types of products directly through the site with a streamlined cart and checkout process.
The result is a user experience that clarifies IMI’s many offerings and simplifies the process of ordering the products, parts, and accessories they need. The site launch was covered in Powder & Bulk Solids.
