Evalink

Story and website for alarm management software

<b>12</b> qualitative interviews

with clients and industry experts

<b>4</b> strategic workshops

to define tonality and target groups

<b>37</b> individual illustrations

to make functions clearly understandable

Evalink
Visit website
INDUSTRY
Security industry
Timeframe
2022 (6 months)
TEAM

Design Consultant
UX / UI Designers
Copy Writer

Product Design Web Strategy Mobile

About the project

Sitasys offers one of the most advanced software platforms for alarm management in the whole security industry.They asked us to help them finding the right tone of voice for their target group and redesign the whole storyline for their entire web experience.

Together with the client we defined their target groups in several strategy workshops and developed new tonality guidelines and an overall storyline for their sales approach. The new focus was translated into the new design language and website structure.

<section class="padding-largest no-padding-bottom module-portolio-detail-headline"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Differenciated target groups </span> <br class="not-on-s">by individually &amp; specifically addressing them </h2> <p class="sn-text section-paragraph center">The website needs to effectively address multiple target groups and persuade them to contact the evalink team in a professional and convincing manner.</p> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="headline-large-image"> <div class="item-wrapper"> <div class="item"> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/02._headline-large-image/evalink-tile-image-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/02._headline-large-image/evalink-tile-image-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/02._headline-large-image/evalink-tile-image-1x.jpg}"> </picture> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list bg-grey-05"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/03._tile-image-1/Evalink-ProductPages-browserbar-white-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/03._tile-image-1/Evalink-ProductPages-browserbar-white-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/03._tile-image-1/Evalink-ProductPages-browserbar-white-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/03._tile-image-1/Evalink-ProductPages-browserbar-white-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Telling stories &amp; building trust&lt;br&gt; with explanatory illustration-text modules</h3> <p>During the Evalink website redesign, our focus was user engagement through visually appealing content and imagery while avoiding excessive technical details. We used image-text modules for clear insights in a fresh and playful style, which we placed throughout the website for easy programming, reusability, and responsive design. This ensures an optimal user experience, with vertical stacking of modules in mobile view for easy story-following.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list no-padding-sides no-padding-bottom bg-grey-05"> <div class="headline-large-image"> <div class="item-wrapper"> <div class="item"> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/04._full-width-image-2/evalink----full-width-landingpage-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/04._full-width-image-2/evalink----full-width-landingpage-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/04._full-width-image-2/evalink----full-width-landingpage-1x.jpg}"> </picture> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list bg-grey-05"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/05._tile-image-2/Evalink-PriceCalc-browserbar-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/05._tile-image-2/Evalink-PriceCalc-browserbar-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/05._tile-image-2/Evalink-PriceCalc-browserbar-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/05._tile-image-2/Evalink-PriceCalc-browserbar-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Price Calculator –&lt;br&gt; Find the best setup for you </h3> <p>We&#039;ve worked with Evalink to enhance the price calculator, ensuring that it efficiently collects essential data while maintaining a user-friendly and clear interface. Our inclusion of intuitive sliders allows users to specify equipment and site quantities, with the flexibility to switch between modules and packages. The calculator also supports three currency options and provides monthly cost estimates. What&#039;s more, it&#039;s optimised for reliability and works seamlessly across multiple devices.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list bg-grey-05"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container"> <div class="flex-item-left"> <div class="vertical-middler"> <h3>Evalink Marketplace –&lt;br&gt; all your integrations in one place</h3> <p>The marketplace offers users detailed information, like tutorials on software integrations that work with evalink products. To make it user-friendly, we&#039;ve added a sidebar with categories and filters, a search bar and refurbished the UI design to make the marketplace a one-stop resource for users to find and learn about new software integrations that can improve their experience with evalink products.</p> </div> </div> <div class="flex-item-right img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/05._tile-image-2/Evalink-Marketplace-browserbar-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/05._tile-image-2/Evalink-Marketplace-browserbar-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/05._tile-image-2/Evalink-Marketplace-browserbar-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/05._tile-image-2/Evalink-Marketplace-browserbar-1x.jpg"> </picture> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list no-padding-sides no-padding-bottom bg-grey-05"> <div class="headline-large-image"> <div class="item-wrapper"> <div class="item"> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/06._full-width-image-3/Evalink-LongPage-bar-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/06._full-width-image-3/Evalink-LongPage-bar-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/evalink-ux-ui-design/06._full-width-image-3/Evalink-LongPage-bar-1x.jpg}"> </picture> </div> </div> </div> </div> </section> <section id="cta-your-project" class="section padding-largest modular-call-contact "> <div class="wrapper"> <div class="flex-container"> <div class="flex-item-left"> <picture> <source media="(max-width: 767px)" srcset="/user/themes/boanastories/img/sales/s-profile-j2-mobile.jpg" /> <source srcset="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg 1x, /user/themes/boanastories/img/sales/s-profile-j2-2x.jpg 2x" /> <img src="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg" alt="Johannes Holl" /> </picture> <a href="https://boanastudio.com/team/johannes-holl" class="xs-text text-grey-60 image-caption"><b class="bold text-grey-40">Johannes Holl</b> <span class="not-on-s">• </span>Managing Director</a> </div> <div class="flex-item-right"> <div class="text"> <div class="headline l-text"> &lt;span class=&quot;color&quot;&gt;Let’s talk about&lt;/span&gt;&lt;br&gt;your project. </div> <div class="teaser n-text text-grey-60"> We can help reduce complexity and identify quick wins upfront. </div> <div class="actions"> <a href="https://boanastudio.com/contact" class="button primary">Get free consultation</a> </div> </div> </div> </div> </div> </section>