Dec. 2015 - The present report summarises the results of a usability study performed for the European Chemicals Agency (ECHA)

1. ECHAWebsite –
Customer Insight Study
SPECIFIC CONTRACT: ECHA/2014/110/LOT2/SC01
JUNE – DECEMBER 2015
EWORX S.A.

2. EWORX S.A.
Agenda
 Project Overview
 Summary of Findings
 Recommendations

3. EWORX S.A.
Project Overview
THIS SECTION PRESENTS THE CIS METHODOLOGY AND
THE KEY WORK PACKAGES DELIVERED WITHIN THE
SCOPE OF ECHA/2014/110/LOT2/SC01.

4. EWORX S.A.
Introduction
OBJECTIVES
To enable ECHA:
 To have a clear view of its users’ needs;
 To understand what kind of information
is most relevant for users and how they
look for this information; and
 To identify how they would prefer to find
this information and have it structured
on the website.
SCOPE
In:
 Homepage
 Website search, Landing pages
(REACH-2018), etc.
 6 main website sections
Out:
 Dissemination Portal
 Chemicals Databases

5. EWORX S.A.
Customer Insight Study Details
The Customer Insight Study (CIS) involved the design and delivery of 5 complementary
usability (user research) and design methods.
 Expert Review
 Web Analytics Audit – Study of content usage, user behaviour and technology profiles of the
visitors of ECHA’s website for Q1 and Q2, 2015.
 Heuristic Evaluation - Conducted via multiple tools and methods including an evaluation
matrix (222 usability criteria), standard W3C markup validation tools & performance test
tools.
 Information Architecture Validation Testing – 704 users participated in the tree testing
study that evaluated task success, directness and time required to complete for 17
typical tasks in ECHA’s website.
 Interviews & Focus Groups – 11 interviews and 2 focus groups were conducted with
ECHA’s stakeholders to validate identified issues and discuss recommendations.
 Mock Up Design (Proposals) were developed based on the recommendations of the
CIS.

6. EWORX S.A.
CIS Project Timeline
Expert Review
• Web Analytics
Audit
• Heuristic
Evaluation
IA Validation
Study
• Pre-test
questionnaire
• Tree Test
• Post-test
questionnaire
Stakeholder
Consultation
• Interviews
• Focus Groups
Final Reporting
• Recommendati
-ons
• Design
Proposals
August October NovemberSeptemberJuly December
The results of each Work Package are available to ECHA in the form of a Study Report.

7. EWORX S.A.
Summary of Findings
THIS SECTION PRESENTS A SUMMARY OF THE KEY
FINDINGS FROM THE CUSTOMER INSIGHT STUDY.

8. EWORX S.A.
Findings
 Search
 Task Orientation
 Page Layout and Design
 Content
 Navigation
 Web Accessibility and Readability
 Performance
 Analytics
 Home Page
 Guidance and Publications
 Q&As
 REACH-2018 and other multi-step
workflow pages
 Regulation web pages
The CIS Findings are grouped under the following areas of concern:
 And the Information Architecture (IA)
underpinning ECHA’s Website

9. EWORX S.A.
Findings
Overall, the findings of the Customer Insight Study suggest that the key issues:
 Are related to the navigation effectiveness and task orientation,
 Are supported by technical issues (e.g. search facilities, URL structures, etc.); and
 Are followed by issues with:
 The content and editorial style used in the content pages.
 The design and accessibility of the pages.
The high priority findings of the CIS and the associated recommendations are available
in the Final Report.

10. EWORX S.A.
Recommendations
THIS SECTION PRESENTS RECOMMENDATIONS AS
OUTCOMES OF THE CUSTOMER INSIGHT STUDY

11. EWORX S.A.
Develop a
Content
Inventory and
Taxonomy
Model
 Is a critical activity to translate ECHA’s communication strategy
to content management processes and tools
 Helps manage all of the information assets on the website
 Ensures that the defined structures that are extendable,
scalable and easy to maintain
 Supports dynamic content fetching and user-driven design
decisions
 Define the URL composition (and ensures URL consistency)
 A Content Inventory comprises of:
 A definition of the Content Types and the fields that each content
type comprises of.
 A definition of the Vocabularies required for classifying the content
and the fields that each vocabulary term is described with.
 A definition of the Sitemap of the website with descriptions on what
information is to be rendered under each node.

12. EWORX S.A.
Improve the
primary
navigation
(menu)
Use a Mega Menu to speed up navigation and improve task
success rates
 Allows users to quickly view the second-level nodes of each
menu option
 Aiming to reduce backtracking in most common user journeys
 Reduces the time and number of clicks required to reach
desired pages
The design proposal is based on the existing design styleguide
and allows ECHA content managers to:
 Add custom rich-text in any mega menu modal to help users
understand what can be found under each key website area
 Expose all or some of the 2nd level nodes depending on the
case
 Add custom links to deeper pages (e.g. to ECHA’s
Committees) View Mockup

13. EWORX S.A.
Revamp the
Home Page
Option A: Minor redesign based on existing styleguide and IA
 Visually prioritise the various elements in the current home
page
 Remove redundant elements (e.g. breadcrumb), as presented
in the following mock up
 Improve the banner design approach
Option B: Responsive Design and new IA
 Ensure cross-device accessibility
 Promote alternative entry points to the content (e.g. I am
interested in…)
 Simplify the sitemap and use user-centred shortcuts
 Focus on valuable content (i.e. guides)
 Material design style (new visual identity)
View Mockup
View Mockup

14. EWORX S.A.
Website
Search
 The findings of the CIS related to search are primarily related
to the functionality provided (user perception: search is not
working)
 In terms of design and usability the following are proposed:
 Horizontally laid-out filters and search criteria
 Multi-select filters used where necessary, supported by
Javascript technologies such as chosen.js
 The presentation of the relevance matching under each search
result
 The use of icons (per content type) to improve the browsing of
search results
 Other good practices in terms of search design
View Mockup

15. EWORX S.A.
Guidance and
Publications
ECHA should use a single document and publication
repository developed to meet users’ needs. Using the existing
styleguide, the following are proposed:
 Publications Landing Page:
 Use the following filters: ‘Topic’ (multi-select), ‘Regulation’ (multi-
select), ‘Type’ , ‘Updated’ and a free-text search
 Map filter selections in the URL (to allow multiple linking scenarios)
 Ordering of results by last update date
 Publication Page:
 Revise the Publication Content Type definition and present core
data and meta-data
 Remove non-meaningful nomenclature
 Effective multilingual file download bar
 All documents and publications should be rendered under
Publications
 Promote related publications (algorithmically aggregated)
 Feedback button moved to the publication page View Mockup
View Mockup

16. EWORX S.A.
Q&As
Landing Page
 Use user-centric content to directly invite users to search or
browse topics (grouped under and filterable by Regulation)
 Use a search box as the primary Q&A access strategy,
supported by auto-suggested Q&As
 Nest Q&As under topics (max. 200) grouped under Regulations
 De-emphasise redundant elements
Q&A Item Page
 Improve the readability of the page through the use of icons and
a correct page structure
 Promote related Q&As (algorithmically aggregated)
 Review the content (especially in how the question is formed)
View Mockup
View Mockup
View Mockup

17. EWORX S.A.
REACH-2018
Navigation
The following design proposals aim to improve the navigation
within the REACH-2018 Landing.
 Landing Page
 Promote the key message and emphasise the Call to Action
(CTA), which in this instance is the 1st step of the process
 Present all steps in the first pageview and simplify navigation to
the desired internal page
 Internal Page (Know your portfolio)
 Improve the visibility of the 7 steps (and current selection)
 Review the design of the text content and download links
 Simplify the page heading (Back button, REACH 2018 heading)
and bottom step navigation
View Mockup
View Mockup

18. EWORX S.A.
REACH
Regulation
Page
Option A: Minor redesign based on existing sitemap and IA
 A responsive web design applied to the existing markup of the
website (without a re-write of the HTML/CSS)
 Larger and more readable fonts (line spacing / density)
 Linking the ECHA Terms within the content
Option B: Responsive Design and revised IA
 New UI layout, visual identity, sitemap, typography and logic
 Presenting specific elements tagged with the process
 Automated navigation links to related REACH processes,
databases and information
 Presented in 2 design variations:
 Landing page design pattern
 Single-page design pattern
For the Data Sharing page, under
REACH Regulation
View Mockup
View Mockup
View Mockup

19. EWORX S.A.
Support
The Support web pages host important information such as
Guidance documents and Q&As.
The design proposal aims to address the identified user needs
through the improved presentation of the landing page, based
on the following principles:
 Direct entries to Publication search pages
 Promotion of Q&A Topics to allow users to quickly start
browsing Q&As
 Shortcuts to the National Helpdesks and ECHA contact pages
 An easy to scan UI design style and an editorial style directed
to users
 A simplified sitemap comprising of 7 nodes under Support
View Mockup

20. EWORX S.A.
News and
Events
A design proposal for a central repository for all News
related information available in ECHA’s website has
been developed based on the following design
principles:
 Aggregate News, Events, Webinars, Press and other
news related information in a single page
 Use relevant and easy to use filters according to
identified needs and attractively presenting the results
in a 4-column grid layout
 Use more playful elements in the design as the core
usage scenarios are not directly related to user
productivity View Mockup

21. EWORX S.A.
Nick Vaslamatzis
Digital Project/Programme Manager and Consultant
Email: nv@eworx.gr | Tel: 0030 210 6148380
EWORX S.A.
Athens - 66 Jean Moreas St., GR-15231
Brussels - Rue du Marteau 81, B-1000