D4.3 User interaction and user experience concept – v1
Abstract
The EMERALD UI/UX (user interface/user experience) offers the user interface (UI) and user experience (UX) to address (CaaS) and its continuous and lean re-certification aspects with a focus on the pilot partners and component owner’s needs. The goal certification-as-a-service is to develop an integrated and fully-fledged UI/UX for EMERALD. This deliverable D4.3 is related to WP4 - User interaction and user experience development and presents first results regarding T4.3 - Designing a user interaction and user experience concept. The document describes the applied methodology for deriving the user interaction concept and the user interface by considering the needs from the pilot partners as well as the component owners. The deliverable presents two sets of paper-based mock-ups followed by a first version of the clickable mock-ups of the EMERALD UI/UX.
Full text
Deliverable D4.3 User interaction and user experience concept – v1 Editor(s): Angela Fessl Responsible Partner: Know-Center GmbH Status-Version: Final Date: 31.10.2024 Type: R Distribution level (SEN, PU): PU
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 2 of 103 www.emerald-he.eu Project Number: 101120688 Project Title: EMERALD Title of Deliverable: D4.3 – User interaction and user experience concept – v1 Due Date of Delivery to the EC 31.10.2024 Workpackage responsible for the Deliverable: WP4 - User interaction and user experience development Editor(s): Angela Fessl, Simone Franza, Leonie Disch (KNOW) Contributor(s): Christian Banse (FHG) Franz Deimling (FABA) Marinella Petrocchi (CNR) Cristina Regueiro Senderos, Cristina Martínez Martínez, Iñaki Etxaniz Errazkin (TECNALIA) Reviewer(s): Mika Leskinen (NIXU) Cristina Martínez Martínez (TECNALIA) Juncal Alonso Ibarra (TECNALIA) Approved by: All Partners Recommended/mandatory readers: WP1, WP2, WP3, WP5, WP6 Abstract: Initial version of the report on the developed mock-ups for the user interaction und user experience concept. Keyword List: Paper-based mock-ups, Clickable mock-ups, User journeys Licensing information: This work is licensed under Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0 DEED https://creativecommons.org/licenses/by-sa/4.0/) Disclaimer Funded by the European Union. Views and opinions expressed are however those of the author(s) only and do not necessarily reflect those of the European Union. The European Union cannot be held responsible for them.
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 3 of 103 www.emerald-he.eu Document Description Version Date Modifications Introduced Modification Reason Modified by v0.1 08.10.2024 First draft version Angela Fessl (KNOW) v0.2 10.10.2024 QA Review Mika Leskinen (NIXU) v0.3 17.10.2024 Integration of the QA Review comments Angela Fessl (KNOW) v0.4 28.10.2024 Final review Cristina Martínez/ Juncal Alonso (TECNALIA) v0.5 29.10.2024 Integration of the final review comments Angela Fessl/Leonie Disch/ Simone Franza (KNOW) v1.0 31.10.2024 Submitted to the European Commission Cristina Martínez/Juncal Alonso (TECNALIA)
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 4 of 103 www.emerald-he.eu Table of contents Terms and abbreviations ............................................................................................................... 9 Executive Summary ..................................................................................................................... 10 1 Introduction ......................................................................................................................... 11 1.1 About this deliverable .................................................................................................. 11 1.2 Document structure ..................................................................................................... 12 2 Methodology ....................................................................................................................... 13 2.1 Interview with Pilot Partners ....................................................................................... 14 2.2 Personas, Scenarios, and User Journeys Workshops .................................................. 15 2.2.1 Procedure .......................................................................................................... 15 2.3 EMERALD UI & Component Workshops ...................................................................... 16 2.3.1 Procedure .......................................................................................................... 16 2.4 EMERALD Terminology ................................................................................................ 19 3 Mock-ups derived from Interviews with Pilot Partners ...................................................... 20 4 Mock-ups developed with the User Journeys ..................................................................... 25 4.1 Summary of Personas and Scenarios ........................................................................... 25 4.2 User Journeys and Mock-ups ....................................................................................... 26 4.2.1 User Journey 1: Emerson – Bring your own certification scheme..................... 26 4.2.2 User Journey 2: Dylan – Internal Control Owner Control Implementation....... 33 4.2.3 User Journey 3: Charlie – Preparation of an audit by an internal auditor ........ 40 5 Clickable Prototypes ............................................................................................................ 48 5.1 General EMERALD UI ................................................................................................... 48 5.1.1 Setting up and managing Certification Targets ................................................. 50 5.1.2 Setting up and managing Audit Scopes ............................................................. 56 5.2 Integration of Assessment and Management of Organisational Evidence (AMOE) into the EMERALD UI .................................................................................................................. 63 5.2.1 Results of Workshop 1 ....................................................................................... 63 5.2.2 Results of Workshop 2 ....................................................................................... 65 5.2.3 Functionality and clickable prototype of AMOE ................................................ 65 5.3 Integration of Clouditor-Orchestrator into the EMERALD UI ...................................... 65 5.3.1 Results of Workshop 1 ....................................................................................... 65 5.3.2 Functionality and clickable prototype of Clouditor-Orchestrator ..................... 67 5.3.3 Results of Workshop 2 ....................................................................................... 68 5.4 Integration of the Mapping Assistant for Regulations with Intelligence (MARI) into the EMERALD UI ......................................................................................................................... 68 5.4.1 Results of Workshop 1 ....................................................................................... 68 5.4.2 Functionality and Clickable Prototype of MARI ................................................. 70 5.4.3 Results of Workshop 2 ....................................................................................... 75
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 5 of 103 www.emerald-he.eu 5.5 Integration of the Repository of Controls and Metrics (RCM) into the EMERALD UI .. 75 5.5.1 Results of Workshop 1 ....................................................................................... 76 5.5.2 Functionality and clickable prototype of RCM .................................................. 77 5.5.3 Results of Workshop 2 ....................................................................................... 82 5.6 Integration of the Trustworthiness System (TWS) into the EMERALD UI .................... 83 5.6.1 Results of Workshop 1 ....................................................................................... 83 5.6.2 Functionality and clickable prototype of the TWS ............................................ 85 5.6.3 Results from Workshop 2 .................................................................................. 87 6 Conclusions .......................................................................................................................... 88 7 References ........................................................................................................................... 89 8 APPENDIX A: Mock-ups derived from the interviews ......................................................... 91 8.1 Mock-ups for managing an audit scope ...................................................................... 91 8.2 Mock-ups presenting the overview of an audit scope ................................................ 94 8.3 Mock-ups presenting the controls ............................................................................... 96 9 APPENDIX B: Mock-ups derived from the user journeys .................................................. 101 9.1 Additional Mock-ups developed for User Journey 1 ................................................. 101
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 6 of 103 www.emerald-he.eu List of Tables TABLE 1. LIST OF THE PERSONAS, SCENARIOS AND USER JOURNEYS WORKSHOPS ....................................... 15 TABLE 2. OVERVIEW OF THE WORKSHOPS: EMERALD UI & COMPONENTS .............................................. 16 List of Figures FIGURE 1. OVERALL METHODOLOGY USED FOR DEVELOPING THE EMERALD UI ........................................ 14 FIGURE 2. TEMPLATE FOR DEVELOPING THE USER JOURNEYS ................................................................... 16 FIGURE 3. EXAMPLE OF A PREPARED MIRO BOARD FOR TWS WITH THE THREE DIFFERENT FRAMES................ 18 FIGURE 4. PAPER-BASED MOCK-UPS - EMERALD DESIGN ..................................................................... 21 FIGURE 5. PAPER-BASED MOCK-UPS - EMERALD LANDING PAGE .......................................................... 21 FIGURE 6. PAPER-BASED MOCK-UPS - SETUP OF A NEW AUDIT SCOPE ...................................................... 22 FIGURE 7. PAPER-BASED MOCK-UPS - AUDIT SCOPE OVERVIEW ............................................................... 23 FIGURE 8. PAPER-BASED MOCK-UPS - SHOW INFORMATION ABOUT A CONTROL ........................................ 24 FIGURE 9. USER JOURNEY 1: EMERSON – BRING YOUR OWN CERTIFICATION SCHEME ................................. 28 FIGURE 10. PAPER-BASED MOCK-UPS - USER JOURNEY 1 - STEP 2: ADD BYOCS TO THE EMERALD UI LANDING PAGE ........................................................................................................................ 29 FIGURE 11. PAPER-BASED MOCK-UPS - USER JOURNEY 1 - STEP 2: SET A SCHEME NAME AND SELECT THE SCHEMES ................................................................................................................................ 30 FIGURE 12. PAPER-BASED MOCK-UPS - USER JOURNEY 1 – STEP 2: ADD CONTROLS FROM EXISTING SCHEME TO NEW SCHEME .......................................................................................................................... 31 FIGURE 13. PAPER-BASED MOCK-UPS - USER JOURNEY 1 – STEP 2: DEFINE OWN CONTROL ........................ 32 FIGURE 14. PAPER-BASED MOCK-UPS - USER JOURNEY 1 – STEP 3: SELECT NEW SCHEME FOR A NEW AUDIT SCOPE .................................................................................................................................... 32 FIGURE 15. USER JOURNEY 2: DYLAN – ICO CONTROL IMPLEMENTATION ................................................ 35 FIGURE 16. PAPER-BASED MOCK-UPS - USER JOURNEY 2 - STEP 1: OPEN AN EXISTING AUDIT SCOPE ............ 36 FIGURE 17. PAPER-BASED MOCK-UPS - USER JOURNEY 2 – STEP 1: AUDIT SCOPE OVERVIEW WITH THE LIST OF CONTROLS .............................................................................................................................. 37 FIGURE 18. PAPER-BASED MOCK-UPS - USER JOURNEY 2 – STEP1: FILTERING OF CONTROLS ....................... 38 FIGURE 19. PAPER-BASED MOCK-UPS - USER JOURNEY 2 – STEP 1: LIST OF OPEN CONTROLS ...................... 39 FIGURE 20: PAPER-BASED MOCK-UPS - USER JOURNEY 2 – STEP 2: ASSIGNING A CONTROL TO EMPLOYEES OR DEPARTMENTS ......................................................................................................................... 39 FIGURE 21. PAPER-BASED MOCK-UPS - USER JOURNEY 2 – STEP 3: PERSONAL WORKSPACE AND NUMBER OF OPEN TASKS ............................................................................................................................ 40 FIGURE 22. USER JOURNEY 3: CHARLIE – PREPARATION OF AN AUDIT BY AN INTERNAL AUDITOR .................. 42 FIGURE 23. PAPER-BASED MOCK-UPS - USER JOURNEY 3 – STEP 2: SETTING UP A NEW AUDIT SCOPE ........... 43 FIGURE 24. PAPER-BASED MOCK-UPS - USER JOURNEY 3 – STEP 2: AUDIT SCOPE OVERVIEW ...................... 44 FIGURE 25. PAPER-BASED MOCK-UPS - USER JOURNEY 3 – STEP 3: FILTERING FOR NON-COMPLIANT CONTROLS ............................................................................................................................................. 45 FIGURE 26. PAPER-BASED MOCK-UPS - USER JOURNEY 3 – STEP 4: CHECK THE REASON OF NON-COMPLIANCE ............................................................................................................................................. 46 FIGURE 27. PAPER-BASED MOCK-UPS - USER JOURNEY 3 – STEP 4: DETAILED INFORMATION ABOUT NONCOMPLIANCE ........................................................................................................................... 46 FIGURE 28. PAPER-BASED MOCK-UPS - USER JOURNEY 3 – STEP 5: DOWNLOAD THE REPORT ...................... 47 FIGURE 29. OVERVIEW OF THE EMERALD UI VISUALISATION STREAMS .................................................. 49 FIGURE 30. EMERALD LANDING PAGE .............................................................................................. 49 FIGURE 31. CERTIFICATION TARGET - SETUP CERTIFICATION TARGET ........................................................ 50 FIGURE 33. CERTIFICATION TARGET - DESCRIPTION OF HOW TO INSTALL AN EVIDENCE COLLECTOR ................ 51
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 7 of 103 www.emerald-he.eu FIGURE 32. CERTIFICATION TARGET - EVIDENCE COLLECTORS FOR THE RESPECTIVE TARGET OF EVALUATION.... 51 FIGURE 34. CERTIFICATION TARGET - AMOE – OVERVIEW OF METRICS AND CORRESPONDING POLICY FILES ... 52 FIGURE 35. CERTIFICATION TARGET - AMOE – UPLOAD A POLICY DOCUMENT AND SELECT THE RESPECTIVE METRICS THAT SHOULD BE EXTRACTED FROM IT ............................................................................. 53 FIGURE 36. CERTIFICATION TARGET - EKNOWS - DEFINE WHERE TO FIND THE RESOURCES FOR EKNOWS ......... 54 FIGURE 37. CERTIFICATION TARGET - SCREENSHOT OF THE TWS SETUP PAGE ........................................... 55 FIGURE 38. CERTIFICATION TARGET - SELECT AN EXISTING CERTIFICATION TARGET FROM THE LIST TO OPEN IT 55 FIGURE 39. AUDIT SCOPE – SETUP A NEW AUDIT SCOPE ......................................................................... 56 FIGURE 40. AUDIT SCOPE - SELECT AN EXISTING AUDIT SCOPE ................................................................. 57 FIGURE 41. AUDIT SCOPE – ENTRY PAGE OF AN AUDIT SCOPE ................................................................. 58 FIGURE 42. AUDIT SCOPE – OVERVIEW PAGE OF A CONTROL .................................................................. 59 FIGURE 43. AUDIT SCOPE – ASSESSMENT OVERVIEW OF THE METRICS ASSIGNED TO A CONTROL ................... 59 FIGURE 44. AUDIT SCOPE – OVERVIEW OF AN ORGANISATIONAL METRIC .................................................. 60 FIGURE 45. AUDIT SCOPE – UPLOAD A POLICY DOCUMENT AND SELECT METRICS ....................................... 61 FIGURE 46. AUDIT SCOPE – ASSIGNMENT OF INDIVIDUALS OR DEPARTMENTS TO A CONTROL ....................... 61 FIGURE 47. AUDIT SCOPE – SHOW HISTORY OF CHANGES FOR THE RESPECTIVE CONTROL ............................. 62 FIGURE 48. AUDIT SCOPE – SHOW HISTORY CHANGES OF A CONTROL IN DETAIL ......................................... 62 FIGURE 49. AMOE - SCREENSHOT OF THE MIRO BOARD WITH YELLOW AND VIOLET STICKY-NOTES TO CAPTURE THE FUNCTIONALITY AND FEATURES FOR AMOE ........................................................................... 64 FIGURE 50. ORCHESTRATOR - SCREENSHOT OF THE MIRO BOARD WITH YELLOW AND VIOLET STICKY-NOTES TO CAPTURE THE FUNCTIONALITY AND FEATURES FOR THE ORCHESTRATOR ............................................ 66 FIGURE 51. CLOUDITOR-ORCHESTRATOR – RESOURCE GRAPH SHOWING ALL TECHNICAL EVIDENCE ............... 68 FIGURE 52. MARI - SCREENSHOT OF THE MIRO BOARD WITH YELLOW AND VIOLET STICKY-NOTES TO CAPTURE THE FUNCTIONALITY AND FEATURES FOR THE MARI COMPONENT .................................................... 70 FIGURE 53. CERTIFICATION SCHEME - OVERVIEW PAGE ......................................................................... 71 FIGURE 54. MARI - OVERVIEW OF CONTROLS AND MAPPED METRICS ...................................................... 72 FIGURE 55. MARI - PRESENTATION OF A METRIC DEFINITION ................................................................. 72 FIGURE 56. MARI - SELECT TWO OR MORE SCHEMES FOR MAPPING THEIR CONTROLS................................. 73 FIGURE 57. MARI - MAPPING CONTROLS FROM EUCS TO BSI C5 .......................................................... 74 FIGURE 58. MARI - MAPPING CONTROLS FROM BSI C5 TO EUCS .......................................................... 75 FIGURE 59. RCM - SCREENSHOT OF THE MIRO BOARD WITH YELLOW AND VIOLET STICKY-NOTES TO CAPTURE THE FUNCTIONALITY AND FEATURES FOR RCM .............................................................................. 77 FIGURE 60. RCM - CERTIFICATION SCHEME OVERVIEW PAGE – OVERVIEW PAGE ....................................... 78 FIGURE 61. RCM – BROWSE EUCS SCHEME: VIEW HIGH LEVEL CATEGORIES ............................................. 79 FIGURE 62. RCM – BROWSE EUCS SCHEME: VIEW SUB-CATEGORIES ....................................................... 79 FIGURE 63. RCM - OVERVIEW OF THE CONTROLS BELONGING TO A CATEGORY .......................................... 80 FIGURE 64. RCM - OVERVIEW OF THE LIST OF METRICS ASSIGNED TO A CONTROL ...................................... 81 FIGURE 65. RCM - PRESENTATION OF AN IMPLEMENTATION GUIDELINE FOR A CONTROL ............................ 81 FIGURE 66. RCM - UPLOAD A NEW CERTIFICATION SCHEME ................................................................... 82 FIGURE 67. TWS - SCREENSHOT OF THE MIRO BOARD WITH YELLOW AND VIOLET STICKY-NOTES TO CAPTURE THE FUNCTIONALITY AND FEATURES FOR THE TWS ........................................................................ 84 FIGURE 68. TWS - SCREENSHOT OF AN AUDIT SCOPE WITH THE “GREEN SYMBOL” FOR THE INTEGRITY CHECK 86 FIGURE 69. TWS - SCREENSHOT OF AN AUDIT SCOPE WITH THE “RED SYMBOL” FOR THE INTEGRITY CHECK .... 86 FIGURE 70. TWS - SCREENSHOT OF A TWS REPORT WHEN THE DATA INTEGRITY IS NOT GIVEN ANYMORE ...... 87 FIGURE 71. PAPER-BASED MOCK-UPS - OPEN AN EXISTING AUDIT SCOPE .................................................. 91 FIGURE 72. PAPER-BASED MOCK-UPS – UPDATE THE CERTIFICATION SCHEME OF AN EXISTING AUDIT SCOPE ... 92 FIGURE 73. PAPER-BASED MOCK-UPS - MAKE A COPY OF AN EXISTING AUDIT SCOPE .................................. 93 FIGURE 74. PAPER-BASED MOCK-UPS - SHOW OVERVIEW OF A CATEGORY AND THE RESPECTIVE CONTROLS.... 94 FIGURE 75. PAPER-BASED MOCK-UPS - SHOW AN OVERVIEW OF THE CONTROLS ONLY (WITHOUT CATEGORIES) ............................................................................................................................................. 95 FIGURE 76. PAPER-BASED MOCK-UPS - SUGGESTION OF HOW TO PRESENT DIFFERENT TYPES OF EVIDENCE FOR A CONTROL (V1) ......................................................................................................................... 96
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 8 of 103 www.emerald-he.eu FIGURE 77. PAPER-BASED MOCK-UPS - SUGGESTION OF HOW TO SHOW DIFFERENT TYPES OF EVIDENCE FOR ONE CONTROL (V2) ......................................................................................................................... 97 FIGURE 78. PAPER-BASED MOCK-UPS - SUGGESTION OF HOW TO PRESENT INFORMATION ABOUT NONCOMPLIANCES ......................................................................................................................... 98 FIGURE 79. PAPER-BASED MOCK-UPS - SUGGESTION OF HOW TO ASSIGN A CONTROL TO A COLLEAGUE OR A WHOLE DEPARTMENT ............................................................................................................... 99 FIGURE 80. PAPER-BASED MOCK-UPS - SUGGESTION OF THE HISTORY LOG INFORMATION VIEW OF A CONTROL ........................................................................................................................................... 100 FIGURE 81. PAPER-BASED MOCK-UPS - USER JOURNEY 1: UPDATING A SELF-DEFINED SCHEME .................. 101 FIGURE 82. PAPER-BASED MOCK-UPS - USER JOURNEY 1: SELECT AN EXISTING SELF-DEFINED CERTIFICATION SCHEME ............................................................................................................................... 102 FIGURE 83. PAPER-BASED MOCK-UPS - USER JOURNEY 1: EDIT AN EXISTING SELF-DEFINED CERTIFICATION SCHEME ............................................................................................................................... 103
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 9 of 103 www.emerald-he.eu Terms and abbreviations AI Artificial Intelligence AI-SEC AI Security Evidence Collector AMOE Assessment and Management of Organisational Evidence BYOCS Bring Your Own Certification Scheme BSI Bundesamt für Sicherheit in der Informationstechnik CaaS Certification-as-a-service CISO Chief Information Security Officers CSP Cloud Service Provider DoA Description of Action EC European Commission ENS Esquema Nacional de Seguridad EUCS European Cybersecurity Certification Scheme for Cloud Service GA Grant Agreement to the project ICO Internal Control Owner KPI Key Performance Indicator MARI Mapping Assistant for Regulations with Intelligence NLP Natural Language Processing OSCAL Open Security Controls Assessment Language RCM Repository of Controls and Metrics TWS Trustworthiness System UI User Interface UX User Experience
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 16 of 103 www.emerald-he.eu • Scenario steps: the upper part of the template allows to split the scenario into different steps (see Figure 2, point 1). • Interaction with the EMERALD UI: For each step of the scenario, a description of the interaction with the EMERALD UI should be added (see Figure 2, point 2). • Mock-ups: Below we have added some mock-ups that might fit to the corresponding scenario (see Figure 2, point 3). The resulting User Journeys for the three personas are presented in detail in Section 4. 2.3 EMERALD UI & Component Workshops After having done a set of interviews and focus groups with the pilot partners, and after having done a first workshop on Personas & Scenarios, and especially User Journeys, we set up a workshop series with all EMERALD component owners (see Table 2). The goal of this workshop series is to find out how to integrate all EMERALD components into the EMERALD UI. Table 2. Overview of the workshops: EMERALD UI & Components Component Part I Part II Part III AMOE 31.07.2024 22.08.2024 Clouditor-Orchestrator 31.07.2024 11.10.2024 MARI 23.07.2024 09.10.2024 17.10.2024 RCM 24.07.2024 10.09.2024 TWS 01.08.2024 26.08.2024 eknows / Codyze 09.10.2024 Not planned yet AI-SEC / Clouditor-Discovery Not planned yet Not planned yet 2.3.1 Procedure To set up the workshop series, we sent out an invite to all EMERALD project partners. We asked them to fill in a Doodle to schedule two dates for each component. The first workshop date for each component meeting (Workshop – Part I) was set for the last two weeks of July and beginning of August 2024. The second workshop series (Workshop – Part II) took place Figure 2. Template for developing the user journeys
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 17 of 103 www.emerald-he.eu end of August and mid of September 2024. In all workshops, we used Miro 3 as an online collaborative whiteboard. Workshop (Part I): Each workshop followed the same structure. At the beginning of each workshop, we presented the goal of the workshop namely to find out how to integrate the EMERALD component into the EMERALD UI. For each of the components we have created a Miro board with three different frames as presented in Figure 3. In the first Miro frame, we shortly summarized the purpose of the respective component. In a first discussion round we discussed with the component owner the respective component to see if we have understood its purpose correctly or if something was missing. Subsequently we discussed with the component owner how to integrate the component into the UI from two perspectives – the first one was about how to set-up the component (if necessary) and the second one was about the integration of the component into the UI when working with it. • “Set-up” of the component: In the second frame of the Miro Board, we made available predefined mock-ups of the EMERALD landing page, possibilities to set up EMERALD as well as neutral mock-ups. Then we discussed with the component owner step-by-step what was needed for setting up the component (if necessary) asking questions such as: Which information is needed to set up the component? Which information should be presented in the UI? Which functionality should be offered by the UI? • “Working” with the component: In the third frame, we added on the one hand mockups we have prepared regarding how we thought the component could be integrated into the UI. On the other hand, we again added empty mock-ups to leave room for innovation and creativity. Again, we asked similar questions regarding the visualisation and functionality. 3 Miro: https://miro.com/
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 18 of 103 www.emerald-he.eu Figure 3. Example of a prepared Miro board for TWS with the three different frames
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 19 of 103 www.emerald-he.eu Workshop (Part II): The goal of each follow-up workshop was to present the created clickable prototypes developed in Figma 4 to discuss if they work in a way that is in line with what the component owners would like to have and if the prototype fulfils all required functionalities. Similar to the first workshop, we first presented the results from two perspectives – the set-up phase (where applicable) and the working phase. As those phases are strongly dependent on the different components, the workshops were tailored to the component owner’s needs and the component’s integration into the UI. For example, to set up a cloud service, registered evidence extractors need to be added to the cloud service to retrieve the assessment results from Clouditor-Orchestrator. For AMOE no set-up is necessary, and it must be possible to upload the respective policy documents for the different controls or schemes. 2.4 EMERALD Terminology During the development of the paper-based and clickable mock-ups, the consortium discussed and unified the naming convention for the whole EMERALD project. “Certification target” is a (cloud) service that will be certified according to a specific certification scheme; it represents what a system or service does and how it does it (including the architecture). “Audit scope” (previously called audit instance) is a detailed description of what will be audited; it consists of a combination of the certification target and a respective certification scheme. More information about the EMERALD terminology can be found in D1.3 [16]. As the development of the EMERALD terminology took place after the development of the first paper-based mock-ups, the paper-based mock-ups presented below (Section 3 and 4) contain the previous terminology – namely “audit instance” (instead of audit scope). The clickable mock-ups (Section 5) contain already the correct EMERALD terminology. 4 Figma: https://www.figma.com
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 20 of 103 www.emerald-he.eu 3 Mock-ups derived from Interviews with Pilot Partners In the context of WP4, we have conducted different types of interviews. On the one hand, we conducted an interactive interview session with all pilot partners at the general assembly in Bilbao (March 2024). The goal of this session was to get insights about the pilot partners, their pain points and needs during the set-up and conduction of audit processes, and to get first ideas or insights where the EMERALD UI could support them. On the other hand, we conducted interviews with all pilot partners individually. The goal of these interviews was to elicit in-depth insights about the work of auditors (A), compliance managers (CM), and (chief information) security officers (CISO) in relation to continuous cloud auditing processes. From these, we were able to derive concrete work processes and 17 initial requirements (as presented in D4.1 [1]) for the development of the EMERALD UI/UX. More information about the interactive interview session and the interviews conducted with the pilot partners was presented in D4.1 [1]. Based on the insights gained from the different types of interviews, as well as the derived UI/UX requirements, we derived a first set of paper-based mock-ups. These mock-ups were drawn with PowerPoint to get a first impression of how the EMERALD UI/UX could look like and which functionalities should be available. Altogether, we were able to create around 20 mock-ups consisting of the following parts: • EMERALD Look & Feel: Before starting with the development of the mock-ups, we developed an initial EMERALD Design, as depicted in Figure 4, which was then used throughout all the mock-ups. • EMERALD Landing Page: We developed a first version of how the EMERALD Landing Page could look like, as depicted in Figure 5. • Set-up an audit scope: We drew a first mock-up about how an EMERALD audit scope (previously called target of evidence) could be set up, as shown in Figure 6. • Overview of an audit scope: After having created an audit scope, we prepared some mock-ups of what the audit scope overview page might look like as, presented in Figure 7. • Managing individual controls: We developed a mock-up showing the respective information per control, including an overview of the control, evidence, noncompliance, metric, assignment, and history, as presented in Figure 8. Be aware, that in this first set of mock-ups only the needs of the pilot partners were considered. Up to this point, we had not talked in detail with the component owners, consequently these mock-ups did not yet represent the needs of each component, nor their functionalities and features. This means that the mock-ups presented below were not completed and needed further refinements and continuous design iterations. Figure 4 presents the first idea of the EMERALD design, considering the overall EMERALD project design and the colour palette designed of the project.
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 21 of 103 www.emerald-he.eu Figure 5 presents the landing page which should provide direct access to the most relevant functionalities and features of EMERALD, including the respective EMERALD components. In the first draft, we added all EMERALD components explicitly here, however, as the EMERALD Figure 4. Paper-based Mock-ups - EMERALD Design Figure 5. Paper-based Mock-ups - EMERALD Landing Page
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 22 of 103 www.emerald-he.eu UI should be an integrated UI including all EMERALD components, this would be changed. Figure 6 shows the initial version of how-to setup an audit scope (still called “audit instance” in the mock-up). In addition to naming the audit scope, it allows the user to select a predefined cloud service and the respective certification scheme (still called “standard” in the mock-up). Furthermore, it is possible to upload policy documents. What is missing is the relation to the technical evidence, which would be addressed at a later stage. Figure 7 shows what the overview page for an audit scope might look like. On top it presents information regarding the audit scope, the selected certification target (still called “cloud service” in the mock-up), the certification scheme (called “standard” in the mock-up) and the assurance level. Below it provides some boxes with overview information about the compliance and non-compliance states across all controls, general status information about the individual controls as well as a box regarding the upload of the policy documents. Below it presents a search bar allowing to search for specific controls and then presents a list of the categories and controls of the respective certification schemes, functionalities for filtering the list and accessing the individual controls. Figure 6. Paper-based Mock-ups - Setup of a new audit scope
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 23 of 103 www.emerald-he.eu Figure 8 presents a detailed view of a control. Information about the audit scope and the control are on top of the mock-up. Below a user can switch via several “tabs” to the different information including: i) overview of the control - presenting some general information, ii) evidence – showing the pieces of evidences extracted for the control, iii) non-compliance – if this control would be non-compliant, the reasons would be presented here, iv) metric information – presents which metrics were assigned to the control, v) assignment information – showing information on who is responsible for the control, vi) and a history – showing how the implementation of the control has evolved over time. Figure 7. Paper-based Mock-ups - Audit scope overview
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 24 of 103 www.emerald-he.eu Further mock-ups can be found in the APPENDIX A: Mock-ups derived from the interviews. Figure 8. Paper-based Mock-ups - Show information about a control
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 25 of 103 www.emerald-he.eu 4 Mock-ups developed with the User Journeys The first Personas, Scenarios, and User Journey workshop was conducted in June 2024. This workshop was divided into two parts. In the first part (05.06.2024) four personas were developed, in the second part (12.06.2024), three concrete scenarios and corresponding user journeys were developed. 4.1 Summary of Personas and Scenarios In this section, a short summary of the developed personas and scenarios are presented. The detailed results of the developed personas and scenarios are reported in D4.1 [1]. In the first part of the workshop, four different personas were developed, which are summarized below: • Emerson – Compliance Manager in Financial Services Institution: Emerson focuses on risk management of third-party cloud services, assesses controls based on risk and regulation, manages contractual agreements, and monitors compliance. The overall goal of Emerson is to ensure i) that all service providers are compliant with given standards, and ii) safety by mitigating risks associated with audit requirements. Challenges refer to the communication across departments. EMERALD could help in the day-to-day tasks by providing a centralized point for evidence, metrics, and controls, by automating tedious processes and management of numerous audits and reducing the workload. • Riley – Cloud Service Compliance Manager: Riley is a junior compliance analyst whose responsibilities are organizing audits and managing the scheduling of different compliance schemes. Riley's goals are to support the company in being trustworthy, perfecting audit processes, being up to date with security standards, and performing tasks more efficiently. Riley’s pain points refer to i) reliance on others to finish tasks timely, ii) lack of efficient audit tools, and iii) lack of understanding of complex certification frameworks. EMERALD should help Riley with the day-to-day tasks by speeding up the work. • Dylan – Internal Control Owner: Dylan is an experience product owner and is responsible for leading the head of production team and overseeing and planning product development and backend services. Regarding audits, Dylan’s tasks consist of defining metrics, collecting evidence for controls, assigning and delegating control implementation to the team aiming at having no non-compliance for all services. EMERALD could help Dylan by allowing to i) simply delegate tasks, ii) provide an overview of assigned controls and iii) display assessment results. • Charlie – Internal Auditor: Charlie is a senior auditor, and Charlie's responsibilities include managing the audit process, planning, reporting, and maintaining contact with customers. Charlie offers templates to the customers/colleagues with the goal to i) provide easy access to information/evidence, ii) reduce risks, iii) fulfil audit KPIs, and iv) help customers. Challenges refer to getting in contact with the responsible person and retrieving the relevant information. The EMERALD UI could help by providing an overview of the required information and support the creation of respective reports. In the second part of the workshop, three different scenarios were developed for Emerson, Dylan, and Charlie, which are summarized as follows: • Scenario 1: Emerson – Bring Your Own Certification Scheme: In this scenario, Emerson is tasked with creating a custom certification scheme by selecting and combining controls from existing schemes (e.g. EUCS, BSI C5), a process referred to as
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 32 of 103 www.emerald-he.eu Figure 13 presents the possibility to add a new self-defined control. Figure 14 presents how to select the newly created scheme for setting up a new audit scope. Figure 13. Paper-based Mock-ups - User Journey 1 – Step 2: Define own control Figure 14. Paper-based Mock-ups - User Journey 1 – Step 3: Select new scheme for a new audit scope
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 33 of 103 www.emerald-he.eu In addition to the mock-ups presented above, three further mock-ups were developed that show how to edit the self-defined scheme. These mock-ups are added in APPENDIX B: Mockups derived from the user journeys, in Section 9.1. 4.2.2 User Journey 2: Dylan – Internal Control Owner Control Implementation The scenario for Dylan was also divided into six steps, as depicted in Figure 15. For each step, first Dylan’s task is described and then the interaction with the EMERALD UI. Step 1: • Dylan’s Task: Dylan opens the EMERALD UI to check if there are any new controls that need to be worked on. • Dylan’s Interaction with the EMERALD UI: Dylan opens the EMERALD UI in their webbrowser and signs in with their credentials. They are then redirected to the EMERALD Dashboard where all assigned controls can be easily seen. Step 2: • Dylan’s Task: If Dylan finds a new control, but they cannot provide the evidence by themselves, they assign it to colleague Y. • Dylan’s Interaction with the EMERALD UI: In the detail view of a control, Dylan assigns a colleague of theirs as its implementer. EMERALD notifies their colleague about a new control. Step 3: • Y’s Task: Y views the personal control Todo list. • Y’s Interaction with the EMERALD UI: Y navigates to their personal control overview and opens the detailed view of a control. Step 4: • Y’s Task: Y checks if there are already recommended metrics that can be used. Y assigns the metrics to the control. • Y’s Interaction with the EMERALD UI: Y opens the MARI component and selects a set of metrics for the control. Step 5: • Y’s Task: Y checks all metrics for their implementation status. If they are not yet implemented, they are assigned. • Y’s Interaction with the EMERALD UI: Y can see the implementation status of the necessary metrics in the overview of the control. If they are not yet implemented, they can also be assigned to another colleagues – colleague Z - in the view. Step 6: • Z’s Task: Z implements the metric and makes sure the evidence is included in the EMERALD solution. • Z’s and Dylan’s Interaction with the EMERALD UI: Z sees the list of metrics to be implemented. Z implements the metric and confirms the implementation once it is
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 34 of 103 www.emerald-he.eu done. Dylan gets notified about the new status of the control. The dashboard is updated. Dylan sees the new status of their controls.
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 35 of 103 www.emerald-he.eu Figure 15. User Journey 2: Dylan – ICO Control Implementation
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 36 of 103 www.emerald-he.eu 4.2.2.1 Mock-ups: Dylan – Internal Control Owner Control Implementation Based on the user journey from Dylan, we have created a set of mock-ups that maps parts of the user journey to the mock-ups. In the case of user journey 2, we focus on the mock-ups for filtering for non-compliant controls (Step 1) and for assigning an open control to a colleague (Step 2). Figure 16 shows how to select an existing audit scope. Figure 16. Paper-based Mock-ups - User Journey 2 - Step 1: Open an existing audit scope
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 37 of 103 www.emerald-he.eu Figure 17 presents the overview page of an existing audit scope and the list of the respective controls. Figure 17. Paper-based Mock-ups - User Journey 2 – Step 1: Audit scope overview with the list of controls
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 38 of 103 www.emerald-he.eu Figure 18 presents the overview of an audit scope and the possibility to filter for open controls – these are controls that have not been dealt with so far. Figure 18. Paper-based Mock-ups - User Journey 2 – Step1: Filtering of controls
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 39 of 103 www.emerald-he.eu Figure 19 presents the list of open controls. Figure 20 presents the UI for assigning a control to either an individual person or to a whole department. Figure 19. Paper-based Mock-ups - User Journey 2 – Step 1: List of open controls Figure 20: Paper-based Mock-ups - User Journey 2 – Step 2: Assigning a control to employees or departments
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 40 of 103 www.emerald-he.eu Figure 21 presents an example of how the individual workspace looks like. Additionally, it shows the person’s assigned number of tasks. 4.2.3 User Journey 3: Charlie – Preparation of an audit by an internal auditor The scenario for Charlie was divided into five steps as depicted in Figure 22. For each step, first Charlie’s task is described and then the interaction with the EMERALD UI. Step 1: • Charlie’s Task: Charlie is an internal auditor at a Cloud Ferro and is responsible for the management of the audit processes against EUCS, including the preparation of the audit. Charlie needs to review all the controls and check if all have their respective evidence assigned to them. • Charlie’s Interaction with the EMERALD UI: no interaction is required. Step 2: • Charlie’s Task: Charlie enters the EMERALD UI/UX, looks for the controls related to EUCS high. • Charlie’s Interaction with the EMERALD UI: 1) Charlie logs into the EMERALD UI/UX. 2) Charlie selects the components to be audited. 3) Charlie selects the EUCS scheme. 4) Charlie looks for the associated controls. Step 3: • Charlie’s Task: Charlie checks the non-conformities of the associated evidence. Figure 21. Paper-based Mock-ups - User Journey 2 – Step 3: Personal workspace and number of open tasks
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 41 of 103 www.emerald-he.eu • Charlie’s Interaction with the EMERALD UI: 5) Charlie clicks on the red flag /icon for the controls that are not compliant. Step 4: • Charlie’s Task: When Charlie discovers a non-compliance, Charlie wants to see which of the metric/assessment result is causing that non-compliance so that they can inform the compliance manager. • Charlie’s Interaction with the EMERALD UI: Charlie opens the detailed view on the non-conformities cause: not reaching the threshold, metric not measured (connection lost, etc...), non-trustworthy evidence, etc. Step 5: • Charlie’s Task: Once Charlie has reviewed all the non-compliances they complete an internal report for the compliance manager. • Charlie’s Interaction with the EMERALD UI: Charlie exports the summary of the nonconformities (including the detailed information).
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 48 of 103 www.emerald-he.eu 5 Clickable Prototypes To develop the integrated EMERALD UI, we aim to bring together the needs from the pilot partners and the technical partners. With the pilot partners, we have conducted interviews and focus groups, and have developed personas, scenarios, and user journeys in different workshops. From the insights gained, we have derived a first set of paper-based mock-ups (see Section 3). Subsequently we conducted individual workshops with the different component owners to i) get their feedback about the paper-based mock-ups; ii) find out which functionalities and features needed to be added; and iii) identify what else was missing. Based on these discussions, we were able to start the development on the clickable mock-ups. It is important to notice that the development of the clickable mock-ups is still work-inprogress during the time of writing this deliverable. This means that the development is neither complete nor that everything is already in place. In the upcoming months, there will be regular feedback loops with the pilot partners and component owners to improve the EMERALD UI, until it fulfils the needs of all partners. Thus, all screenshots of the clickable prototype presented in the next sections are still under development and are subject to change. Additionally, not all elicited features and functionalities have been implemented yet; this will be mentioned where applicable. The final version of the clickable prototype will be available in M24 (October 2025) of the project. 5.1 General EMERALD UI The overall EMERALD UI should provide a user interface (UI) “… which is tailored to the users’ needs during all stages of an audit and guides them through the process of identifying problems top down – from high level requirements down to specific implementation in documents (e.g., policies) or technical specifications.“ as described in the DoA [2]. Therefore, in WP4 several activities with pilot partners as well as component owners were conducted to elicit the needs of the different partners (as described in Sections 2, 3, and 4). From these activities, we were able to derive three major visualisation streams so that the EMERALD UI can support all relevant stages during an audit: Stream 1: Setting up and managing the Certification Target; Stream 2: Setting up and managing the Audit Scope; Stream 3: Setting up and managing the certification schemes. Additional visualisations include the authentication, role, and access management, as well as the management of “My ToDo List”. An overview of the EMERALD UI, the different visualisation streams, and the related EMERALD components is presented in Figure 29. In the following we put the focus on the three main visualisation streams that will be described in more detail. • Stream 1: Setting up and managing Certification Targets: This stream focusses on the selection of certification targets (e.g. cloud services...), allows to select and setup the different evidence extractors including eknows, Codyze, AI-SEC, Clouditor-Discovery, and AMOE, and allows to set the settings for the TWS. This stream will be presented in the subsequent Section 5.1.1 as well as in Section 5.2 and Section 5.3. • Stream 2: Setting up and managing Audit Scopes: This stream focuses on setting up the audit scopes, thus selecting the certification target and the corresponding certification scheme to be prepared for an audit. Furthermore, it shows the assessment results of the evidence extractors and allows to manage all controls regarding their compliance or non-compliance (AMOE, Clouditor-Orchestrator); additionally different controls can be assigned to different people and departments.
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 49 of 103 www.emerald-he.eu This stream will be presented in the subsequent Section 5.1.2 as well as in Section 5.2 and Section 5.3. • Stream 3: Setting up and managing the certification schemes: This stream focuses on the upload of the certification schemes, the possibility to browse through them as well as the mapping of controls and metrics, and the mapping of controls across different schemes. This stream is presented in Section 5.4 and Section 5.5 dealing with the integration and the interplay of the MARI and RCM components in the EMERALD UI. Currently, the main entry point of the EMERALD framework looks as presented in Figure 30. It provides the entry points to the management of the certification targets and audit scopes, as well as access to the certification schemes. Not depicted now are the access to the authentication, role, and access management, and the My ToDo list. Figure 29. Overview of the EMERALD UI Visualisation Streams Figure 30. EMERALD Landing Page
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 50 of 103 www.emerald-he.eu 5.1.1 Setting up and managing Certification Targets When entering the “Setup Certification Target” view, the EMERALD UI guides the user step-bystep through the setup process. This is visualized with a kind of metro map representation always visible on top of the view, so that the users always knows where they are. For setting up the certification target, the user must fill in information such as the cloud service title, a description, and the cloud service tags. After the user has saved the certification target, it receives a unique identifier called Cloud Service Token from the Orchestrator. The user can still edit all information; however, the id is fixed. This is presented in Figure 31. The next step in the setup of the certification target is to attach the evidence collectors as depicted in Figure 33. To install a new evidence collector that should be displayed in the list, a user can click on the “Add new” Button as shown in Figure 33, point 4. Accordingly, a new view is opened that presents a detailed description of how to set up the respective evidence collector as presented in Figure 32. It must be clearly stated that the installation of the evidence extractors cannot be done via the EMERALD UI. Figure 31. Certification Target - Setup Certification Target
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 51 of 103 www.emerald-he.eu Figure 33. Certification Target - Evidence collectors for the respective target of evaluation Figure 32. Certification Target - Description of how to install an evidence collector
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 52 of 103 www.emerald-he.eu For each evidence extractor the status can be set, namely if the extractor should be active, disabled or generally paused as presented in Figure 33, point 5. Additionally, when clicking on the respective view icon on the right side of the evidence extractors as shown in Figure 33, point 1, 2, and 3, further information is shown about the evidence extractor. For example, when clicking on the view icon for Assessment and Management of Organisational Evidence (AMOE) (see Figure 33, point 2), the view presented in Figure 34 is opened. In the list below, an overview is provided about the metrics that are already extracted from the respective policy documents. In addition, new policy documents can be uploaded. A new policy document can be added via drag & drop. If a policy document was added, the file is not immediately uploaded but a new view is presented – see Figure 35. Here, the user can select those metrics that should be extracted from the policy document that is to be uploaded. Figure 34. Certification Target - AMOE – Overview of metrics and corresponding policy files
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 53 of 103 www.emerald-he.eu It is important to notice that during the setup of the certification target it might not be clear which policy documents will be used. Therefore, it is not mandatory to upload these documents during the setup phase. Policy documents can added be later here or also in the audit scope view, where the controls and metrics are managed (see Figure 44). When clicking on the view icon for the source code and API evidence (eknows) (see Figure 33, point 1), the view presented in Figure 36 is opened. For the other evidence collectors such as Codyze, AI-SEC and Clouditor-Discovery, the discussions are ongoing on how they will be attached to the EMERALD UI and which functionalities will be presented there. Figure 35. Certification Target - AMOE – Upload a policy document and select the respective metrics that should be extracted from it
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 54 of 103 www.emerald-he.eu The last step in the setup of the certification target is to add the settings regarding the Trustworthiness System (TWS), thus, to define when the TWS should be updated when and how often – automatically and/or on demand, as depicted in Figure 37. Options that should be available are: • Always, when entering a respective audit scope • On demand by the user • Automatically every 1, 5, 10, or 15 minute(s). Figure 36. Certification Target - eknows - Define where to find the resources for eknows
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 55 of 103 www.emerald-he.eu For managing an existing certification target, a user can select the certification target from the list, as depicted in Figure 38. Figure 37. Certification Target - Screenshot of the TWS Setup Page Figure 38. Certification Target - Select an existing certification target from the list to open it
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 56 of 103 www.emerald-he.eu 5.1.2 Setting up and managing Audit Scopes When entering the “Setup Audit Scope” view via the EMERALD Landing Page (see Figure 30), a form is opened that needs to be filled in by the user as shown in Figure 39. The form consists of the audit scope name, the certification target that needs to be selected from a list, the respective certification scheme, also selected from the list of available schemes in the EMERALD framework, and the desired assurance level for EUCS (basic, medium, and high). For other schemas like BSI C5, ENS, etc. this field is not available. After having clicked on the “Save” Button, the new audit scope is created. Figure 39. Audit Scope – Setup a new audit scope
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 57 of 103 www.emerald-he.eu To reopen and manage an already existing audit scope, one needs to click on the “Manage Audit Scope” on the EMERALD landing page (see Figure 30). Before being able to manage the audit scope, a user must select the audit scope they would like to work with, as presented in Figure 40. Figure 40. Audit Scope - Select an existing audit scope
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 64 of 103 www.emerald-he.eu Figure 49. AMOE - Screenshot of the Miro Board with yellow and violet sticky-notes to capture the functionality and features for AMOE
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 65 of 103 www.emerald-he.eu 5.2.2 Results of Workshop 2 The second workshop with the AMOE component owner took place on the 22nd of August 2024. In this workshop, the status of the clickable mock-ups, gained insights, and open questions were discussed. So far elicited insights have been implemented in the current version of the clickable mock-ups, however, there is still some further room for improvement. 5.2.3 Functionality and clickable prototype of AMOE From both workshops, we were able to derive the following list of functionalities that have been considered for integrating AMOE into the EMERALD UI: “Setup” AMOE: • AMOE itself needs no real settings that need to be entered via the EMERALD UI to function. “Working” with AMOE: • Upload policy documents and assign metrics: There need to be two places where the upload of policy documents should be available: during the setup and management of certification targets and during the management of audit scopes. Additionally, whenever a policy document is uploaded, it should be possible to define which metrics should be extracted from the respective document. Both opportunities have been implemented in the EMERALD UI, in the certification target in Section 5.1.1, as shown in Figure 34 and Figure 35, and in the audit scope in Section 5.1.2, as shown in Figure 44 and Figure 45. • Show evidence extraction results: For each metric, the assessment hint and the evidence derived from AMOE should be shown. This functionality is implemented in the audit scope in Section 5.1.2 and shown in Figure 43 and Figure 44. Additionally, it should be possible to open the policy document and see where the extracted evidence has been found, e.g., the respective text in the respective paragraph. We are aware that AMOE has some further functionalities (e.g., a view that shows the extracted evidence in the document) that need to be considered for the UI, however, this is work in progress. 5.3 Integration of Clouditor-Orchestrator into the EMERALD UI The Clouditor is the central component of the EMERALD framework, and comprises four subcomponents named: Orchestrator, Evidence Store, Assessment, and Evaluation. It orchestrates the certification process (collection, assessment, and evaluation of evidence) and connects multiple components. It holds all dynamic information about the current audit process including the certification target, the evaluated cloud services, the assessment results, and the final certification state. Clouditor-Orchestrator is mostly related to the visualisation streams 1 and 2 (see Figure 29). In the EMERALD UI it needs to present the following major functionalities: first, when setting up a certification target it allows to select the available certifications schemes (from RCM); second, it allows to view the assessment results from all evidence extractors; and third, it is responsible for making the final certification decisions. 5.3.1 Results of Workshop 1 The first workshop with the Clouditor-Orchestrator component owner (Fraunhofer) was held on the 31st of July 2024. For this workshop, a Miro board was prepared and used to guide the
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 66 of 103 www.emerald-he.eu discussion and track the insights gained. Additionally, the workshop was recorded via Teams and later revisited. The overall goal of this workshop was to get a better understanding of the Clouditor-Orchestrator in general and how its integration into the EMERALD UI could look like. The workshop was structured as follows: • Clouditor-Orchestrator functionality: At the beginning of the workshop, we discussed with the participants what the Clouditor-Orchestrator functionality is all about from the WP4 point of view. This was necessary to clarify any possible ambiguities or misunderstandings and to be sure that the purpose of Clouditor-Orchestrator is clear to all involved parties right from the beginning. In the Miro Board a respective frame was prepared, presenting a short summary with the most relevant functionalities of the Clouditor-Orchestrator that was used for the discussion. • “Set-up” and “Working with” the Clouditor-Orchestrator: There are no concrete settings to be taken before the Clouditor-Orchestrator can be used. As this component is an orchestrator for the whole certification process and combines multiple components, the discussion focused more on the topic of where in the UI the Clouditor-Orchestrator should provide which information. During the whole workshop, all participants were invited to add sticky notes directly to the Miro board (see Figure 50, yellow sticky-notes). And afterwards, the WP4 team went through the recording again and added further notes to the board (see Figure 50, violet sticky-notes). Figure 50. Orchestrator - Screenshot of the Miro Board with yellow and violet stickynotes to capture the functionality and features for the Orchestrator
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 67 of 103 www.emerald-he.eu 5.3.2 Functionality and clickable prototype of Clouditor-Orchestrator From the first workshop, we were able to derive the following list of functionalities that need to be considered regarding the Clouditor-Orchestrator in the EMERALD UI: “Working” with Clouditor-Orchestrator: When working with Clouditor-Orchestrator, the EMERALD UI needs to offer the following functionalities. • Evidence Extractors: Clouditor-Orchestrator is responsible for managing the evidence extractors regarding certification targets; thus, Clouditor-Orchestrator is involved when setting up a certification target and assigning the respective extractors as presented in Section 5.1.1. • Assessment Results and Evidence: Clouditor-Orchestrator is responsible for managing assessment results and evidence. Therefore, whenever the EMERALD UI is presenting assessment results Clouditor-Orchestrator is involved, as already presented in Section 5.1.1 and Section 5.1.2. Whenever an assessment result is shown, a user should have the possibility to drill-down from the assessment result down to the evidence. Additionally, for technical evidence there will be available a certification graph as presented in Figure 51, where for each resource all properties and collected evidence can be displayed.
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 68 of 103 www.emerald-he.eu We are aware that the Clouditor-Orchestrator has many more functionalities that needs to be considered for the UI, however, this is work in progress and will therefore not be presented in this deliverable. 5.3.3 Results of Workshop 2 The second workshop with the Clouditor-Orchestrator component owner took place on the 11th of October 2024. In this workshop, the status of the clickable mock-ups, gained insights, and open questions were discussed, and the results will be subsequently implemented in the upcoming months. Therefore, these improvements are not presented in this deliverable. 5.4 Integration of the Mapping Assistant for Regulations with Intelligence (MARI) into the EMERALD UI The Mapping Assistant for Regulations with Intelligence (MARI) component is an intelligent system that automatically selects suitable metrics for demonstrating compliance with certification schemes. It leverages advanced AI techniques, including Natural Language Processing (NLP), to analyse security controls and recommend optimal metrics. MARI is related to the visualisation stream 3. It needs to present the following three major functionalities In the EMERALD UI: First, the EMERALD UI should show the metrics that are automatically assigned by MARI to a control of a respective certification scheme. Second, the EMERALD UI should present how controls of a certification scheme corresponds with controls of other certification schemes. Third, the EMERALD UI should allow to take over control-metric assignments from existing audit scopes. 5.4.1 Results of Workshop 1 The first workshop with the MARI component owner (CNR) took place on the 23rd of July 2024. For this workshop a Miro board was prepared and used to guide the discussion and to track Figure 51. Clouditor-Orchestrator – Resource Graph showing all technical evidence
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 69 of 103 www.emerald-he.eu the insights gained. Additionally, the workshop was recorded via Teams and later revisited. The overall goal of this workshop was to get a better understanding of the MARI component in general and how its integration into the EMERALD UI could look like. The workshop was structured as follows: • MARI functionality: At the beginning of the workshop, we gave the participants a short summary of what the MARI component is doing from the WP4 point of view. This was necessary to clarify any possible ambiguities or misunderstandings and to be sure that the purpose of the MARI component is clear to all involved parties right from the beginning. In the Miro Board a respective frame was prepared, presenting a short summary with the most relevant functionalities of the MARI component that was used for the discussion. • “Set-up” of MARI: There are no concrete settings to be taken before the MARI component can be used. The only setting that needs to be taken during the mapping between the controls and metrics is the number of metrics to suggest for a specific control. • “Working” with MARI: During the discussions it became clear that the MARI component should support two major functionalities that need to be represented in the EMERALD UI: the mapping of a set of metrics to respective controls of a certification scheme, and the mapping of controls across different certification schemes. During the whole workshop, all participants were invited to add sticky notes directly to the Miro board (see Figure 52, yellow sticky-notes). And afterwards, the WP4 people went through the recording again and added further notes to the board (see Figure 52, violet sticky-notes).
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 70 of 103 www.emerald-he.eu 5.4.2 Functionality and Clickable Prototype of MARI From the first workshop, we were able to derive the following list of functionalities that need to be considered regarding the integration of the MARI component into the EMERALD UI: “Set-up” of MARI: • MARI needs no real setting to function. The only functionality that needs to be available in the EMERALD UI so far is to state how many metrics should be maximally suggested for a control when mapping controls to metrics (not implemented in the clickable prototype yet). “Working” with MARI: When working with MARI, the EMERALD UI needs to offer the following functionalities. • Mapping between metrics and controls: The EMERALD UI needs to show for a control all the metrics that were mapped to the control by MARI. Thereby the metrics need to be sorted regarding the results of their matching. The better the match between the metric and the control, the higher the metric will be shown in the list. As the mapping algorithm is not 100% accurate, the user should be able to adapt the metrics per control according to their needs. Remark: the mapping between metrics and controls needs always to be related to an audit scope. • Mapping of controls between different certification schemes: The EMERALD UI needs a view that allows to see the mapping of controls between different schemes. This Figure 52. MARI - Screenshot of the Miro Board with yellow and violet sticky-notes to capture the functionality and features for the MARI component
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 71 of 103 www.emerald-he.eu means that the user should be able to select a control from a certification scheme and then be shown which control(s) from other schemes correspond to the one selected. • Allow to take over control-metric assignments from existing audit scopes: The EMERALD UI should offer an easy-to-use interface that allows users to take over the mapping of controls and metrics from other audit scopes (not yet implemented). The above-mentioned functionalities are implemented as follows. 5.4.2.1 Mapping between metrics and control When entering the “Certification Schemes” area, it is possible to enter the views for the mapping of controls and metrics as depicted in Figure 53, point 1 per scheme or to enter the view for mapping controls between different schemes as depicted in Figure 53, point 2. When clicking on the button for mapping metrics and controls of a scheme (Figure 53, point 1), another view is opened showing the respective categories and controls of the respective schema (Figure 54). When opening a category and selecting a control, the corresponding metrics that were suggested by MARI are shown, see Figure 54, on the right side. The metrics are sorted according to their relevance for the control; the most relevant ones are on top of the list and presented with a darker background than those that are not so important. Figure 53. Certification Scheme - Overview page
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 72 of 103 www.emerald-he.eu For each metric, the user has then the possibility to view the metric definition, edit the metric, or delete the metric. Figure 55 presents the view of a metric including its attributes. Figure 54. MARI - Overview of controls and mapped metrics Figure 55. MARI - Presentation of a metric definition
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 73 of 103 www.emerald-he.eu 5.4.2.1 Mapping between controls of different schemes When entering the “Certification Scheme” area, it is possible to enter the view for mapping controls between different schemes as depicted in Figure 53, point 2 above. Before being able to map controls of different schemes with each other, the user must select at least two different schemes as presented in Figure 56. Figure 56. MARI - Select two or more schemes for mapping their controls
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 80 of 103 www.emerald-he.eu When clicking on one of the categories, the respective controls are shown, as depicted in Figure 63. For each control, the description, the assurance level, as well as the assigned metrics are shown. When clicking on the view button for a control as shown in Figure 63 point 1, more information about the respective metrics of the control are presented, see Figure 64. When clicking on the view button of one metric in Figure 64 , the information about the metric is presented as shown in Figure 55. Figure 63. RCM - Overview of the controls belonging to a category
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 81 of 103 www.emerald-he.eu When clicking on the guideline button for a control as shown in Figure 63, point 2, the guideline for implementing the control is presented as depicted in Figure 65. Figure 64. RCM - Overview of the list of metrics assigned to a control Figure 65. RCM - Presentation of an implementation guideline for a control
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 82 of 103 www.emerald-he.eu If a control has no implementation guideline attached, then it depends on the users’ role of what is shown: either the open guideline button is disabled or a guideline button with a plus is presented that opens then the possibility to create a new description of an implementation guideline. 5.5.2.2 Upload a new catalogue When a new security scheme is published, it should be possible to easily import this scheme into EMERALD, thus, into the RCM and make it available for the EMERALD users. Therefore, this scheme needs to be made available either as a .csv or OSCAL. Remark: It is important to note that this functionality will only be available for specific roles – like a very experienced compliance manager or administrator who know how the file format must look like. When clicking on the “Upload scheme” button as shown in Figure 60, a view opens that allows to upload a new scheme as shown in Figure 66. Only .csv files or OSCAL files are allowed for being uploaded. When the new scheme is successfully uploaded it will be listed in the list of certification schemes like the ones presented in Figure 60. 5.5.3 Results of Workshop 2 The second workshop with the RCM component owner took place on the 10th of October 2024. In this workshop, the status of the clickable mock-ups, gained insights, and open questions was discussed, and the results will be subsequently implemented in the upcoming months. Therefore, these improvements are not presented in this deliverable. Figure 66. RCM - Upload a new certification scheme
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 83 of 103 www.emerald-he.eu 5.6 Integration of the Trustworthiness System (TWS) into the EMERALD UI The Trustworthiness System (TWS) provides a secure mechanism for EMERALD to maintain an audit trail of evidence and assessment results. Its goal is to enhance the integrity and transparency of the certification process, and to ensure the reliability of the evidence and evaluation outcomes by implementing a general-purpose Blockchain network. Using blockchain technology, TWS guarantees the integrity of all data and acts during the certification process in a verifiable way thereby increasing the auditors' level of trust. Regarding the TWS, the EMERALD UI needs to show the integrity status of the evidence and assessment results. More specific, the EMERALD users need to see at one glance in the EMERALD UI if the integrity of the evidence and assessment results is given or not. 5.6.1 Results of Workshop 1 The first workshop with the TWS component owner (TECNALIA) took place on the 1st of August 2024. For this workshop a Miro board was prepared and used to guide the discussion and to track the insights gained. Additionally, the workshop was recorded via Teams. The overall goal of this workshop was to get a better understanding of the TWS in general and how its integration into the EMERALD UI could look like. • TWS functionality: First, we gave the participants a short summary of what the TWS is doing from the WP4 point of view. This was necessary to clarify any possible ambiguities or misunderstandings and to be sure that the purpose of the TWS is clear right from the beginning. In the Miro Board a respective frame was prepared, presenting a short summary with the most relevant functionalities of the TWS that was used for the discussion. • “Set-up” of the component: We then discussed which features and/or functionalities are relevant for setting up the TWS. From these discussions, several paper-based mock-ups were added to the respective section in the Miro board. • “Working” with the component: And as a third step, we discussed the features and/or functionality that needs to be available when working with the TWS. Again, also for these discussions, several paper-based mock-ups were added to the respective section in the Miro board. During the whole workshop, all participants were invited to add sticky notes directly to the Miro board (see Figure 67, yellow sticky-notes). And afterwards, the WP4 people went through the recording again and added further notes to the board (see Figure 67, violet sticky-notes).
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 84 of 103 www.emerald-he.eu Figure 67. TWS - Screenshot of the Miro board with yellow and violet sticky-notes to capture the functionality and features for the TWS
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 85 of 103 www.emerald-he.eu 5.6.2 Functionality and clickable prototype of the TWS From the first workshop, we were able to derive the following list of functionalities that need to be considered in the EMERALD UI: “Set-up” of the component: • Settings: When setting up a certification target, there needs to be the possibility to define when and how often the TWS should be updated – automatically and/or on demand. Options that should be available are: o Always, when entering a respective audit scope o On demand by the user o Automatically every 1, 5, 10, or 15 minute(s). “Working” with the component: • When being in an audit scope, the status of the integrity check should always be visible at one glance. o If the integrity check is ok, the TWS status symbol is presented in green. o If the integrity check is not ok, the TWS status symbol is presented in red. o Additionally, if the integrity check is not ok, there should be the possibility to get a report highlighting due to which controls the integrity is not given any more – including the control, the respective metric, the resource name, the type, and the evidence id. • Depending on the settings selected above, there needs to be a possibility to update the integrity check on demand. The setup functionality was already described in Section 5.1.1 as last step of the setup regarding the certification target (shown in Figure 37). After having entered an audit scope, on the right upper corner of the mock-up, the status of the integrity check – the verification of evidence and assessment results - is always shown. For example, in Figure 68 the integrity check is shown in green stating that the integrity of the evidence and the assessment results are given. On the right side of the green symbol, there is a kind of “Refresh” button that allows to trigger manually an integrity check.
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 86 of 103 www.emerald-he.eu Figure 69 shows a picture where the TWS symbol is presented in red, meaning that the evidence and/or assessment results have been tampered with. Figure 68. TWS - Screenshot of an audit scope with the “green symbol” for the integrity check Figure 69. TWS - Screenshot of an audit scope with the “red symbol” for the integrity check
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 87 of 103 www.emerald-he.eu Right to the TWS symbol there is a folder icon. When clicking on this icon, a new window is opened showing the results of the TWS and where the integrity is no longer given. This information can be downloaded in form of a report as presented in Figure 70. 5.6.3 Results from Workshop 2 In the second workshop with the TWS component owner, which took place on the 26th of August 2024, we presented the clickable mock-ups and how we integrated the TWS into the EMERALD UI. The goal of this workshop was to find out if the implemented mock-ups correspond with the thoughts and needs of the TWS component owners and to collect their feedback and suggestions for improvement. In the case of the TWS, the component owner was happy with the TWS integration, and no further improvements were suggested during the workshop. Figure 70. TWS - Screenshot of a TWS report when the data integrity is not given anymore
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 88 of 103 www.emerald-he.eu 6 Conclusions This deliverable has presented the methodology used in T4.3 - Designing a user interaction and user experience concept and the first set of paper-based and clickable mock-ups achieved by applying different methods in the context of the EMERALD project. In more detail: • First, from the various interviews and focus groups with the pilot partners, we were able to derive a first set of paper-based mock-ups. • Second, from the development of personas, scenarios, and user journeys, we were able to enhance the existing paper-based mock-ups to allow concrete user interactions that the EMERALD UI needs to fulfil. • Third, with the different workshops with the EMERALD component owners, we were able to start the development of the first clickable prototype of the EMERALD UI. As all results presented in this deliverable are work in progress, we will continue working on them until M24. In more detail: • We will continue the interview and focus groups with the pilot partners, to get further insights on which features and functionalities are needed for the EMERALD UI. • We will continue with the development of the personas, scenarios, and user journeys - as so far not all relevant EMERALD roles have been considered so far – to continuously improve and refine the EMERALD UI so that it supports the needs of all EMERALD stakeholders. • We will continuously meet with the different component owners to implement all mandatory UI elements and functionalities. • Additionally, we will regularly ask all EMERALD partners to try out the clickable prototype and provide valuable and necessary feedback to be able to continuously improve the EMERALD UI, to allow for a seamless user experience for continuous auditing in the cloud cybersecurity domain, offering easy-to-use, explainable workflows to support the auditors’ work and the audits conducted. This document is the first version of the results of the EMERALD UI/UX. In M24 of the EMERALD project, we will provide an updated version of this document (D4.4 User interaction and user experience concept–v2 [2]) with in-depth work processes and a final set of the requirements for the UI/UX.
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 89 of 103 www.emerald-he.eu 7 References [1] EMERALD Consortium, “D4.1Results of the UI-UX requirements analysis and the work processes - v1,” 2024. [2] EMERALD Consortium, “D4.4 User interaction and user experience concept–v2,” 2025. [3] EMERALD Consortium, “EMERALD - Annex 1 - Description of Action - GA 101120688,” 2022. [4] S. M. Dennerlein, V. Tomberg, T. Treasure-Jones, D. Theiler, S. Lindstaedt and T. Ley, “Codesigning tools for workplace learning: A method for analysing and tracing the appropriation of affordances in design-based research,” Information and Learning Sciences, vol. 121, no. 3/4, pp. 175-205, 2020. [5] A. Fessl, V. Pammer-Schindler, K. Pata, S. Feyertag, M. Mõttus, J. Janus and T. Ley, “A Cooperative Design Method for SMEs to Adopt New Technologies for Knowledge Management: A Multiple Case Study,” JUCS - Journal of Universal Computer Science, vol. 26, no. 9, pp. 1189-1212, 2020. [6] E. B.-N. Sanders and P. J. Stappers, “Co-creation and the new landscapes of design,” CoDesign, vol. 4, no. 1, pp. 5-18, 2008. [7] F. Kensing and J. Blomberg, “Participatory Design: Issues and Concerns,” Computer Supported Cooperative Work (CSCW), vol. 7, no. 3, pp. 167-185, 1998. [8] S. Bødker and K. Grønbæk, “Cooperative prototyping: users and designers in mutual activity,” International Journal of Man-Machine Studies, vol. 34, no. 3, pp. 453-478, 1991. [9] B. Westerlund, Design Space Exploration: co-operative creation of proposals for desired interactions with future artefacts (Doctoral Dissertation), 2009. [10] C. Snyder, Paper prototyping: The fast and easy way to design and refine user interfaces, Morgan Kaufmann, 2003. [11] C. Floyd, “A systematic look at prototyping,” Approaches to prototyping, pp. 1-18, 1984. [12] P. Ehn, Work-oriented design of computer artifacts (Doctoral Dissertation), Arbetslivscentrum, 1988. [13] D. Saffer, Designing for interaction: creating innovative applications and devices.Saffer, Dan, New Riders, 2010. [14] B. Martin, B. Hanington and B. Hanington, 100 ways to research complex problems, develop innovative ideas, and design effective solutions, Rockport Publishers Beverly, 2012. [15] C. Howard, User Journey Mapping: A Tool for Better User Experience., UX Design Institute., 2020.
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 96 of 103 www.emerald-he.eu 8.3 Mock-ups presenting the controls In the following, several mock-ups are presented showing which information could be presented regarding individual controls of a certification scheme. For each control a lot of information needs to be shown. Figure 8 in Section 3 presents an example of showing some general information about a control. Figure 76 shows how possible evidence extracted for the current control could be presented where organisational and technical evidence is divided into two parts. Figure 76. Paper-based Mock-ups - Suggestion of how to present different types of evidence for a control (v1)
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 97 of 103 www.emerald-he.eu Figure 77 shows how possible evidence extracted for the current control could be presented, where organisational and technical evidence are shown in a combined view. Figure 77. Paper-based Mock-ups - Suggestion of how to show different types of evidence for one control (v2)
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 98 of 103 www.emerald-he.eu Figure 78 presents a suggestion of how information on possible non-compliances detected can be presented for the respective control. Figure 78. Paper-based Mock-ups - Suggestion of how to present information about noncompliances
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 99 of 103 www.emerald-he.eu Figure 79 presents a mock-up of what an assignment of a control to either an individual person or to a whole department might look like. Figure 79. Paper-based Mock-ups - Suggestion of how to assign a control to a colleague or a whole department
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 100 of 103 www.emerald-he.eu Figure 80 shows what a control history, showing all changes of the control, might look like in the EMERALD UI. Figure 80. Paper-based Mock-ups - Suggestion of the history log information view of a control
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 101 of 103 www.emerald-he.eu 9 APPENDIX B: Mock-ups derived from the user journeys 9.1 Additional Mock-ups developed for User Journey 1 Figure 81 presents again the landing page of the EMERALD UI. When clicking on the BYOCS button a new certification scheme can be created or an existing own-defined certification scheme can be edited. Figure 81. Paper-based Mock-ups - User Journey 1: Updating a self-defined scheme
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 102 of 103 www.emerald-he.eu Figure 82 presents how to select an existing self-defined certification scheme that should be changed. Figure 82. Paper-based Mock-ups - User Journey 1: Select an existing self-defined certification scheme
D4.3 – User interaction and user experience concept – v1 Version 1.0 - Final. Date: 31.10.2024 © EMERALD Consortium Contract No. GA 101120688 Page 103 of 103 www.emerald-he.eu Figure 83 shows how to edit a self-defined certification scheme in the EMERALD UI. Figure 83. Paper-based Mock-ups - User Journey 1: Edit an existing self-defined certification scheme