Data visualisation product
Projects

Data visualisation product

for EFSA

Client

European Food Safety Authority (EFSA)

European Food Safety Authority (EFSA)

About the client

EFSA is the agency of the European Union that provides independent scientific advice and communicates on existing and emerging risks associated with the food chain.

project image

Deliverable

Design and development of an interactive data visualisation product

About the deliverable

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:

  • React JS: 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.
  • AntV (https://antv.vision/en) to have an ecosystem of data visualization JavaScript libraries, that include a design system approach from which EFSA could benefit in the long term.

Link

https://multimedia.efsa.europa.eu/pesticides-report-2020
project image

Related projects

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>

Interactive scroller

Interactive scroller

for EFSA

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.

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>

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.

Storytelling infographic

Storytelling infographic

for ERA

The general objective was the planning, design, and delivery of a one-page scrollable infographic, communicating the Agency’s work programme that was approved by the Agency’s Management Board and published on its website.The general objective was to increase the Agency’s presence in Europe, by informing the EU citizens and the stakeholders about the Agency’s mission, objectives, and activities in a simple, direct, and transparent way.Based on the Single Programming Document published by ERA, Hypertech conducted a UX analysis to identify the target audience and create the key messages. Information architecture was built based on a storytelling narrative. The story was based on ERA’s mission and how this would be accomplished by completing the approved activities. Each activity was described concerning all of its objectives, the required budget, and resources. To reach the purpose of the key message the data visualisations were:<ul>Hierarchical – Charting part-to-whole relationships and hierarchies</li>Relational – Graphing relationships to explore correlations and connections</li>Temporal – Showing trends and activities over timeFollowing a User-Centered Design approach, a prototype was created to depict the structure and all elements that would be included in the final storytelling product. After a set of testing and iterations, the visual design was formed with illustrations, and colours were added. Taking into account accessibility guidelines, the colour scheme was consistent with the agency’s brand identity and the colours used on its website, where the infographic would be hosted.Considering the data shared by ERA and the way this information would be explained most optimally visually, suitable charts and graphs were picked. After a couple of iterations and feedback incorporations, the final visual was completed in a static version. Then, interactions and animations were added to support the storytelling and bring a playful touch to the final product.In regards to technologies, the website was based on Drupal 7, and thus the infographic needed to be compliant with all relevant restrictions and, simultaneously, utilise Drupal’s capabilities. The website’s front-end was built upon Bootstrap, a popular CSS framework, which provides a specific responsive layout. Hypertech obliged the rules of this grid and provided the end product in alignment with the environment in which it would be injected.

Data Visualisation

Data Visualisation

for EFSA

The scope of this assignment was to present the data of 'Foodborne outbreaks 2019' report digitally by showing four different dashboards for users to explore. Based on interviews with scientists, we identified the data, the audience, and their needs, designed the mock-ups and the final product based on EFSA brand identity, and developed custom charts using JavaScript libraries on Power BI.

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.