CINXE.COM
eDesign Interactive | Weaver Popcorn
<!DOCTYPE html> <html id="html" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>eDesign Interactive | Weaver Popcorn</title> <meta name="description" content="An interactive website design built for the king of popcorn. We worked on creating fantastic 3D animations and original motion graphics. The meticulous in-house research and data validation was of upmost importance for building a global website catering to different B2B and B2C audiences." /> <meta property="og:description" content="An interactive website design built for the king of popcorn. We worked on creating fantastic 3D animations and original motion graphics. The meticulous in-house research and data validation was of upmost importance for building a global website catering to different B2B and B2C audiences." /> <meta property="og:title" content="eDesign Interactive | Weaver Popcorn" /> <link rel="alternate" hreflang="en" href="https://edesigninteractive.com/portfolio/popweaver" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image" content="https://edesigninteractive.com/images/edesign-og-image.jpg" /> <meta name="google-site-verification" content="4NTvTTVdAanBjjIGvppT8AB5sDAopwxxf67br4WKuHY" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#fff"> <link rel="icon" href="/images/fav.ico" type="image/gif" > <link rel="stylesheet" href="/css/style.css?v=20240207.2" preload> <!-- javascript roots --> <script type="text/javascript"> var _root = '/' , _root_full = 'https://edesigninteractive.com/' , _controller = 'portfolio' , _action = 'view' , _url_for = 'https://edesigninteractive.com/portfolio/popweaver' , _lang = 'en' , _langs = '[{"name":"English"}]' , _base = 'https://edesigninteractive.com/' , _timezone_offset = '-5'; </script> <!-- Facebook Pixel Code --> <script> !function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '509962736315210'); fbq('track', 'PageView'); </script> <noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=509962736315210&ev=PageView&noscript=1"/> </noscript> <!-- End Facebook Pixel Code --> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-66869522-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-66869522-1'); </script> <script type="text/javascript"> _linkedin_partner_id = "1850098"; window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; window._linkedin_data_partner_ids.push(_linkedin_partner_id); </script><script type="text/javascript"> (function () { var s = document.getElementsByTagName("script")[0]; var b = document.createElement("script"); b.type = "text/javascript"; b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; s.parentNode.insertBefore(b, s); })(); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=1850098&fmt=gif" /> </noscript> <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-66869522-1', 'auto'); ga('send', 'pageview'); </script> </head> <body id="body"> <!-- script to swap images with webp for _controller = 'healthcare_marketing' --> <script> // Function to check if the browser supports WebP function supportsWebP() { var elem = document.createElement('canvas'); if (!!(elem.getContext && elem.getContext('2d'))) { // was able or not to get WebP representation return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0; } return false; } // Function to replace image sources based on browser support function replaceImages() { $('img').each(function() { var originalSrc = $(this).attr('data-src') || $(this).attr('src') ; var webpSrc = originalSrc.replace(/\.(jpg|jpeg|png)$/, '.webp'); if (supportsWebP()) { if($(this).attr('src')){ $(this).attr('src', webpSrc); } if(!$(this).attr('data-src')){ $(this).attr('data-src', webpSrc); } } }); } document.addEventListener('DOMContentLoaded', function() { if(_controller === 'healthcare_marketing'){ replaceImages(); } }); </script> <div class="preloader"> <div class="preloader-box"> <div id="preloader"></div> </div> </div> <div class="cursor"> <div class="cursor__inner cursor__inner--circle"></div> <div class="cursor__inner cursor__inner--dot"></div> </div> <div class="cursor"> <div class="circle-cursor circle-cursor--inner"></div> <div class="circle-cursor circle-cursor--outer" data-width="100px" data-height="100px"> <span class="prev-cursor-arr"></span> <div class="cursor-in"> <img src="/images/icons/close_cursor.svg" alt="Close cursor" class="cursor-in-img none"> </div> <span class="next-cursor-arr"></span> <span class="next-click-cursor"> <img src="/images/icons/right-drag.svg" alt=""> </span> <span class="prev-click-cursor"> <img src="/images/icons/left-drag.svg" alt=""> </span> </div> </div> <div id="menu" class="menu"> <div class="menu-container"> <div class="menu-container-box"> <div class="menu-container-wrap center"> <div class="menu-link-box"> <div class="menu-link content__text"> <a href="/" class=" content__text-inner">Home</a> </div> </div> <div class="menu-link-box"> <div class="menu-link smaller"> <a href="/about" class="splitByLinesChars">About</a> </div> <span class="symbol_b op_0">/</span> <div class="menu-link smaller"> <a href="/team" class="splitByLinesChars">Team</a> </div> <span class="symbol_b op_0">/</span> <div class="menu-link smaller"> <a href="/careers" class="splitByLinesChars">Careers</a> </div> </div> <div class="menu-link-box"> <div class="menu-link active"> <a href="/portfolio"> <span class="text-b-b splitByLinesChars">Projects</span> <button class="text-b btn red op_0">View our portfolio </button> </a> </div> </div> <div class="menu-link-box"> <div class="menu-link"> <a href="/services" class="splitByLinesChars">Services</a> </div> </div> <div class="menu-link-box"> <div class="menu-link"> <a href="/blog" class="splitByLinesChars">Blog</a> </div> </div> <div class="menu-link-box"> <div class="menu-link"> <a href="/contact" class="splitByLinesChars">Contact</a> </div> </div> <div class="menu-link-box-social"></div> <div class="menu-privacy-policy-links mpp op_0"> <a href="/terms">Terms and Conditions</a> </div> </div> </div> </div> </div> <span class="hover-circle-inner burger-menu hover-circle-box" id="burgerMenu"> <div class="hover-circle"> <div class="parallaxMoveElem parallaxMoveCircle"></div> </div> <div class="sticked-circle"></div> <svg class="ham hamRotate ham1 none" viewBox="0 0 100 40" width="60"> <path class="line top" d="m 30,0 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40"></path> <path class="line middle" d="m 30,17 h 40"></path> <path class="line bottom" d="m 30,35 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40"></path> </svg> <span id="hamburgerAnimation"></span> </span> <h1 class="hover-circle-inner header-logo op_0"> <a aria-label="logo link" href="/" class=""> <svg version="1.1" viewBox="0 0 51.035 50.929"> <path fill="#FFF" d="M31.417 50.929c3.238-.162 4.868-1.05 7.45-4.046 2.582-2.998 3.443-3.448 6.452-6.229 3.01-2.781 3.238-8.516 3.195-10.564-.042-2.05.555-9.72 2.277-17.359 1.723-7.641-6.275-6.406-7.379 2.678-.932 9.149-5.697 6.431-9.177 1.103-3.479-5.326-8.245-13.388-9.518-15.368-1.272-1.982-3.669-.881-4.125-.435-.456.445-2.143.967.476 5.504 2.619 4.536 6.147 11.39 6.555 12.354.408.962-.659 1.084-1.746.229-1.084-.854-13.047-11.698-14.719-13.178-1.672-1.483-3.096-1.03-4.319.204-1.223 1.237-.679 2.9.87 4.465 1.549 1.566 12.319 12.806 13.765 14.316 1.113 1.164-.113 2.459-2.057 1.231-1.945-1.228-12.647-8.738-13.797-9.516-1.15-.776-2.62-1.059-4.293.529s.123 3.565.735 4.111c.612.544 14.294 10.747 15.274 11.359.98.613.799 2.883-1.921 1.771-2.72-1.113-9.693-4.159-11.151-4.662-1.458-.505-3.211-1.104-4.04 1.144-.828 2.248.726 2.888 3.267 4.354 2.904 1.678 14.644 9.945 17.937 12.687 4.09 3.404 9.989 3.318 9.989 3.318z"/> </svg> </a> </h1> <div class="copyright-box op_0"> <div class="copyright vTextLR">© 2004-2024</div> </div> <div class="burger-box op_0"> <div class="burger"> <div class="burger-text"></div> <div class="burger-dots"></div> </div> </div> <a aria-label="Contact us" href="/contact" class="get-in-touch-box op_0"> <div class="get-in-touch vTextLR"> <div class="get-in-touch-icon"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18.667px" height="22.834px" viewBox="0 0 18.667 22.834" enable-background="new 0 0 18.667 22.834" xml:space="preserve"> <path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M1.167,20.065V2.923c0-0.785,0.625-1.429,1.388-1.429h10.102 c0.764,0,1.388,0.644,1.388,1.429v2.858h3.123l-3.123,3.713v10.571c0,0.787-0.624,1.431-1.388,1.431H2.554 C1.791,21.496,1.167,20.853,1.167,20.065z"/> <path id="contact-us-2" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M7.278,5.505 c0.553,0,1,0.447,1,1c0,0.551-0.447,1-1,1s-1-0.449-1-1C6.278,5.953,6.725,5.505,7.278,5.505z"/> <path id="contact-us-3" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M7.278,15.506 c0.553,0,1,0.447,1,1c0,0.551-0.447,1-1,1s-1-0.449-1-1C6.278,15.953,6.725,15.506,7.278,15.506z"/> <path id="contact-us-4" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M7.278,10.506 c0.553,0,1,0.447,1,1c0,0.551-0.447,1-1,1s-1-0.449-1-1C6.278,10.953,6.725,10.506,7.278,10.506z"/> </svg> </div> <div class="get-in-touch-text"><span>Get in touch</span></div> </div> </a> <div class="social-icons-box op_0"> <div class="social-icons"> <a rel="noopener" aria-label="Facebook" href="https://www.facebook.com/edesigninteractive/" target="_blank" class="social-icon fb"> <svg xmlns="http://www.w3.org/2000/svg" width="6.737" height="13.962"><path fill="#FFF" d="M6.737 4.506H4.454V3.078c0-.552.399-.661.628-.661h1.599V0H4.454C1.941 0 1.428 1.812 1.428 2.913v1.593H0v2.476h1.428v6.98h3.026v-6.98h2.055l.228-2.476z"/></svg> </a> <a rel="noopener" aria-label="Twitter" href="https://twitter.com/We_Are_eDesign" target="_blank" class="social-icon tw"> <svg width="14.361" height="13"> <defs> <style> .cls-1 { fill: #fff; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M11.305.01h2.203l-4.811,5.497,5.659,7.48h-4.43l-3.472-4.536-3.968,4.536H.281l5.144-5.88L0,.01h4.542l3.135,4.146L11.305.01ZM10.532,11.671h1.22L3.878,1.258h-1.31l7.964,10.413Z"/> </svg> <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="13.966"><path fill="#FFF" d="M16 1.607c-.556.31-1.235.495-1.854.556.68-.434 1.174-1.112 1.421-1.914a7.09 7.09 0 0 1-2.1.864C12.85.434 12.047 0 11.12 0 9.328 0 7.846 1.545 7.846 3.522c0 .249 0 .557.062.805C5.189 4.202 2.78 2.781 1.174.681.865 1.175.741 1.794.741 2.474c0 1.233.557 2.286 1.421 2.902-.556 0-1.05-.185-1.482-.433v.063c0 1.667 1.111 3.089 2.595 3.459a3.543 3.543 0 0 1-.866.124c-.185 0-.433 0-.618-.06.434 1.419 1.607 2.408 3.027 2.408-1.111.929-2.532 1.482-4.016 1.482-.246 0-.494 0-.803-.062 1.421.99 3.15 1.607 5.004 1.607 5.992 0 9.267-5.314 9.267-9.948v-.433c.742-.616 1.297-1.234 1.73-1.976z"/></svg> --> </a> <a rel="noopener" aria-label="Instagram" href="https://instagram.com/edesign_interactive/" target="_blank" class="social-icon in"> <svg xmlns="http://www.w3.org/2000/svg" width="13.474" height="13.141" viewBox="299.5 953.424 13.474 13.141"><path fill="#FFF" d="M310.383 953.424h-8.292c-1.439 0-2.591 1.122-2.591 2.526v8.088c0 1.403 1.15 2.526 2.591 2.526h8.292c1.438 0 2.591-1.123 2.591-2.526v-8.088c0-1.405-1.152-2.526-2.591-2.526zm.748 1.515h.288v2.245h-2.304v-2.245h2.016zm-6.794 3.707c.402-.563 1.15-.955 1.899-.955.748 0 1.497.393 1.899.955.288.394.461.844.461 1.347 0 1.292-1.094 2.305-2.36 2.305-1.266 0-2.361-1.013-2.361-2.305 0-.504.174-.954.462-1.347zm7.312 5.392c0 .675-.575 1.235-1.267 1.235h-8.292c-.69 0-1.268-.563-1.268-1.235v-5.393h2.017a3.532 3.532 0 0 0-.288 1.347c0 1.969 1.67 3.597 3.686 3.597s3.686-1.628 3.686-3.597a3.56 3.56 0 0 0-.287-1.347h2.015l-.002 5.393z"/></svg> </a> <a rel="noopener" aria-label="behance" href="https://www.behance.net/edesignbg" target="_blank" class="social-icon be"> <svg xmlns="http://www.w3.org/2000/svg" width="14.316" height="8.216" viewBox="298.342 955.279 14.316 8.216"><path fill="#FFF" d="M311.271 956.441h-3.587v-.82h3.587v.82zm-5.975 3.372c.23.329.347.729.347 1.202 0 .484-.13.926-.396 1.311-.166.254-.38.474-.63.646-.284.2-.619.337-1.006.411a6.803 6.803 0 0 1-1.258.111h-4.011v-8.216h4.302c1.084.018 1.853.307 2.307.874.272.352.407.769.407 1.256 0 .502-.137.902-.411 1.208-.152.171-.38.327-.679.469.454.154.797.394 1.028.728zm-4.9-1.294h1.885c.389 0 .701-.068.941-.203.241-.137.36-.377.36-.723 0-.385-.158-.637-.479-.76-.273-.086-.625-.129-1.051-.129h-1.658l.002 1.815zm3.37 2.378c0-.428-.188-.724-.566-.881-.211-.089-.509-.136-.891-.139h-1.912v2.188h1.883c.387 0 .687-.046.901-.143.389-.179.585-.519.585-1.025zm8.836-1.336c.043.269.063.658.055 1.169h-4.646c.024.591.247 1.004.667 1.24.253.148.561.221.92.221.379 0 .688-.088.926-.268.129-.099.243-.232.342-.406h1.703c-.045.351-.25.704-.618 1.063-.569.572-1.371.858-2.398.858-.851 0-1.599-.241-2.248-.723-.647-.484-.974-1.271-.974-2.357 0-1.021.292-1.802.879-2.348.589-.545 1.347-.815 2.281-.815a3.95 3.95 0 0 1 1.501.274c.444.186.813.477 1.103.872.259.352.427.76.507 1.22zm-1.676.154c-.031-.408-.181-.719-.446-.931-.265-.212-.595-.318-.989-.318-.428 0-.76.112-.994.339-.236.222-.385.524-.444.91h2.873z"/></svg> </a> </div> </div> <div class="line l1 anim-line"></div> <div class="line l2 anim-line"></div> <div class="line l3 anim-line"></div> <div class="line l4 anim-line"></div> <div class="line l5 anim-line"></div> <div class="scroll-down op_0 scroll_down"> <div class="scroll-down-text vTextLR">Scroll down</div> <div class="scroll-down-icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11px" height="36.189px" viewBox="0 0 11 36.189" enable-background="new 0 0 11 36.189" xml:space="preserve"> <g> <line class="stroke-1" fill="none" stroke="#000000" stroke-width="3.0556" stroke-miterlimit="10" x1="5.5" y1="0" x2="5.5" y2="13.556"/> <g> <line class="stroke-2" fill="none" stroke="#000000" stroke-width="1.0316" stroke-miterlimit="10" stroke-dasharray="18.9727" x1="5.5" y1="36.189" x2="5.5" y2="17.216"/> </g> <g><polygon class="stroke-3" points="0,11.946 5.5,21.472 11,11.946 "/></g></g> </svg> </div> </div> <div class="scroll-down op_0 scroll_up none"> <div class="scroll-down-text vTextLR">Scroll up</div> <div class="scroll-down-icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11px" height="36.189px" viewBox="0 0 11 36.189" enable-background="new 0 0 11 36.189" xml:space="preserve"> <g> <line class="stroke-1" fill="none" stroke="#000000" stroke-width="3.0556" stroke-miterlimit="10" x1="5.5" y1="0" x2="5.5" y2="13.556"/> <g> <line class="stroke-2" fill="none" stroke="#000000" stroke-width="1.0316" stroke-miterlimit="10" stroke-dasharray="18.9727" x1="5.5" y1="36.189" x2="5.5" y2="17.216"/> </g> <g><polygon class="stroke-3" points="0,11.946 5.5,21.472 11,11.946 "/></g></g> </svg> </div> </div> <div class="progress" id="progress"></div> <div class="rotate-screen"> <!-- <img src="/images/icons/rotate-screen.jpg" alt="Rotate screen"> --> <div id="screenrotation"></div> </div> <div> <div class="viewport"> <div id="my-scrollbar" > <div class="content scroll-content "> <!-- Slider is the same as home hero page, but with added classes and new titles --> <!-- added class case-study-hero-slider --> <section class="case-study-hero-slider home-slider prel m100vh change-color light ov-hidden op_0" data-speed-y="-2"> <div class="home-slider-box-outer m100vh"> <div class="content-offset"> <div class="section-offset"> <div class="about-us-tools op_0 white mobile-offset"> <div class="description-msg text t"> <span class="splitByLinesChars">portfolio</span> <span class="description-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="47.625" height="16.5" viewBox="-18.837 -6.179 47.625 16.5"> <path class="stroke arrow-line" fill="none" stroke="#000" stroke-width=".2" stroke-miterlimit="10" d="M-17.087-5.491h40.858v8.756"/> <path class="arrow arrow-triangle" d="M27.913 2.052l-4.142 7.182-4.148-7.182h8.29z"/> </svg> </span> </div> </div> </div> </div> <div class="home-slider-box-inner m100vh"> <div id="hero-slider" class="m100vh"> <div class="slide selected home-slider-item-box slide-1 m100vh"> <div class="bckg hero-slider-bckg" style="background-color:#202452;"></div> <div class="section-wrap m100vh prel"> <!-- The first video has ' autoplay autoplay="autoplay" --> <video class="hero-slider-video b-lazy" data-src="/images/casestudies/popweaver/poper456-1920.mp4" autoplay autoplay="autoplay" loop muted playsinline id="vid-1"></video> <div class="section-offset flex flexVertical col col-d-605 col-t-50 col-m-100 bx m100vh"> <div class="content-offset"> <!-- changed title size from "h" to "b" --> <div class="title b plr bx slider-title pb0 bolder blh op_0"> <strong><span class="splitByLinesChars m">Pop</span></strong> <br> <span class="splitByLinesChars m">Weaver </span> </div> <!-- text and button are new added --> <p class="plr slider-txt text m op_0">A fantastic new website for the king of popcorn</p> <div class="plr btn-box op_0 slider-btn prel z-i-2"> <a href="https://popweaver.edesigninteractive.com/" target="_blank" class="btn red">View website</a> </div> </div> </div> </div> </div> <div class="casestudy-awards-box"> <div class="casestudy-awards"> <!-- css design awards --> <!-- awwwwards --> <!-- w3 --> <!-- css design awards --> <!-- Davey awards awards --> <!-- FWA awards --> <!-- The lovie awards --> <!-- The webby awards --> </div> </div> </div> </div> </div> </section> <section class="casestudies prel change-color dark white-bckg casestudy-inner-page"> <div class="section-wrap"> <div class="section-offset"> <div class="content-offset"> <div class="casestudies-box"> <div class="casestudies-grid cf flex"> <!-- ======== PROJECT ======= --> <div class="casestudies-grid-project cf flex anim-fade-box"> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <h3 class="title b anim-title op_0"> <span class="splitByLinesChars">About the </span><strong><span class="splitByLinesChars"> Client</span></strong> </h3> <p class="text m anim-txt op_0"> Based in Indiana, Weaver Popcorn Company, Inc. was founded in 1928 and is the largest popcorn company in the U.S. Their popcorn is sold in more than 50 countries around the world. </p> </div> </div> </div> </div> </div> <div class="casestudies-col col col-d-50 col-t-50 rellax" data-rellax-speed="3" data-rellax-percentage="0.85"> <!-- if it's img, add class '.img' --> <div class="plr cf h100 img"> <div class="pull"> <div class="casestudy-box"> <img class="b-lazy" src="/images/casestudies/popweaver/popweaver-product-box-min.png" data-src="/images/casestudies/popweaver/popweaver-product-box.png" alt="Popweaver product box"> </div> </div> </div> </div> </div> <!-- ======== PROJECT ======= --> <div class="casestudies-grid-project cf flex anim-fade-box"> <div class="casestudies-col col col-d-50 col-t-50 rellax" data-rellax-speed="3" data-rellax-percentage="0.85"> <!-- if it's img, add class '.img' --> <!-- dont add class .plr --> <div class="cf h100 img"> <div class="pull"> <div class="casestudy-box pop-img-shadow"> <img class="b-lazy" src="/images/casestudies/popweaver/popweaver-mobile-view-min.png" data-src="/images/casestudies/popweaver/popweaver-mobile-view.png" alt="Popweaver mobile layout"> </div> </div> </div> </div> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <h3 class="title b splitByLinesChars anim-title op_0">Our Role</h3> <p class="text m anim-txt op_0"> Web Design, User Experience, Front-End Development, User Interface Design, Project Management, Web Animation, 3D Animation, Product Photoshoot, Copywriting. </p> <div class="btn-box anim-txt op_0"> <a href="/services" class="btn red">Explore services</a> </div> </div> </div> </div> </div> </div> </div> <!-- ======== PROJECT ======= --> <div class="casestudies-grid-project cf flex anim-fade-box"> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <h3 class="title b anim-title op_0"> <strong> <span class="splitByLinesChars">A Dedicated </span> </strong> <span class="splitByLinesChars"> Effort </span> </h3> <p class="text m anim-txt op_0"> Every element featured on Pop Weaver’s homepage could have its own case study. That’s how much attention we paid to each detail. We spared no resources, creative ideas, or efforts for this project, putting in over 352 hours for the design alone! </p> </div> </div> </div> </div> </div> <div class="casestudies-col col col-d-50 col-t-50 rellax" data-rellax-speed="3" data-rellax-percentage="0.85"> <!-- if it's img, add class '.img' --> <!-- dont add class .plr --> <div class="cf h100 img"> <div class="pull"> <div class="casestudy-box"> <!-- <img src="/images/casestudies/popweaver-popcorn-earth.jpg" alt="Popweaver popcorn earth"> --> <video class="b-lazy" playsinline="" autoplay="" muted="" loop="" data-src="/images/casestudies/popweaver/planet.mp4"> </video> </div> </div> </div> </div> </div> <!-- ======== PROJECT ======= --> <!-- if it's two cols with text add class "text-col" --> <div class="casestudies-grid-project cf flex text-col anim-fade-box text-col title_pb0"> <h3 class="c_b plr w100 title b splitByLinesChars anim-title op_0 mobile-offset">Research Phase </h3> </div> <div class="casestudies-grid-project cf flex text-col anim-fade-box text-col mt0"> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g "> <p class="text m anim-txt op_0"> In order to design a stellar website, we started by building a solid understanding of Pop Weaver’s business and market positioning. Over several weeks we visited multiple plants and offices. </p> </div> </div> </div> </div> </div> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <p class="text m anim-txt op_0"> We studied Pop Weaver’s competition, customers, partners, manufacturing process, business goals, corporate culture, website pain points and future development ideas. Research was done entirely in-house through stakeholder interviews, surveys and data validation. </p> </div> </div> </div> </div> </div> </div> </div><!-- /.casestudies-grid--> </div><!-- /.casestudies-box --> </div> </div><!-- /.section-offset --> </div><!-- /.section-wrap --> </section><!-- /.casestudies --> <!-- set inline background color for each project --> <section class="typewrite prel change-color light flex anim-type-t typewriteCaseStudy" style="background: #ffc600;"> <div class="section-wrap flex flexVertical m100vh w100"> <div class="section-offset flex h100 w100 prel pt50"> <div class="content-offset prel w100 mobile-offset"> <h2 id="typedtext2" class="en title c_g" data-text="A Website, No Matter How Beautiful, Must First" data-text-strong=" Be Functional"> <span class="op_0 faded-text">A Website, No Matter How Beautiful, Must First Be Functional</span> </h2> </div> <div class="typewrite-text-box op_0 mobile-offset"> <div class="typewrite-text-col-1 col col-d-50 text m c_b"> The next step was to create precise wireframes (“the perfect blueprint”) to visualize the site logic, taxonomy, user interactions, and homepage purpose. </div> <div class="typewrite-text-col-2 col col-d-50 text m c_b"> We knew that without a well-grounded business strategy, timely calls-to-actions, and an intelligent homepage structure, the website wouldn’t stand on its own as a strong business development tool. </div> </div> </div> </div> </section> <section class="casestudies prel change-color dark white-bckg casestudy-inner-page"> <div class="section-wrap"> <div class="section-offset"> <div class="content-offset"> <div class="casestudies-box"> <div class="casestudies-grid cf flex"> <div class="casestudies-grid-project cf flex anim-fade-box"> <div class="casestudies-col col col-d-50 col-t-50 rellax" data-rellax-speed="3" data-rellax-percentage="0.85"> <!-- if it's img, add class '.img' --> <!-- dont add class .plr --> <div class="cf h100 img"> <div class="pull"> <div class="casestudy-box"> <!-- <img src="/images/casestudies/popcorn-king.jpg" alt="Popweaver popcorn king"> --> <video class="b-lazy king" playsinline="" autoplay="" muted="" loop="" data-src="/images/casestudies/popweaver/grain.mp4"> </video> </div> </div> </div> </div> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <h3 class="title b splitByLinesChars anim-title op_0">3D Animations</h3> <p class="text m anim-txt op_0"> We wanted to include exceptional elements to make Pop Weaver’s website stand out. From a 3D popcorn box and flying kernels to an animated popcorn-making machine, we created a truly memorable experience. </p> <p class="text m anim-txt op_0"> All 3D models have been created and assembled element by element, so we can animate each image, enhance it, render it, and make it come to life. These provide a truly custom and memorable approach, unmatched by any competitor in the space. </p> </div> </div> </div> </div> </div> </div> </div><!-- /.casestudies-grid--> </div><!-- /.casestudies-box --> </div> </div><!-- /.section-offset --> </div><!-- /.section-wrap --> </section><!-- /.casestudies --> <section class="m100vh casestudies prel change-color light white-bckg casestudy-inner-page casestudy-inner-page-bckg b-lazy" data-src="/images/casestudies/popweaver/popweaver-yellow-bckg.jpg"> <div class="m100vh section-wrap"> <div class="m100vh section-offset"> <div class="content-offset"> <div class="casestudies-box"> <div class="casestudies-grid cf flex anim-fade-box"> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g title_pb0"> <h3 class="title b splitByLinesChars anim-title op_0">Popcorn <br /> Photoshoot</h3> <p class="splitByLinesChars text m anim-txt op_0"> Pop Weaver’s website does not have a single stock image, with each visual asset created in our studio. </p> <p class="text m splitByLinesChars anim-txt op_0"> How did it all happen? Well, we popped a lot of popcorn (our favorite flavor: Extra Butter) and had lots of fun shooting different photos and videos on different backgrounds. </p> </div> </div> </div> </div> </div> <div class="casestudies-col col col-d-50 col-t-50"></div> </div><!-- /.casestudies-grid--> </div><!-- /.casestudies-box --> </div> </div><!-- /.section-offset --> </div><!-- /.section-wrap --> </section><!-- /.casestudies --> <section class="casestudies prel change-color dark white-bckg casestudy-inner-page"> <div class="section-wrap"> <div class="section-offset"> <div class="content-offset"> <div class="casestudies-box"> <div class="casestudies-grid cf flex"> <!-- ************************************ --> <!-- ************************************ --> <div class="plr casestudies-huge-title-box anim-fade-box mobile-offset"> <h2 class="casestudies-huge-title title en anim-title op_0"> <span class="splitByLinesChars">Needleless to say We </span> <strong><span class="splitByLinesChars">love</span></strong> <span class="splitByLinesChars">Pop Weaver’s popcorn.</span> </h2> <h2 class="casestudies-huge-sub-title anim-txt op_0">Our favorite taste: “Extra Butter” </h2> </div> <!-- ************************************ --> <!-- ************************************ --> <!-- ************************************ --> <!-- ************************************ --> <div class="casestudies-single-image-box anim-fade-box"> <div class="verticle-typewrite-text-box anim-txt op_0 mobile-offset"> <div class="verticle-typewrite-text text m bigger"> <div class="verticle-typewrite-icon anim-type-side-icon"></div> <span class="op_05 anim-type-side-text" > The visual communication is built in vivid, bold colors and highlights the qualities of the product. </span> </div> </div> <div class="casestudies-single-image"> <img class="b-lazy" src="/images/casestudies/popweaver/popweaver-slider-1-min.png" data-src="/images/casestudies/popweaver/popweaver-slider-1.png" alt="Popweaver image"> </div> </div> <!-- ************************************ --> <!-- ************************************ --> <!-- ************************************ --> <!-- ************************************ --> <!-- if it's two cols with text add class "text-col" --> <div class="casestudies-grid-project cf flex text-col anim-fade-box text-col title_pb0 mobile-offset"> <h3 class="c_b plr w100 title b splitByLinesChars anim-title op_0 mobile-offset">Copywriting </h3> </div> <div class="casestudies-grid-project cf flex text-col anim-fade-box mt0"> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <p class="text m anim-txt op_0"> We carefully chose every word to present Pop Weaver’s wholesome products and high quality standards—with plays on words, short teasers, and a distinctive tone of voice. </p> </div> </div> </div> </div> </div> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <p class="text m anim-txt op_0"> We had fun talking about company’s philanthropic work, the festivals Pop Weaver supports, and autonomous growers. </p> </div> </div> </div> </div> </div> </div> <!-- ************************************ --> <!-- ************************************ --> </div><!-- /.casestudies-grid--> </div><!-- /.casestudies-box --> </div> </div><!-- /.section-offset --> </div><!-- /.section-wrap --> </section><!-- /.casestudies --> <section class="case-study-slider-section"> <div class="case-study-slider-box"> <div class="case-study-slider swiper-container" id="caseStudySlider"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="case-study-slider-img-box-outer"> <div class="case-study-slider-img-box"> <img src="/images/casestudies/popweaver-shot-1.jpeg" alt=""> </div> <div class="case-study-slider-desc-box"> <div class="case-study-slider-desc-icon"><img src="/images/icons/down-angle-arrow-black.png" alt=""></div> <div class="case-study-slider-desc-text">The homepage guides visitors towards the right information. </div> </div> </div> </div> <div class="swiper-slide"> <div class="case-study-slider-img-box-outer"> <div class="case-study-slider-img-box"> <img src="/images/casestudies/popweaver-shot-2.jpeg" alt=""> </div> <div class="case-study-slider-desc-box"> <div class="case-study-slider-desc-icon"><img src="/images/icons/down-angle-arrow-black.png" alt=""></div> <div class="case-study-slider-desc-text">The site has a creative and fun look-and-feel while remaining easy to navigate and professional. </div> </div> </div> </div> <div class="swiper-slide"> <div class="case-study-slider-img-box-outer"> <div class="case-study-slider-img-box"> <img src="/images/casestudies/popweaver-shot-3.jpeg" alt=""> </div> <div class="case-study-slider-desc-box"> <div class="case-study-slider-desc-icon"><img src="/images/icons/down-angle-arrow-black.png" alt=""></div> <div class="case-study-slider-desc-text">Play on words, short teasers and interesting information. Our in-house copywriting and content development are on point with brand’s message. </div> </div> </div> </div> <div class="swiper-slide"> <div class="case-study-slider-img-box-outer"> <div class="case-study-slider-img-box"> <img src="/images/casestudies/popweaver-shot-4.jpeg" alt=""> </div> <div class="case-study-slider-desc-box"> <div class="case-study-slider-desc-icon"><img src="/images/icons/down-angle-arrow-black.png" alt=""></div> <div class="case-study-slider-desc-text">Our in-house research determined the foundation for a solid UX approach addressing many different audiences, both B2B and B2C.</div> </div> </div> </div> <div class="swiper-slide"> <div class="case-study-slider-img-box-outer"> <div class="case-study-slider-img-box"> <img src="/images/casestudies/popweaver-shot-5.jpeg" alt=""> </div> <div class="case-study-slider-desc-box"> <div class="case-study-slider-desc-icon"><img src="/images/icons/down-angle-arrow-black.png" alt=""></div> <div class="case-study-slider-desc-text">There’s visual guidance and easy access to information from any page of the site.</div> </div> </div> </div> <div class="swiper-slide"> <div class="case-study-slider-img-box-outer"> <div class="case-study-slider-img-box"> <img src="/images/casestudies/popweaver-shot-6.jpeg" alt=""> </div> <div class="case-study-slider-desc-box"> <div class="case-study-slider-desc-icon"><img src="/images/icons/down-angle-arrow-black.png" alt=""></div> <div class="case-study-slider-desc-text">We’ve put some thoughts into presenting Pop Weaver’s corporate values, longevity and traditions. </div> </div> </div> </div> </div> </div> </div> </section> <section class="casestudies prel change-color dark white-bckg casestudy-inner-page"> <div class="section-wrap"> <div class="section-offset"> <div class="content-offset"> <div class="casestudies-box"> <div class="casestudies-grid cf flex"> <!-- ************************************ --> <!-- ************************************ --> <!-- if it's two cols with text add class "text-col" --> <div class="casestudies-grid-project cf flex text-col anim-fade-box"> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g title_pb0"> <h3 class="title b splitByLinesChars anim-title op_0">To the Left </h3> </div> </div> </div> </div> </div> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <p class="text m anim-txt op_0"> We chose to ignore the popular horizontal menu bar and made the bold decision to hide the menu vertically, on the viewer’s left. This freed a full screen to display a beautiful, cinematic vision of Pop Weaver. </p> <p class="text m anim-txt op_0"> The open space and large-scale images created a fantastic mood and presented the brand as the king that it is. </p> </div> </div> </div> </div> </div> </div> <!-- ************************************ --> </div><!-- /.casestudies-grid--> </div><!-- /.casestudies-box --> </div> </div><!-- /.section-offset --> </div><!-- /.section-wrap --> </section><!-- /.casestudies --> <section class="m100vh casestudies prel change-color dark white-bckg casestudy-inner-page casestudy-inner-page-bckg b-lazy" data-src="/images/casestudies/popweaver/popweaver-blue-bckg.jpg"> <div class="m100vh section-wrap"> <div class="m100vh section-offset"> <div class="content-offset"> <div class="casestudies-box"> <div class="casestudies-grid cf flex anim-fade-box"> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull mobile-offset"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <h3 class="title nm anim-title op_0"> <span class="splitByLinesChars">Programming</span> <br> <span class="splitByLinesChars">and Front-end</span> <strong><span class="splitByLinesChars">Magic</span></strong> </h3> <p class="sub_titile thinner anim-txt op_0"> We faced a few challenges when coding the round shapes of site’s visuals, titles and navigation. It wasn’t easy to recreate the outline of Pop Weaver’s branding for certain details of the site, but in the end, the effort was well worth it. </p> </div> </div> </div> </div> </div> <div class="casestudies-col col col-d-50 col-t-50"></div> </div><!-- /.casestudies-grid--> </div><!-- /.casestudies-box --> </div> </div><!-- /.section-offset --> </div><!-- /.section-wrap --> </section><!-- /.casestudies --> <section class="casestudies prel change-color dark white-bckg casestudy-inner-page"> <div class="section-wrap"> <div class="section-offset"> <div class="content-offset mobile-offset"> <div class="casestudies-box"> <div class="casestudies-grid cf flex"> <!-- ************************************ --> <!-- ************************************ --> <!-- if it's two cols with text add class "text-col" --> <div class="casestudies-grid-project cf flex text-col anim-fade-box title_pb0"> <h3 class="title b plr w100 c_b splitByLinesChars anim-title op_0">What Else?</h3> </div> <div class="casestudies-grid-project cf flex text-col anim-fade-box title_pb0 mt0"> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <p class="text m anim-txt op_0"> The website carries lots of micro interactions, fun animations, and attention grabbing calls-to-action. </p> </div> </div> </div> </div> </div> <div class="casestudies-col col col-d-50 col-t-50"> <div class="plr cf h100"> <div class="pull"> <div class="casestudy-box"> <div class="casestudy-box-text c_g"> <p class="text m anim-txt op_0"> We even lit the entire site at an angle so that the light falls on specific design details to help them “pop.” </p> </div> </div> </div> </div> </div> </div> <!-- ************************************ --> </div><!-- /.casestudies-grid--> </div><!-- /.casestudies-box --> </div> </div><!-- /.section-offset --> </div><!-- /.section-wrap --> </section><!-- /.casestudies --> <section class="prel change-color dark casestudy-inner-page fast-facts-section"> <div class="section-wrap"> <div class="section-offset"> <div class="content-offset "> <div class="casestudies-box"> <div class="casestudies-grid cf"> <div class="facts-slider-box anim-fast-facts"> <div class="facts-slider-title anim-title op_0 splitByLinesChars mobile-offset">Fast Facts</div> <div class="facts-slider-outer-box mobile-offset"> <div class="facts-slider swiper-container" id="factsSlider"> <div class="swiper-wrapper"> <div class="swiper-slide anim-stager"> <div class="facts-slider-slide-box"> <div class="facts-slider-num"> <span class="awards-c" data-start="0" data-end="352">0</span> </div> <div class="facts-slider-text">hours of design work </div> </div> </div> <div class="swiper-slide anim-stager"> <div class="facts-slider-slide-box"> <div class="facts-slider-num"> <span class="awards-c" data-start="0" data-end="45">0</span> <sup>+</sup> </div> <div class="facts-slider-text">bags of popcorn enjoyed at our office</div> </div> </div> <div class="swiper-slide anim-stager"> <div class="facts-slider-slide-box"> <div class="facts-slider-num"> <span class="awards-c" data-start="0" data-end="15">0</span> </div> <div class="facts-slider-text">eDesign experts worked on this project </div> </div> </div> <div class="swiper-slide anim-stager"> <div class="facts-slider-slide-box"> <div class="facts-slider-num"> <span class="awards-c" data-start="0" data-end="50">0</span> <sup>+</sup> </div> <div class="facts-slider-text"> countries sell Pop Weaver</div> </div> </div> <div class="swiper-slide anim-stager"> <div class="facts-slider-slide-box"> <div class="facts-slider-num"> <span class="awards-c" data-start="0" data-end="233">0</span> </div> <div class="facts-slider-text">hours of front end programing </div> </div> </div> <div class="swiper-slide anim-stager"> <div class="facts-slider-slide-box"> <div class="facts-slider-num"> <span class="awards-c" data-start="0" data-end="5">0</span> </div> <div class="facts-slider-text">staff hands auditioned for the “popcorn in a bowl” video </div> </div> </div> </div> </div> </div> </div> </div><!-- /.casestudies-grid--> </div><!-- /.casestudies-box --> </div> </div><!-- /.section-offset --> </div><!-- /.section-wrap --> </section><!-- /.casestudies --> <div class="content-grid cf"> <div class="text-col p0 c_b"> <div id="social-feed-slider" class="drag-nav"> <div class="social-feed-slider-conatiner swiper-container op_0 drag-section"> <div class="social-feed-slider-wrapper swiper-wrapper"> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/theatre-development-fund-tdf" title="TDF"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/34/others/tdf-thumb-small2_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.tdf.org/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">TDF</a></div> --> <a href="/portfolio/theatre-development-fund-tdf" class="title sm mobile-offset plr tplr mobile-offset c_b bx">TDF</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Non Profit</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/turner-construction-company" title="Turner"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/32/others/tcco-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.turnerconstruction.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Turner</a></div> --> <a href="/portfolio/turner-construction-company" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Turner</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Construction</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/synack" title="Synack"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/33/others/synack-big-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.synack.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Synack</a></div> --> <a href="/portfolio/synack" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Synack</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Software & Electronics</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/sekure-merchants" title="Sekure Merchants"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/31/others/sekure-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://sekuremerchants.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Sekure Merchants</a></div> --> <a href="/portfolio/sekure-merchants" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Sekure Merchants</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <span class="social-feed-slide-inner-box prel"> <h3 class="title m s">More <br /> projects</h3> <p class="text m op_03 _s"> <span class="text n">We use the power of digital technology to engage your audience...</span> </p> <div class="btn-box mt"> <a href="/portfolio" class="btn red anim-txt-b op_0">View portfolio</a> </div> </span> </div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/wimpy-kid" title="Wimpy Kid"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/30/others/wimpykid-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://wimpykid.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Wimpy Kid</a></div> --> <a href="/portfolio/wimpy-kid" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Wimpy Kid</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Publishing</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/fastmail" title="Fastmail"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/28/others/fastmail-290x290-thumb-list_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://fastmail.edesigninteractive.com</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Fastmail</a></div> --> <a href="/portfolio/fastmail" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Fastmail</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/associated-press" title="Associated Press Content Services"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/27/others/ap-209x209_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://contentservices.ap.org/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Associated Press Content Services</a></div> --> <a href="/portfolio/associated-press" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Associated Press Content Services</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/medspeed" title="MedSpeed"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/29/others/medspeed-290x290-thumb-list_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.medspeed.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">MedSpeed</a></div> --> <a href="/portfolio/medspeed" class="title sm mobile-offset plr tplr mobile-offset c_b bx">MedSpeed</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Healthcare</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/lasernetus" title="LaserNetUS"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/26/others/lasernetus-209x209_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://lasernetus.org/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">LaserNetUS</a></div> --> <a href="/portfolio/lasernetus" class="title sm mobile-offset plr tplr mobile-offset c_b bx">LaserNetUS</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Government, Nonprofit</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/finch" title="Finch"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/25/others/finch_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">http://finchmoney.edesigninteractive.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Finch</a></div> --> <a href="/portfolio/finch" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Finch</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Finance</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/welchs-fruit-snacks" title="Welch’s ® Fruit Snacks"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/8/others/weltch-tmb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://welchsfruitsnacks.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Welch’s ® Fruit Snacks</a></div> --> <a href="/portfolio/welchs-fruit-snacks" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Welch’s ® Fruit Snacks</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Food & Beverage</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/blockchains" title="Blockchains"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/24/others/blockchains_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.blockchains.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Blockchains</a></div> --> <a href="/portfolio/blockchains" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Blockchains</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Software & Electronics</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/sundaysky" title="SundaySky"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/22/others/SundaySky_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://sundaysky.edesigninteractive.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">SundaySky</a></div> --> <a href="/portfolio/sundaysky" class="title sm mobile-offset plr tplr mobile-offset c_b bx">SundaySky</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Software & Electronics</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/exeron" title="Exeron"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/3/others/exeron-portfolio-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://exeron.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Exeron</a></div> --> <a href="/portfolio/exeron" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Exeron</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Products</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/dyrdek-machine" title="Dyrdek Machine"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/20/others/Dyrdek-Machine-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://dyrdekmachine.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Dyrdek Machine</a></div> --> <a href="/portfolio/dyrdek-machine" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Dyrdek Machine</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/oinj" title="The Orthopedic Institute of New Jersey"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/19/others/oinj-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://orthopedicnj.com</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">The Orthopedic Institute of New Jersey</a></div> --> <a href="/portfolio/oinj" class="title sm mobile-offset plr tplr mobile-offset c_b bx">The Orthopedic Institute of New Jersey</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Healthcare</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/raritan-valley-community-college" title="Raritan Valley Community College"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/18/others/rvcc-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.raritanval.edu/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Raritan Valley Community College</a></div> --> <a href="/portfolio/raritan-valley-community-college" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Raritan Valley Community College</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Education</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/frostking-house" title="Frost King"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/7/others/frost-king-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://house.frostking.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Frost King</a></div> --> <a href="/portfolio/frostking-house" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Frost King</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Products</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/hardies" title="Hardie's Fresh Foods"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/4/others/hardies-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.hardies.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Hardie's Fresh Foods</a></div> --> <a href="/portfolio/hardies" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Hardie's Fresh Foods</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/menada" title="Domain Menada Winery"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/14/others/menada-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.menada-winery.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Domain Menada Winery</a></div> --> <a href="/portfolio/menada" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Domain Menada Winery</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Spirits</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/villa-yambol" title="Villa Yambol Wines"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/17/others/villa-yambol-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://villayambol.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Villa Yambol Wines</a></div> --> <a href="/portfolio/villa-yambol" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Villa Yambol Wines</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Spirits</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/agata-photography" title="Agata Photography"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/6/others/agata-portfolio-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://agataphotography.co.uk/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Agata Photography</a></div> --> <a href="/portfolio/agata-photography" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Agata Photography</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/alaska" title="Alaska Vodka"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/10/others/alaska-vodka-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://alaskavodka.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Alaska Vodka</a></div> --> <a href="/portfolio/alaska" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Alaska Vodka</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Spirits</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/brickfielder" title="Brickfielder"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/11/others/brickfielder-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://brickfielder.edesigninteractive.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Brickfielder</a></div> --> <a href="/portfolio/brickfielder" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Brickfielder</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Products</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/diecrew" title="Die Crew"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/12/others/diecrew-portfolio-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.diecrew.de/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Die Crew</a></div> --> <a href="/portfolio/diecrew" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Die Crew</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/dangelico" title="D'Angelico Guitars"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/13/others/d-angelico-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">http://dangelico.edesigninteractive.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">D'Angelico Guitars</a></div> --> <a href="/portfolio/dangelico" class="title sm mobile-offset plr tplr mobile-offset c_b bx">D'Angelico Guitars</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Products</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/sun-maid-chocolate-raisins" title="Sun-Maid Chocolate Raisins"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/23/others/Screenshot-2021-02-26-121121_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.chocolateraisins.com/</span> </div> </a> </div> <!-- <div class="casestudy-link-box-txt"><a "" class="c_b">Sun-Maid Chocolate Raisins</a></div> --> <a href="/portfolio/sun-maid-chocolate-raisins" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Sun-Maid Chocolate Raisins</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Food & Beverage</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script src="/js/main.js?v=20240815v2"></script> <script> App.Lottie.initPrelaoder(); App.init(); </script> <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-66869522-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>