ECHA Website – Customer Insight Study

SPECIFIC CONTRACT: ECHA/2014/110/LOT2/SC01JUNE – DECEMBER 2015

EWORX S.A.

EWORX S.A.

Agenda Project Overview Summary of Findings Recommendations

EWORX S.A.

Project OverviewTHIS SECTION PRESENTS THE CIS METHODOLOGY AND THE KEY WORK PACKAGES DELIVERED WITHIN THE SCOPE OF ECHA/2014/110/LOT2/SC01.

EWORX S.A.

IntroductionOBJECTIVES

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

EWORX S.A.

Customer Insight Study DetailsThe 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.

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

November

September

July December

The results of each Work Package are available to ECHA in the form of a Study Report.

EWORX S.A.

Summary of FindingsTHIS SECTION PRESENTS A SUMMARY OF THE KEY FINDINGS FROM THE CUSTOMER INSIGHT STUDY.

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

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.

EWORX S.A.

RecommendationsTHIS SECTION PRESENTS RECOMMENDATIONS AS OUTCOMES OF THE CUSTOMER INSIGHT STUDY

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.

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 pagesThe 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

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

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 designView Mockup

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

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

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

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 contentOption 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 MockupView Mockup

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

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

EWORX S.A.

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