REACH-IT UX Study

Study on the enhancement of REACH-IT User Experience

Specific Contract No 3 (ECHA/2014/374)Implementing Framework Contract: No. ECHA/2010/124-Lot 3

Nick Vaslamatzis, EWORX S.A. 31/03/2015

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

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

Project Overview

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


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.


Project Objectives Simplifications for the 2018 Registration deadline

aiming at helping users accomplish certain tasks as simply and efficiently as possible.

More intuitive User Interface preventing users from getting lost in the application. This also includes improving the REACH-IT look and feel.

Quick access to key functionalities and information.REACH-IT aspires to be THE 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.

Methodology

Phase 2: REACH-IT Simplification

Phase 3: Implementation

Simplification of User Flows

and Navigation

High Fidelity Prototyping

Background

Research

Home Page

Concept Design

Heuristic Evaluation and

Analysis

Implementation of the

simplified UX in REACH-IT

3.1

Phase 1: As-Is Analysis


Nov. ‘14 – Jan. ’15 Jan. ‘15 – Mar. ‘15 Mar. ’15 – ongoing

Insights Based on the Heuristic Evaluation of 33 common REACH-IT usage scenarios



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.


Insights Unnecessary pages and inconsistent actions in the

user flows The user manuals (DSM/IDM) are not easily discovered

and easy to 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


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


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.

REACH-IT Concept and Navigation Design



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


REACH-IT New Home PageKey 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


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.


Navigation DesignWe 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.

Simplified REACH-IT FunctionalityHigh Fidelity Prototype (HFP) for a selection of Usage Scenarios



Scope Substances page Tasks page Dossier Submission Wizard tool Reference Number page Dossier page Joint Submission page Advanced and Quick Search Contacts and TPR 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.

View the High Fidelity Prototype

http://invis.io/BH22DMOQG

http://invis.io/BH22DMOQG


Substances pageA 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)


Tasks pageA 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.


Submit an IUCLID dossierOrganised in 4 logical process steps: 1. Submission information

(submission type, registrant type, JSO)

2. IUCLID dossier file upload3. Dossier details4. Submission confirmation





(and success message)


Reference Number pageA 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.


Dossier pageA user has submitted an updated registration dossier and wants to see the outcome of his submissionThe 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.


Joint SubmissionsA 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


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


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.


Contacts & TPR ManagementA 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 and TPRs

• Assignments management tool


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

Conclusions



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

levels of user satisfaction.


Benefits to REACH-IT users (Industry)

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


Next Steps1. 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 pages4. 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

https://projects.invisionapp.com/share/BH22DMOQG#/screens/69317945?maintainScrollPosition=false


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).


A Continuous Improvement CycleDefine /

review UX KPI

FrameworkPlan 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

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


Thank you!

Any Questions?

REACH-IT UX Study

Technology

Transcript of REACH-IT UX Study