Interactive scroller
Projects

Interactive scroller

for EFSA

Client

European Food Safety Authority (EFSA)

European Food Safety Authority (EFSA)

About the client

The European Food Safety Authority is the agency of the European Union that acts as a source of scientific advice and communication on risks associated with the food chain.

Deliverable

Design and develop an interactive visualisation product for the QPS Process, accompanied by a dedicated FAQs section.

About the deliverable

The scope of this assignment was to create and develop a multilingual Interactive Scroller that could effectively educate interested parties about the QPS process in a self-explanatory and intuitive manner. To achieve this, our team conducted extensive research and collaborated closely with the Scientists, Project team, Design and Development team to gain insights into user needs and pain points. This product was a crucial part of EFSA's wider approach to providing clear and concise information to stakeholders and was the first product/site page to incorporate the new EFSA brand identity.

During the research phase, our team used various methodologies, including interviews and focus groups with scientists, as well as best practices and secondary research to gain insights into user pain points and ways to meet their needs and expectations. With the support of EFSA's governance, we formulated two key personas to guide product development.

The Interactive Scroller was designed with these personas in mind, utilising UX writing techniques and visual storytelling approaches providing an intuitive and engaging experience for users. Our team conducted formative usability testing at every stage of development, from wireframes to the final product, to ensure that the product met user needs and expectations.

Additionally, EFSA's design team evaluated the final product to assess the incorporation of the new brand identity. The product was thoroughly tested and evaluated by EFSA's development team to ensure a seamless integration into the EFSA website. Collaboration with the development teams of both parties was critical in the development of the Interactive Scroller, and feedback from stakeholders was incorporated to optimise performance and functionality.

The final product included visual elements depicting the certification process, available in multiple languages, enabling users from different regions to access information in their preferred language, and better understand the certification process, overcoming language barriers. The product was designed with the ability for the scientists to be able to update any part of the product, while maintaining performance and visual output of the UI elements and the overall user experience offered in the initial product.

In summary, the multilingual Interactive Scroller was developed to provide clear and concise information about the QPS process, improving user understanding. The product was available in multiple languages and reflected EFSA's new brand identity, demonstrating the company's commitment to improving user experience for its customers.

Link

https://www.efsa.europa.eu/en/applications/qps-assessment
project image

Related projects

Strategic product launch

Strategic product launch

for the Archaeological Museum of Thessaloniki

No matter if it’s digital or more of a tangible one, launching a product is a strategic process that can make or break it for your business or your client. Truth be told, for years now marketers have figured out the specific steps to be taken to successfully build a <b>product launch</b>. The reality though is not that straightforward like going from A to Z. The key is all about <b>building anticipation</b>, something that we successfully tested with the Archaeological Museum’s brand-new app.<h2 style='font-size: 22px; font-weight: bold; margin-bottom: 1rem'>Leveraging the anticipation marketing technique</h2>html<p class='custom-text'><b>Anticipation marketing</b> is the strategy that focuses on the users’ curiosity and excitement. It’s all about periodically offering the right amount of information that builds anticipation until the actual product launch. Generating a ‘buzz’ usually leads to an increase in customer engagement with the brand (yours or, in our case, your client’s) that ensures a successful launch. And although anticipation marketing can be used for flash sales, events, etc., it also works perfectly for <b>product launches</b>. Some of the main tactics that usually work for such cases are:</p>html<ul style='margin-left: 2rem'><li>Providing teasers or sneak peeks of the product</li><li>Harvesting the power of storytelling for the created narratives</li><li>Betting on the success of interactive content like quizzes and polls</li><li>Collaborating with authority figures and influencers to spread the word</li><li>Creating promotional events </li><li>Provoking an increase in engagement with the possible users through various media, etc.</li></ul><h2 style='font-size: 22px; font-weight: bold; margin-bottom: 1rem'>The case of 'Museum On The Go'</h2>html<p class='custom-text'>'Museum On The Go' is an application that guides users within and outside Amth. Within the museum, the app works as a digital tour guide that accompanies the users and offers, through text and audio in 12 different languages, unique tours presenting 150 specially selected exhibits. Outside the museum, the app covers the area of Northern Greece specialising in the city of Thessaloniki where users can discover 80+ places of archaeological interest that are connected to 250 museum exhibits and their unique stories.</p>html<img style='border-radius: 20px;box-shadow: 0px 10px 42px -6px rgba(120,119,119,0.75);margin-bottom: 2rem;' src='/projects/project-amth-1.png' />html<p class='custom-text'>Such a product was of great importance for the museum as it would contribute to its overall digital transformation and was planned to further promote the museum to the city’s visitors from all over the world. Therefore, apart from designing a one-of-a-kind product that users would benefit from, the challenge was to create an unparalleled launch strategy and seamlessly execute it.</p><h2 style='font-size: 22px; font-weight: bold; margin-bottom: -1rem'>Implementing the anticipation technique for the app’s launch</h2>html<p class='custom-text'>For the case of ‘Museum On The Go’ app, Hypertech had to ensure that the launch strategy would align with the overall marketing approach for the product. Therefore, specific steps were planned to be executed covering all possible activities with a 360 view and covering a timeline before, during, and after the launch.</p>html<ol class='project-ol'><li>Define target audience</li><p>The number one step was to ensure we understood the client’s target audience. Analysing the end users from a critical standpoint may seem like the obvious step, but it takes dedicating the proper amount of time, searching in the right spots, and specifying needs and pain points to create users’ profiles that will hopefully use your product. For this case the data was taken straight from its analytics, contacting museum visitors, and learning from the competition, which helped to know what user category would become the early adopters, who would follow, and who would remain loyal users. </p><li>Craft a unique selling point </li><p>As nowadays many museums are following the road of digital transformation, it was important to clearly define what is or are the unique selling points of the AMTH app. After research, it was obvious that the idea to combine the museum with the rest of the city of Thessaloniki and the rest of Northern Greece was key to attracting archaeology lovers and city visitors from all over the world. Of course, the audioguide, the storytelling texts in 12 languages, and the suggested personalised tours also helped it stand out from the competition and attract the attention of the municipality as the app would benefit the city in general. </p><li>Build and execute a 360-launch plan</li><p>There are many choices out there to promote a product but, you need to know what better suits yours and its audience. Dividing our promotional strategy into three parts (prior, during, and after launch) and utilising both digital and offline material and platforms was the solution for the case of our client’s app. All steps were clearly stated in a file that showed what, when, how, and why allowed the team to stay focused, measure the success at each step of the way, and readjust when and if required. </p></ol><h3 style='font-size: 18px; font-weight: bold;'>Before launch</h3>html<p class='custom-text'>Each step of the launch plan includes specific steps that also require material to be used. In the case of 'Museum On The Go,' this included 1) <b>A dedicated landing page:</b> This is one of the main and probably the most straightforward moves, as it’s more than logical for users to have a reference point to discover your product. From the early stages of the product, and once the first designs were ready, the landing page > <a class='accented-link' href='https://www.museumonthego.gr/en/museum-on-the-go/' target='_blank'>https://www.museumonthego.gr/en/museum-on-the-go/</a> was built with the notice that it’s coming soon. The website was constantly updated during the project's progress and promoted both from the client’s (AMTH) website and media and our own. At this stage, the main use was to direct users to it from other promotional activities. 2) <b>A launch of a Tease Video:</b> Such a video has a single goal, to finally show a bit of the product and its functionalities while not making it yet available. For the AMTH app > <a class='accented-link' href='https://www.youtube.com/watch?v=fhCwTeAqZd8' target='_blank'>https://www.youtube.com/watch?v=fhCwTeAqZd8</a> it was 1-minute video that combined app designs, with museum videos and archaeological sites to promote the main value of the product. The video was used in almost all steps of the prior launch plan and gathered positive feedback from user comments and live presentations. 3) <b>Web banners:</b> Creating branded banners that are in alignment with the identity that we built for the product and the AMTH strategy was important to ensure the product would stand out but wouldn’t be perceived as irrelevant to the museum. The design approach was followed through the whole promotional lifecycle and in all web and offline material used.</p><p style='font-size: 1.125rem;'>The prior launch steps included:</p>html<ul style='margin-left: 2rem;font-size: 1.125rem;'><li><b>Digital Platforms:</b> To create an initial buzz and make people start talking and wandering about the upcoming product it was important to take advantage of the core media available by the client and Hypertech itself. It was a spherical effort, based on the overall marketing plan, that started from the initial announcement to the constant updates, up until the BETA version release. Using gradually all the media, from writing press releases for announcements, detailed articles of what to expect, and contacting museum following via newsletters and social media (posts and stories), helped to keep the potential users intrigued through the prior launch period.</li><li><b>Live Presentations:</b> Even though we are working on a digital product it’s important to remember that people respond to people better. Therefore, our plan included presenting the development of the product at various instances where possible users might be. Examples of such live presentations were at the University of Macedonia, where we had the chance to present it to the students and see their reaction and comments, and at HELEXPO at the booth of the Ministry of Culture and Sports, where we presented it to users from various backgrounds and ethnicities. </li><li><b>Releasing BETA version:</b> Another important step, that usually takes place during the testing period is releasing a BETA version of the product for early adopters to try and provide you with feedback that will help you improve the final product. It’s a step to show your commitment to having a <b>customer-centric approach</b> and <b>make users feel included</b>. This is also a great opportunity to open a dialogue and increase communication. The process was boosted with initial ads in social media, which also helped to better figure out the targeting that responds and shows interest.</li></ul><h3 style='font-size: 18px; font-weight: bold; margin-bottom: -2rem'>The launch</h3>html<p class='custom-text'>Launch may be a specific day on the calendar, but, it may also last a while as several actions might be taken. For the case of AMTH app, we divided the launch into Digital and offline activities.</p>html<ul style='margin-left: 2rem;font-size: 1.125rem;'><li><b>Digital activities:</b> Once our app was up and ready for download on both Android > <a href='https://play.google.com/store/apps/details?id=gr.museumonthego&hl=en_US&pli=1' class='accented-link' target='_blank'>https://play.google.com/store/apps/details?id=gr.museumonthego&hl=en_US&pli=1</a> and ios > <a class='accented-link' href='https://apps.apple.com/us/app/museum-on-the-go/id1637047830' target='_blank'>https://apps.apple.com/us/app/museum-on-the-go/id1637047830</a> we leveraged all the digital channels to run a <b>360 campaign</b>. This included adding <b>banners</b> on AMTH homepage, posting on <b>Social Media</b>, creating <b>stories</b>, writing <b>articles</b> on our and AMTH blog, crafting official <b>press releases</b>, and sending <b>newsletters</b> to all our and the museum's followers. Of course, to top it all up, we run <b>digital ads campaigns on Meta and Google</b> that allowed us to reach more people, apart from our following, that was strategically targeted and already tested in the BETA version.</li><img style='border-radius: 20px;box-shadow: 0px 10px 42px -6px rgba(120,119,119,0.75);margin: 2rem 0;' src='/projects/project-amth-2.png' /><li><b>Offline activities:</b> For the offline part, a series of activities were planned as well. First of all, <b>the museum entrances were decorated</b> with special banners promoting the existence of the app and offering a QR code to download it. Then, to reach out to more possible users and Thessaloniki’s visitors we picked a <b>bus line</b> and 'dressed' it with a promotional coverage for everyone to see. The line we picked, starts from the Airport, passes through the whole city center, and ends up at the bus station, basically covering the most important points. <img style='border-radius: 20px;box-shadow: 0px 10px 42px -6px rgba(120,119,119,0.75);margin: 2rem 0;' src='/projects/project-amth-3.png' />Additionally, our plan included <b>two crucial spots in the Thessaloniki</b> city center, <b>Aristotelous Square and the White Tower</b>, where our people <b>promoted the app in person</b>, informing the visitors about how they can benefit from it and encouraging them to download it. Finally, <b>events marketing</b> was part of our plan. It took two different events to complete our idea of a strategic product launch.<img style='border-radius: 20px;box-shadow: 0px 10px 42px -6px rgba(120,119,119,0.75);margin: 2rem 0;' src='/projects/project-amth-4.png' />As the app was considered important to promote the city’s rich culture and history, many people took an interest in it. Therefore, the events were divided. The first one was designed for the city’s authorities and journalists. This was the audience that would help us promote the app further to areas we didn’t have direct access to and enlarge the number of people who chose to download and use the app. The second event, on the other hand, was purely for our end users who would have the chance to use the app for the first time within the museum. With that, we succeeded in growing <b>word of mouth</b> and increasing museum visitors to try the app out.<img style='border-radius: 20px;box-shadow: 0px 10px 42px -6px rgba(120,119,119,0.75);margin: 2rem 0;' src='/projects/project-amth-5.png' /></li></ul><h3 style='font-size: 18px; font-weight: bold;'>After the launch</h3>html<p class='custom-text'>As the product is finally revealed and the built anticipation is over, the aftermath remains just as important. Every strategy should include particular steps that would <b>keep the hype going</b> and start not only growing the audience but also <b>investing in building loyal ones</b>. Therefore, the duration of the third part of the launch can last a while. For the case of ‘Museum On The Go’ we kept the digital advertising going for months and sent promotional material to various events across Greece and the EU, with the help of our Municipality and the authorities of the Region of Central Macedonia. But, the one thing that we believe that kept us going was that we encouraged and maintained communication with our audience. We kept gathering their thoughts and feedback and evaluating the changes the product might need to make it more useful for them.</p><h2 style='font-size: 22px; font-weight: bold; margin-bottom: -1rem'>To sum it up</h2>html<p class='custom-text'>The benefits of anticipation marketing, especially in the case of a launch are impressive and proven for years now. But, being methodical is key to success as it’s an ongoing process that takes both time and a group effort. ‘Museum On The Go’ was just one of the cases we, once again, saw it happening. By building anticipation, the product had downloads even from the BETA version, and nowadays, after a few months only, it has exceeded 20k+ downloads and maintains its loyal users. So, overall getting your audience excited about your upcoming product launch is always a great way to ensure its early-on popularity and therefore, its later-on downloads or sales or…whatever it is in your case.</p>

Innovative Digital Ecosystem

Innovative Digital Ecosystem

for MOMus

In today's digital world, the way we experience art and culture is constantly evolving. Foreseeing this need and by wanting to stay ahead of the curve, MOMus required a unified digital ecosystem that not only would enhance the end user/visitor experience but also streamline their internal operationsHypertech made this happen by using the latest <b>UX/UI design principles</b>, incorporating <b>user and client feedback</b> in the process, and following the <b>user-centered design (UCD)</b> and <b>Action-centred design (ACD)</b> accordingly.One of the most exciting aspects and team’s goals for the project was to ensure its <b>scalability</b>. As technological breakthroughs keep debuting on daily basis, it was obvious, even from the research phase, that the size of the project and the number of products that would be developed couldn’t be purely focused on the current user and client needs. Therefore, during the strategy and approach design, Hypertech made a decision in regard to the technologies and frameworks that would ensure a long-lasting course. From <b>Drupal and Omeka S, to reusable components</b> in design and development, all were carefully selected to seamlessly accommodate <b>future expansions and technological advancements.</b><b>Interoperability</b> was an additional element that was decided to reflect the products delivered. This was achieved by treating and considering <b>all the products developed as part of a larger digital ecosystem</b> that would not only offer consolidation within each specific product’s parts, but also among the <b>systems communication</b>. This means that for example the DAM would interact with the CMS, the CMS would update the website, the apps, and the signage, etc. saving the admins valuable time and minimizing the error margins.To top it all, all activities were based on <b>Agile methodology</b> to ensure the robustness of the new digital ecosystem, <b>easy pivoting</b> whenever required, and repetitive circles of <b>testing and adjustments.</b><h2 style='font-size: 22px; font-weight: bold; margin-bottom: -2rem'>MOMus Website</h2>html<img style='border-radius: 20px;box-shadow: 0px 10px 42px -6px rgba(120,119,119,0.75);margin-bottom: 2rem;' src='/projects/project-momus-1.png' />html<p class='custom-text'>Serving as the <b>digital front door</b> to the museum, the new MOMus website > <a target='_blank' href='https://www.momus.gr'><b style='color: #263056'>https://www.momus.gr</b></a> is a pivotal element in this multi-faceted project. Utilising <b>UX principles</b> and <b>e-Culture trends</b>, the site was planned and from now on serves an intuitive and logical navigation experience.</p>html<p class='custom-text'>Built to be <b>responsive</b> across devices, the website facilitates effortless access to essential museum information, featured exhibitions, and educational programs as well as access to details on its expansive art collection. Hypertech also introduced new features (e.g. an interactive calendar, filters, and search functionalities) that added value to the overall experience and pushed further <b>content discoverability.</b></p>html<p class='custom-text'>The agile development methodology allowed for <b>iterative refinements</b> based on user and client feedback, making the website not <b>just visually appealing, but also engaging, and functionally vigorous.</b></p>html<p class='custom-text'><b>Watch the promo video >>></b> <a target='_blank' href='https://www.youtube.com/watch?v=A17AnqRMUyY'><b style='color: #263056'>https://www.youtube.com/watch?v=A17AnqRMUyY</b></a></p><h2 style='font-size: 22px; font-weight: bold'>MOMus Tour & Play App</h2>The <b>MOMus Tour & Play App</b> takes the museum experience to a new level, offering an engaging way for visitors to interact with art. Built using the latest <b>mobile UX design</b> principles and following a <b>hybrid</b> development approach, the app provides a blend of <b>educational and interactive elements.</b>html<img style='border-radius: 20px;box-shadow: 0px 10px 42px -6px rgba(120,119,119,0.75);margin-bottom: 2rem;' src='/projects/project-momus-2.png' />html<p class='custom-text'>Whether it's through <b>gamified</b> features like "Treasure Hunts" or in-depth information about artworks, the app <b>enhances the visitor experience</b>. It serves as an educational tool that's both fun and informative, redefining how museums can leverage digital platforms to increase visitor engagement.</p>html<p class='custom-text'><b>Download on Google Play >>></b> <a target='_blank' href='https://play.google.com/store/apps/details?id=com.momus.momus&pli=1'><b style='color: #263056'>https://play.google.com/store/apps/details?id=com.momus.momus&pli=1</b></a></p>html<p class='custom-text'><b>Download on App Store >>></b> <a target='_blank' href='https://apps.apple.com/tr/app/momus-tour-play/id6450505129'><b style='color: #263056'>https://apps.apple.com/tr/app/momus-tour-play/id6450505129</b></a></p>html<img style='border-radius: 20px;box-shadow: 0px 10px 42px -6px rgba(120,119,119,0.75);margin-bottom: 2rem;' src='/projects/project-momus-3.png' /><h2 style='font-size: 22px; font-weight: bold;margin-top: 2rem;margin-bottom: -2rem'>MOMus Digital Signages</h2>html<p class='custom-text'>The Digital Signage platform serves a vital role in <b>expanding MOMus’s reach by the museums’ visitors.</b> Designed with user engagement in mind, the system displays <b>curated content</b> in strategic locations, both within its museums and in various commercial areas where MOMus may want to include them. It serves as an <b>additional touchpoint</b> for educating passersby and visitors, effectively <b>extending the MOMus</b> brand beyond traditional boundaries.</p>html<img style='margin-top:2rem;border-radius: 20px;box-shadow: 0px 10px 42px -6px rgba(120,119,119,0.75);margin-bottom: 2rem;' src='/projects/project-momus-4.png' /><h2 style='font-size: 22px; font-weight: bold;margin-top: 2rem'>Digital Asset Management (DAM) System</h2>html<p class='custom-text'>The DAM system was another cornerstone of this comprehensive project, designed to revolutionise the way MOMus manages its extensive art collection from a single touch point. Utilising best practices in user-centered design (UCD) and action-centered design (ACD), the <b>Omeka S</b> system offers a <b>user-friendly interface</b> for efficient asset management.</p>html<p class='custom-text'>For the case of MOMus assets were considered not only the digital representations of the art collections, but all the <b>data and metadata</b> that came with each one of them. Such examples are their titles, dimensions, description, creator, type, and any other detail that describe it in any possible way, that mostly make sense for the end user. These were carefully selected, based on popular corresponding standards such as Dublin Core and CIDOC-CRM, and now are also presented at the website, the app and the signage. Of course, other metadata, that are only of a high value to the museum curators and admins, remained safely in the system.</p>html<p class='custom-text'>Apart from sorting out and organising such data and metadata for it to be suitably integrated and read by the DAM system, Hyperetch S.A. guaranteed for the system admins to be able to properly <b>curate such content, edit and overall maintain</b> all the MOMus heritage in a single and safe digital environment.</p>html<p class='custom-text'>Overall, the DAM provides for MOMus <b>a unified platform</b> where every piece of art is given a unique digital identity, <b>simplifying</b> both <b>internal workflows and external engagement.</b> The agile approach ensured the system's <b>strength and scalability</b>, allowing for future expansions and refinements.</p><h2 style='font-size: 22px; font-weight: bold;'>Content Management System (CMS)</h2>html<p class='custom-text'>Based on <b>Drupal</b>, the Content Management System that was developed for MOMus was designed to be <b>the center of all the front-end products.</b> The organisation’s users now have <b>a one-stop system</b> through which they can arrange all the content updates for the website, the app, and the digital signage as well as multiple points within them.</p>html<p class='custom-text'>The navigation within the system is also based on the principles of the UCD and therefore, allows the organisation’s content editors to easily discover the sections, quickly create or update content, and delete the parts that no longer offer value.</p><h2 style='font-size: 22px; font-weight: bold; margin-top: 2rem'>Digitalisation of artworks</h2>html<p class='custom-text'>One of the challenges of the project was to enrich the organisation’s heritage in the digital world. As the implementation of a DAM system was in progress and the new website from now on would also facilitate a new section for the <b>MOMus collections</b>, allowing the users to discover the artworks, it was important to augment the current digital database with more quality digital representations of the artworks.</p>html<img style='border-radius: 20px;box-shadow: 0px 10px 42px -6px rgba(120,119,119,0.75);margin-bottom: 2rem;' src='/projects/project-momus-5.jpg' />html<p class='custom-text'>For this purpose, Hypertech <b>digitalised more than 1.000 of the most significant works of art</b> that the organisation has in its possession. The procedure was carried out with <b>strict professionalism and respect for the art</b>, making all the steps carefully designed and agreed among the parties involved. The guidelines of the digitalisation itself were clearly defined and required top quality, so that the organisation could use it in all forms, from high-quality printable material to digital versions for the online users to get inspired.</p><b>Discover all the digitalised material of MOMus at >>></b> <a target='_blank' href='https://www.momus.gr/collections'><b style='color: #263056'>https://www.momus.gr/collections</b></a>

Interactive visualisations redesign

Interactive visualisations redesign

for EFSA

We are excited to announce that we completed the re-design and development of three cutting-edge interactive data visualisation products, tailored to accompany EFSA’s annual scientific report publications. Key Improvements and Features: html<ol style='margin: 0 20px'><li><b>Refreshed Visual Design:</b> Our products now boast a modern and intuitive visual design, following EFSA’s new brand guidelines. The interfaces have been thoughtfully redesigned to be visually appealing, enabling users to seamlessly navigate through the information and data presented.</li><li><b>Interactive Data Visualisations:</b> To foster a deeper understanding of the annual reports’ results, we have optimised the interactive data visualisations. These visual representations allow users to manipulate and interact with the data, uncovering valuable insights and trends that may not be immediately apparent. Whether you prefer graphs, charts, or maps, our redesigned products offer an array of dynamic visualisation options.</li><li><b>Accessibility and Multilingual Support:</b> Inclusivity is a priority for us. With the redesigned products, we have made significant strides in improving accessibility. The products adhere to international accessibility standards, ensuring that users with visual impairments or other disabilities can navigate and comprehend the content seamlessly.</li></ol>html<p style='margin-top: 40px; font-size: 25px'><b>Interactive visualisation for the 2021 EFSA pesticides report.</b></p>html<img src='/projects/project-interactive-visualisations-redesign-for-efsa-pesticides.png' />html<p class='custom-text'>The objectives of this product development initiative were two-fold.</p>html<p class='custom-text'><b>Firstly</b>, we aimed to support the annual report by presenting its results in an appealing and user-friendly manner. We understand the importance of clear and engaging visualisations that effectively communicate complex scientific evidence. Our redesigned product features a visually captivating interface, allowing users to explore and understand the findings of the report.</p>html<b>Secondly</b>, we sought to continue offering users with multiple angles for exploring scientific evidence. Recognising that our users come from diverse backgrounds and have varying levels of domain knowledge and interests, we embarked on optimising the information architecture through an updated design proposal, which has been endorsed by both the direct beneficiary and Member States stakeholder groups. Our aim is to empower all users, including media representatives, citizens, EU staff, Member State officials, and more, to make the most of the available information. html<a class='blog-link' style='font-size: 20px' href='https://multimedia.efsa.europa.eu/pesticides-report-2021/' target='_blank'>See the product here</a>html<p style='margin-top: 40px; font-size: 25px'><b>Interactive visualisation for the 2021 EFSA report on the results from the monitoring of veterinary medicinal product residues and other substances in live animals and animal products </b></p>html<img src='/projects/project-interactive-visualisations-redesign-for-efsa-vmpr.png' />html<p class='custom-text'>A successful redesign of our interactive data visualisation using Power BI. This powerful tool provides comprehensive insights into the residues of veterinary drugs and other substances found in animals and animal-derived food within the European Union.</p>html<p class='custom-text'>Powered by Power BI, the product’s dynamic visualisations allow users to interact with the data and gain valuable insights effortlessly. Users can explore the data by country, species, and specific substances, gaining a deeper understanding of the regulatory landscape and compliance levels.</p>html<p class='custom-text'>The redesign of our interactive data visualisation using Power BI demonstrates our commitment to delivering cutting-edge solutions that promote data transparency and understanding.</p>html<a class='blog-link' style='font-size: 20px' href='https://www.efsa.europa.eu/en/data-viz/results-monitoring-vmpr-2021' target='_blank'>See the product here</a>html<p style='margin-top: 40px; font-size: 25px'><b>Interactive visualisation for the European Union Summary Report on Antimicrobial Resistance in zoonotic and indicator bacteria from humans, animals and food in 2020/2021</b></p>html<img src='/projects/project-interactive-visualisations-redesign-for-efsa-amr.png' /><p class='custom-text'>Introducing the newly redesigned interactive data visualisation product showcasing comprehensive information on the resistance of Salmonella, E. Coli, and Campylobacter in animals, and humans, country by country. This invaluable resource is based on the "European Union Summary Report on Antimicrobial Resistance in zoonotic and indicator bacteria from humans, animals, and food", an authoritative publication released annually on the EFSA journal. By enhancing the interface of the product, we aim to facilitate the way users explore and understand antimicrobial resistance data, enabling informed decision-making and fostering a deeper understanding of this critical issue.</p><p class='custom-text'>Users can easily select specific bacteria types and explore the resistance patterns across different regions and countries within the European Union. By providing a comprehensive overview of antimicrobial resistance in animals, and humans, this interactive visualisation tool empowers researchers, policymakers, and stakeholders to identify trends, patterns, and potential areas of concern.</p>html<a class='blog-link' style='font-size: 20px' href='https://multimedia.efsa.europa.eu/dataviz-2021/index.htm' target='_blank'>See the product here</a>

Website and Progressive Web Application

Website and Progressive Web Application

for EFSA

Hypertech was tasked to provide with an intricate and hybrid platform that could cover the needs of the ONE 2022 Conference. The platform needed to provide to participants – speakers and audience alike – the ability to feel included irrespective of their location or device capabilities.In order to provide a seamless experience to the end-user our team created a Progressive Web Application (PWA) in Drupal 9, making sure that a responsive design and an intuitive and interactive user interface was implemented. That way all participants to the conference could experience exactly the same behaviour, whether logging in:<ul style='margin-bottom: 2rem'><li>through a laptop,</li><li>a mobile browser or</li><li>the app itself.</li></ul><p class='custom-text'>Further emphasising on merging physical and digital user experience, the following networking features were incorporated: </p><ul style='margin-bottom: 2rem'><li>Session live-streaming through Vimeo</li><li>The ability for remote speakers to participate live in each session</li><li>Each session provided through the digital platform, interactive capabilities for all audience members physical and online alike:<ul style='margin-left: 2rem'><li>a dedicated Chat channel to raise questions, post comments, reply to other user’s question etc.</li><li>a dedicated Polls channel to place a vote and view the results </li></ul></li><li>Meet the session contributors after each session, that participants could digitally meet the speakers of each session, know each other and discuss on specific topics of interest </li></ul>To cater for the different levels of participation an elaborate user registration scheme was created covering 3 different flows depending on the role of the user: <ul class='custom-text'><li>Speakers and Contributors</li><li>Poster Presenters and</li><li>Audience members.</li></ul>Each role was able to complete the registration process by filling-in different levels of information and by uploading the relevant documents (bio, photo, poster files and so on so forth).<p class='custom-text'>After the deadline of the registrations phase, the Organising Committee was responsible for screening and selecting the physical attendees while the rest of the participants were invited to participate online. All users have been informed automatically about their participation type through email, after the screening by the Organising Committee.</p><p class='custom-text'>During the registration phase and the event itself, detailed user statistics were available to the Organising Committee specifically through a Microsoft flow in PowerBI.</p>The application provided multiple levels of information for all users. A dynamic Agenda of the Conference and a Separate agenda for Satellite & Side Events. Dedicated pages to showcase Poster Abstracts, Poster Gallery, poster videos as well as the Programme Affiliates profiles.<p class='custom-text'>Overall, the application merged the physical and digital world to support the ONE-conference EFSA hybrid conference. Speakers and participants alike could walk into an auditorium via the venue or through their smartphone, tablet or pc and experience the same features, irrespective of their location.</p>

Data visualisation product

Data visualisation product

for EFSA

To accompany the annual publication of the European Union Report on pesticide residues, Hypertech designed and developed an interactive data visualisation product that supported the annual report by depicting its results in an appealing and user-friendly manner, to supply users with multiple angles of exploring the output of scientific research.To begin with, our company liaised with the scientific team responsible for writing and publishing the report as well as the different stakeholders involved in the development of the product, to catalogue the needs associated with the online publication and gain a better understanding of the dataset and the domain it covers.Our team was able to explore the underlying dataset using Python Jupyter Notebooks and formulate visualisation proposals that highlight the relationship of different variables, taking into consideration the intricacies of the domain and the sensitivity of information (regional and national data availability, existing legal and regulatory frameworks, etc.).As a result, a cohesive information architecture and design proposal was presented and endorsed by the direct beneficiary and Member States' stakeholder groups, which allows users with different domain knowledge, interests, and goals regarding the publication itself (media, citizens, EU staff, Member State officials, etc.) to make the most of the available information.At the same time, Hypertech aimed to offer a maintainable solution for EFSA; that is, the product’s dataset should be able to be updated annually without hampering the performance and visual output of charts, plots, and various UI elements and the overall user experience offered in the initial product. To achieve the above-mentioned goal, the technical stack used for the development was: html<ul><li><b>React JS:</b> to build a component-based web application, both at the controller and the presentation level that could be easily maintained and scaled in future developments.</li><li><b>AntV</b> (<a class='bold-600' href='https://antv.vision/en' target='_blank'>https://antv.vision/en</a>) to have an ecosystem of data visualization JavaScript libraries, that include a design system approach from which EFSA could benefit in the long term.</li></ul>

Consulting for the website redesign

Consulting for the website redesign

for BBI JU

Hypertech was assigned the project "Assistance with the preparation for the launch of a new website" from the Bio-based Industries Joint Undertaking (BBI JU) in March 2021.The successor of the BBI JU, the European Partnership for Circular Bio-based Europe (CBE), was aiming to launch a new website that will continue to channel the missions and objectives already established by BBI JU, that is protecting biodiversity, promoting a low-carbon economy, and encouraging economic growth by structuring and strengthening the circular bio-based industries sector. The project lasted five months and Hypertech’s role was to provide assistance, guidance, and advice to the organisation during all the stages of the project, segmented in the following tasks:<b>Task 1: Analysis of current website users</b><br>A full and detailed analysis was conducted, to evaluate the current situation and propose the next steps for optimization. The methodology included interviews with the members of the organisation through which Hypertech extracted the business priorities & objectives and identified the enablers and possible difficulties. The next step of the process was to find best practices for the industry and select the most relevant KPIs for the analysis of the current situation. The last step was to analyse the selected KPIs, compare them with the competition, and conclude with specific actions to formulate the proposal.<b>Task 2: Definition of target audiences for the new website</b><br>To meet user needs for an optimal user experience (UX) of the project in scope, Hypertech identified the exact target audience, through interview sessions with stakeholders and current users. In this direction, the main factors defined and decided included the main user goals and the ease of use, the final targeted audience or users, detailed characteristics of end-users, key industry-standard trends or techniques in similar projects. Hypertech’s team aimed to validate the suggested target audience and ensure that all potential users and stakeholders are adequately represented, and thus their needs and goals were taken into consideration at the new website development.<b>Task 3: Formulation of recommendations on the website content, structure, and navigation</b><br>Hypertech is providing a complete solution with a specific structure, content, and navigation tailored to users’ needs and goals and a cross-platform compatible, accessible, and search engine optimized website. Subtasks of this activity include the new information architecture with the creation of the new sitemap, formulation of the editorial styles and guidelines in regards to the tone of voice and wordings, and the high-fidelity mockups of the proposed solution. Specifically, Hypertech provided detailed design recommendations, that offer a systematic approach to color usage, specific UI elements, and interactions that adhere to brand guidelines in the form of high-fidelity mock-ups of all the webpages templates, such as homepage, list pages, login, contact forms, rich content pages, category pages, menus, and additional navigation items.<b>Task 4: Formulation of accessibility guidelines for the new website</b><br>Accessibility defines a user’s ability to use the website or web service, so the design phase should take into account users with all different disabilities, including visual, auditory, physical, speech, cognitive, language, learning, neurological, social, cultural, or conceptual. The Web Content Accessibility Guidelines (WCAG) 2.1 define how web content can be made accessible to people with disabilities. Hypertech provided all accessibility principles and recommendations for the Web accessibility of the new website that was developed.<b>Task 5: Formulation of recommendations on Search Engine Optimization (SEO)</b><br>Hypertech identifies three dimensions of optimizing a website for search engines: content, technical, and onsite, and through this task provided recommendations of optimizing the website for search engines pre-and post-launch with mandatory and optional audits.

Previous
Next

Wish to see your
project come to life?

Just contact us. We’d love to discuss your needs, struggles, and goals, and come up with solutions that will make an impact on you and your target audience.