Upload
nikolaos-vaslamatzis
View
167
Download
1
Embed Size (px)
Citation preview
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: [email protected] | Tel: 0030 210 6148380EWORX S.A. Athens - 66 Jean Moreas St., GR-15231Brussels - Rue du Marteau 81, B-1000