The study aims to review the usability and effectiveness of the previous UI of REACH-IT (https://reach-it.echa.europa.eu/) and propose improved ways of organising and presenting the information. The recommendations have now been implemented.

1. Study on the enhancement of
REACH-IT User Experience
SpecificContract No 3 (ECHA/2014/374)
Implementing Framework Contract: No. ECHA/2010/124-Lot 3
NickVaslamatzis, EWORX S.A.
31/03/2015

2. Agenda
 ECHA/2014/374 - Project Overview
 Key Insights from the REACH-IT Heuristic Evaluation
 REACH-IT Concept and Navigation Design
 Simplified REACH-IT – High Fidelity Prototype (HFP)
 Conclusions
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 2

3. Project Overview
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 3

4. Problem Definition
 ECHA performed a review of the usability of REACH-IT
 5 face-to-face workshops (September – December 2014)
 A number of issues were identified driving this specific contract
 The UI design of REACH-IT has not changed radically from its
inception and the technology stack of REACH-IT is also outdated.
4Implementing Framework Contract: No. ECHA/2010/124-Lot 3

5. Project Objectives
 Simplifications for the 2018 Registration deadline aiming at helping
users accomplish certain tasks as simply and efficiently as
 More intuitive User Interface preventing users from getting lost in
the application. This also includes improving the REACH-IT look
feel.
 Quick access to key functionalities and information.
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 5
REACH-IT aspires to beTHE innovative, user-friendly, and only submission tool used by
Industry and Competent Authorities for REACH and CLP data.
REACH-IT aims at being the main communication and information hub for the Industry
in relation to submitted data.

6. Methodology
Phase 2: REACH-IT
Simplification
Phase 3: Implementation
Simplificatio
n of User
Flows and
Navigation
High Fidelity
Prototyping
Backgroun
d Research
Home
Page
Concept
Design
Heuristic
Evaluation
and
Analysis
Implementation
of the simplified
UX in REACH-IT
3.1
Phase 1: As-Is Analysis
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 6
Nov. ‘14 – Jan. ’15 Jan. ‘15 – Mar. ‘15 Mar. ’15 – ongoing

7. Insights
Based on the Heuristic Evaluation of 33 common REACH-IT usage
scenarios
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 7

8. Heuristic Evaluation
 Based on 2 personas (user profiles)
 Devised 33 realistic usage scenarios that included offline activities
(experience and not task-based analysis)
 Reviewed if and how the objectives of these scenarios can be realised
in the current REACH-IT.
 Recorded user steps, the number of clicks and (an estimation of) the
overall time required to accomplish each usage scenario.
 Recorded key usability issues using well-known heuristics per usage
scenario.
8Implementing Framework Contract: No. ECHA/2010/124-Lot 3

9. Insights
 Unnecessary pages and inconsistent actions in the user flows
 The user manuals (DSM/IDM) are not easily discovered and easy
use
 UI and business logic not optimised/designed to support most
common usage
 No accelerators and shortcuts
 Very hard to identify what are the important tasks that users must
respond to
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 9

10. Insights (continued)
 Technical design does not allow users to perform an action within an
action or use multiple browser tabs to improve their efficiency
 Language/labelling prevents users from understanding the
functionality of REACH-IT
 REACH-IT is not intuitive enough for novice users through their first
interactions
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 10

11. 11 UX Redesign Recommendations
 Improve the UI and flow of submitting a
dossier (and JSO selection)
 Allow users to quickly visualise upcoming
deadlines and actions
 Streamline access to companies’
substances for reporting purposes
 Optimise access to and editing of company
information
 Simplify the search facilities
 Define standardised convenience
functionality
 Enhance the learnability of the UI to
support inexperienced REACH-IT users
 Improve access to and presentation of the
status of submitted dossiers
 Define presentation standards that balance
flexibility with consistency
 Re-design of the navigation mechanisms to
improve the overall discoverability of
REACH-IT entities and functionality
 Minimise the interaction cost and support
the decision making of novice R-IT users.
11Implementing Framework Contract: No. ECHA/2010/124-Lot 3

12. REACH-IT Concept and Navigation
Design
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 12

13. Home Page Concepts
 Exploration of a variety of concepts
 The design of the concepts was based on
4 primary moodboards
 Over 12 alternative concepts explored in
total
13Implementing Framework Contract: No. ECHA/2010/124-Lot 3

14. REACH-IT New Home
Page
Key Elements:
 The Header that consists of
branding elements, the primary
menu and a top (navigation) bar
 The full-width Main content area
that includes three widgets to
support the usage of REACH-IT
 The Footer that consists a number
of support and help links
14Implementing Framework Contract: No. ECHA/2010/124-Lot 3

15. Proposed navigation scheme
 Based on a new navigation structure and design.
 The selected navigation scheme uses a primary menu that focuses
on the key user activities in REACH-IT and ensures that users can
access all levels of the hierarchical menu.
 Uses a persistent top navigation bar with shortcuts to selected
functionality such as quick search.
 Uses large breadcrumbs in internal pages to support user
orientation.
 Is supported by a secondary “support menu” available in the footer
of REACH-IT.
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 15

16. Navigation Design
We considered 4 alternative menu structure
and 3 alternative navigation design
proposals.The selected menu design is
based on:
• Mega Menu design pattern,
hierarchically-structured in 3 levels
• Comprises of 6 areas:
• Submit
• Search
• Joint Submission
• Company
• Tasks
• Messages
• Can support help links, if required.
16Implementing Framework Contract: No. ECHA/2010/124-Lot 3

17. Simplified REACH-IT Functionality
High Fidelity Prototype (HFP) for a selection of Usage Scenarios
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 17

18. Scope  Substances page
 Tasks page
 Dossier SubmissionWizard tool
 Reference Number page
 Dossier page
 Joint Submission page
 Advanced and Quick Search
 Contacts andTPR Management pages
 Integrated help functionality
The scope of the simplification High
Fidelity Prototype was limited to:
 The Industry part of the application.
 The following REACH-IT
functionalities.
18Implementing Framework Contract: No. ECHA/2010/124-Lot 3
View the High Fidelity Prototype

19. Substances page
19Implementing Framework Contract: No. ECHA/2010/124-Lot 3
A user wants to retrieve all information
submitted for a specific substance
identity (EC number, CAS number) as
quickly as possible.
The Substances page comprises of:
 The search filters area
 The search results (expandable)
 A ‘show more’ feature (replacing
traditional pagination mechanisms)

20. Tasks page
A user wants to quickly review the
upcoming deadlines and actions
assigned to his company in REACH-IT
(e.g. invoice payment, ATD request,
requested dossier update, etc.).
Follows the same UI design patterns as
the Substances page.
20Implementing Framework Contract: No. ECHA/2010/124-Lot 3

21. Submit an IUCLID
dossier
Organised in 4 logical process steps:
1. Submission information
(submission type, registrant type,
JSO)
2. IUCLID dossier file upload
3. Dossier details
4. Submission confirmation
21Implementing Framework Contract: No. ECHA/2010/124-Lot 3

22. Submit an IUCLID
dossier
Organised in 4 logical process steps:
1. Submission information
(submission type, registrant type,
JSO)
2. IUCLID dossier file upload
3. Dossier details
4. Submission confirmation
22Implementing Framework Contract: No. ECHA/2010/124-Lot 3

23. Submit an IUCLID
dossier
Organised in 4 logical process steps:
1. Submission information (submission
type, registrant type, JSO)
2. IUCLID dossier file upload
3. Dossier details
4. Submission confirmation
23Implementing Framework Contract: No. ECHA/2010/124-Lot 3

24. Submit an IUCLID
dossier
Organised in 4 logical process steps:
1. Submission information
(submission type, registrant type,
JSO)
2. IUCLID dossier file upload
3. Dossier details
4. Submission confirmation (and
success message)
24Implementing Framework Contract: No. ECHA/2010/124-Lot 3

25. Reference Number
page
A user wants to get from REACH-IT a proof
that he has registered a substance and that
his registration is still valid in order to
present it to the Enforcement Inspector that
is visiting his company next week.
The Reference Number page comprises of:
 An overview block
 A dossier history block
All sections in item pages are positioned
vertically on the screen.
User actions related to the Reference
Number are available in the relevant section
heading and within a section’s content.
25Implementing Framework Contract: No. ECHA/2010/124-Lot 3

26. Dossier page
A user has submitted an updated
registration dossier and wants to see the
outcome of his submission
The customer of a Company wants proof
from the user that a substance that they are
procuring is legally on the market.The user
needs to identify and print the official
document that ECHA is sending to
registrants after a submission is accepted
(RN assigned).
The Dossier page follows the same UI
design patterns as the Reference Number
page.
All sections in item pages are positioned
vertically on the screen and users can
expand-collapse the desired section.
26Implementing Framework Contract: No. ECHA/2010/124-Lot 3

27. Joint Submissions
A user’s submission is part of a JSO.
He/she wants to check the status of the
other members (active, ceased) and the
scope of the JS in term of substance
composition.
 JSO search page
 JSO page
27Implementing Framework Contract: No. ECHA/2010/124-Lot 3

28. Search
The various search options will be
rationalized in version 3.1 focusing on the
identified users’ needs.
In specific, the search criteria will be
redefined and the Search UI will be
refactored:
 Step 1: Users select what type of item
they are searching for.
 Step 2: Users view all items they
specified and can filter for specific search
criteria (custom per item type)
 Step 3: Users can browse, expand and/or
export the retrieved search results
28Implementing Framework Contract: No. ECHA/2010/124-Lot 3

29. Quick Search
 Provides direct access to items in
REACH-IT if the user types the
correct identifier.
 Uses an auto-complete feature to
support the correct filling of the
search.
 Offers a shortcut to advanced
search.
29Implementing Framework Contract: No. ECHA/2010/124-Lot 3

30. Contacts &TPR
Management
A user’s Company has undergone a
major restructuring resulting in some
employees leaving the company and
new ones being hired.The user wants
to review all the contact points
assigned to his dossiers for data-
sharing activities in order to update the
contact points if required.
• Searchable list of contacts andTPRs
• Assignments management tool
30Implementing Framework Contract: No. ECHA/2010/124-Lot 3

31. Integrated user help
Complete removal of the User Manuals
pdf documents which will be replaced
by:
 Quick Checklists for dossier
submission.
 Page-specific help in an expandable
expandable right sidebar area.The
user guide is vertically scrolled in a
separate “panel” so the page still
remains functional.
 Field-specific help text (tips) when
clicking the inline (?) icons
31Implementing Framework Contract: No. ECHA/2010/124-Lot 3

32. Conclusions
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 32

33. Recap
 33 common usage scenarios have been analysed and simplified
 A number of simplification HFP screens have been developed as a
guideline for the redesign of REACH-IT in its upcoming upgrades
 In a nutshell:
1. New features will be rolled out to support Industry users in
accomplishing their REACH-IT tasks and activities
2. Supported by a new REACH-IT visual identity and a new navigation
paradigm.
3. Addressing issues reported by the Industry and identified through the
study in view of the addition of Small and Medium Enterprises (SMEs).
4. Aiming to enhance the REACH-IT usage efficiency and increase the
of user satisfaction.
33Implementing Framework Contract: No. ECHA/2010/124-Lot 3

34. Benefits to REACH-IT users (Industry)
34Implementing Framework Contract: No. ECHA/2010/124-Lot 3
 Complete removal of
the Manuals
 Quick and easy access
to post-submission
information (decisions,
communications)
 Quick and easy viewing
of pending tasks, legal
obligations (update
dossiers, payment of
invoices)
 Information grouped by
substance
 Improved usability of the
search facilities
 Consolidation of
information in one page
 Improved navigation
between REACH-IT
entities (Substance, JSO,
Dossier, Reference
Number,Task)
 Improved learnability
and memorability
 Reduced cognitive
effort needed to perform
the user scenarios
 Consistency and
standards

35. Next Steps
1. Ongoing feasibility assessment of the proposed mock ups (HFP)
2. HTML / CSS integration in the development process and REACH-
IT upgrade to JSF 2.0
3. Extension of mock ups (HFP) to support the rest of the pages
4. Need for a complete design pattern library so that the
development teams can apply a pattern based on the page type
(date picker examples)
5. Provision of web design specifications (CSS styles) to be applied
throughout all pages of REACH-IT
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 35

36. UX Implementation Considerations
 The definition of a UX KPI Framework for REACH-IT.
 The continuous monitoring of the UX will be hard but necessary to
address continuous improvements:
 In terms of the performance i.e. time taken, no. of mouse clicks, amount of
cognitive effort, no. of errors to complete user scenarios - of REACH-IT 3.1.
 In terms of the overall satisfaction – Industry self-reported metrics for
assessing the perceived usability of the system
 The integration of UX testing into the REACH-IT roadmap (release
planning).
Implementing Framework Contract: No. ECHA/2010/124-Lot 3 36

37. A Continuous Improvement Cycle
Define / review
UX KPI
Framework
Plan and scope
UX testing
methods
Undertake UX
testing (user
data collection)
Analyse UX
test results
Integrate into
product backlog
(planning)
Implement and
deploy changes
Monitor and
report UX KPI
changes
37Implementing Framework Contract: No. ECHA/2010/124-Lot 3
REACH-IT
User
Experience
Assess implementation
effort vs user need
(impact) for each
feature
Based on:
• The results of the monitoring
• The addition of new features
• Select performance and
satisfaction tests
• Define key milestones
(e.g. launch, delivery
date)
Test types:
• Usage analytics
(comparative study)
• REACH-IT users survey
• Usability test
• Tree test
• A/B test
• Eye tracking study
• Heuristic evaluation
• Search analytics

38. Thank you!
Any Questions?
38Implementing Framework Contract: No. ECHA/2010/124-Lot 3