Camms is pleased to bring you the Camms.Engage UI/UX Revamp Project, developed to give an overall optimized user experience, as well as to enrich, simplify, elevate responsiveness, and improve performance.

The release would be available in your test environment on Friday, 14th October, and subsequently available in your live environment on Friday, 21st October 2022.

 

What’s New

  • Optimized overall application performance and stability.
  • Enhanced initial loading and application response time.
  • Greater flexibility.
  • Enriched user experience with improved look and feel on certain features, components, and pages.
  • Improved accessibility with Web Content Accessibility Guidelines (WCAG) compatibility.
  • Easy Dashboard navigation and drilldown.
  • Faster Dashboard creation and configuration.
  • Enhanced Dashboards with multiple view modes.

 

Why upgrade?

  • Rigidity of the current application
  • Poor scrolling capability
  • High initial loading time
  • Inflexible navigation
  • Difficulties in identifying the current level of the hierarchy
  • Overlapping of components


General Comparison


 

Current

Upgrade

Performance

Low: Performance is comparatively low, and it takes a considerable amount of time to load and refresh the dashboard.

High: Improved the performance significantly in all the sections within the application.

User experience

Limited: Less flexibility and accessibility for users, difficulties in searching and navigating through dashboards.

Improved: User experience is improved in the dashboards and in dashboard configurations.

Accessibility

Low: Not Compatible with Web Content Accessibility Guidelines.

High: Improved Compatibility with Web Content Accessibility Guidelines.

 

 

TABLE OF CONTENTS



Summary of update

1. Improvements to Dashboard User Interface

Now you can effortlessly navigate through dashboards faster, with state-of-the-art drilldown functionality along with increased flexibility, with our completely revamped user interface.

1.1 Overall interface theming of all pages of Dashboard and Admin-Panel

What’s New

  • The user interfaces of all the Dashboard pages in Camms.Engage are now upgraded to provide a rich user experience with more clarity for all the users.
  • A variety of visualizations have been added across each template to suit all your needs along with improved view modes for individual components for more flexibility in Dashboard configuration.

 

 

Dashboard landing page

Admin panel dashboard list

Hierarchy summary

 

 

1.2 Dashboard Landing Page interface enhancements

Dashboard landing page layouts such as Carousel and Dropdown layouts have been improved with interface enhancements to provide a better user-friendly environment

What’s New

  • Now you can upload an image of your choosing, which can be displayed as the default background image on the new landing page.
  • Introduction of Dashboard Page Filtration Search Functionality
  • Enhanced Dashboard Dropdown and Carousel Layouts, at the top with improved page level interfaces
  • Introduction of a customized welcome page background image upon initial load to match the corporate website look and feel.

 

Landing page (dropdown)

Landing page (carousel)

Notes:

  • This new landing page would only be visible if you have multiple Dashboards published within the application.
  • If you do not upload an image for the landing page, the application will pick the background image of the first Dashboard
  • In case if the Dashboard background image gets deleted mistakenly, a default image would be applied as the background image until a new image is uploaded

 

1.3 Multiple Dashboard Layouts interface enhancements

What’s New

  • Both multiple Dashboard layouts ‘dropdown list’ and ‘carousel view’ are now updated to provide a better user experience.
  • A new search functionality has been added to the Dashboard page level for easy navigation with better flexibility.

Note:

  • The search functionality can be used for page level filtrations only

Landing page (dropdown)

Landing page (carousel)

Dashboard page level Search function

 

 

1.4 Dashboard Header section

What’s New

  • The admin panel button has now been replaced with a more visually appealing icon.
  • The user icon has been updated to provide information such as the logged in users name, designation, and user icon.
  • The functionality of the home icon is now updated, which would refresh the entire Dashboard upon a single click.
  • The color of the header icons would change based on the template selected.


Dashboard header section icons

Note:

  • An avatar would be shown if the logged in user does not have a user image.

1.5 Improvements to Dashboard Navigation

 

1.5.1 Dashboard Navigation interface enhancements

Now Camms.Engage is with several interface enhancements that the users could navigate easily through the entire dashboard

What’s New

  • A state-of-the-art, clean and clear easy to use hierarchy navigation menu with a feature to show and hide Dashboard navigation is now available for you to quickly navigate between multiple hierarchy nodes.

Left hand dashboard navigation menu

 

  • Instead of the existing tree navigation floating widget now the Dashboard Navigation feature would be visible to you at all times on the left side of the Dashboard.
  • This would help you to figure out your current location of the selected Dashboard, upon navigation and drilldown, with hierarchy node level name(s) denoting the exact user position.
  • The Dashboard page level header row can be frozen now, for easier navigation with a feature to show and hide when scrolling through the Dashboard.



Selection of a page from the Dashboard pages

Selection of a node from Dashboard Navigation

Navigating via Dashboard to a main component


Navigating via Dashboard to a subcomponent

Notes:

  • Dashboard navigation will be visible to you only if the Administrator has enabled the Dashboard Navigation functionality.
  • The navigation menu can be hidden at any time if the user wants to utilize the entire screen to view the Dashboard.

 

1.5.2 Dashboard Drilldown interface enhancements

Users could drill down to the different hierarchy nodes, all the components, etc. easily and without any overlapping, due to the enhanced features that have been established now

What's New?

  • Easier drilldown with zero overlapping with only one component shown at a time.
  • More compact and clearer view of all the available components atop the selected hierarchy node as buttons.
  • The navigation path of the Dashboard would now be shown in a breadcrumb atop the components for enhanced overall user experience
  • A return button to take you back to the previous screen or previous level of the hierarchy
  • Now you can easily navigate between any components placed within the same hierarchy node using the component buttons on top

 

Notes:

The ordering of the components would be based on the placement of the components via the admin panel configured by the administrator.

 

Selection of a page from the Dashboard pages


Selection of a node from Hierarchy Summary Component

Drilldown via Dashboard to a main component

Drilldown via Dashboard to a subcomponent

 

1.6 All Individual Components

Individual components of the dashboards have been improved with several interface enhancements to provide a better user experience for all the users

1.6.1 Overall component changes

What’s New 

  • Individual Component names are now shown at the top of the Hierarchy Node Level. The component which you are currently viewing would be highlighted, and the others would be shown in a different color.
  • All Engage components are now updated with clearer, enhanced and WCAG compliant user interfaces to provide a richer user experience.
  • Every component has a return button at the top right corner. Users would be able to go back to the previous page, by using the return button.

 

1.6.2 Hierarchy Summary Component

What’s New

  •  A new Dashboard view mode ‘Column Chart View’ has been added to the hierarchy summary component while updating the existing view modes ‘Donut’ and ‘Legend’ for a better user experience.


Hierarchy Summary – Donut view


Hierarchy Summary – Column view

 

Hierarchy Summary – Legend view

 

  • The map component is now updated providing a much clearer view of the linked Projects and Actions, where Projects are shown in red color, and Actions are shown in black color respectively.
  •  Upon zooming out, or if there are multiple Actions/ Projects linked to the same location, then the count would be depicted in blue color circle instead of the location pinpoint. Also, if you hover over it the list of linked items would be shown to you.



Hierarchy Summary Map 



1.6.3 List Components

What’s New

  • The user interface of the list components is now updated to provide the users with a richer user experience.
  •  Component pagination has been added which would help you to move to the next page easily.


Action List

What’s New

  • ‘Actual’, ‘Progress Performance’ and ‘Percentage Completed’ fields are now enhanced and the values are depicted in progress bars with respective color codes.

Action list (Existing UI)

    


Action list (New UI)


Action Task List

What’s New

  •  ‘Percentage Completed’ field is now enhanced and the values are depicted in progress bars with respective color codes.

Action Task List (Existing UI)

Action Task List (New UI)


KPI List

What’s New

  •  ‘Performance’, ‘YTD Performance’ and ‘Actual with Performance Indicator’ fields are now enhanced for clearer representation of performance values.

KPI List (Existing UI)


KPI List (New UI)

 

Control List

What’s New

  •  ‘Control Owner Rating’ and ‘Control Authorizer Rating’ fields are now updated for clearer representation of rating values with respective rating icons.

 

Control List (Existing UI)

Control List (New UI)

 

Project List

What’s New

  • All ‘statuses and ‘RAG’ fields are now enhanced with clearer representation, where the ‘Project Progress’ is depicted using a progress bar with its respective status and value.

 

Project List (Existing UI)

Project List (New UI)

 

Risk List

What’s New

  • All ‘RAG indicators’ and ‘Risk Rating’ fields are now updated to provide a better user experience.

Risk List (Existing UI)

Risk List (New UI)

 

 

Scorecard List

What’s New

  • The Scorecard performance field is now updated to provide a rich user experience.

Scorecard List (Existing UI)


Scorecard List (New UI)

 

Obligation Summary

What’s New

  •  To provide more clarity to the users the Obligation Summary component is now shown as an independent component.
  •  ‘Obligation Status’, ‘Review Status’ and ‘Risk Assessment’ fields are now enhanced improving the usability of Camms.Engage

 

Obligation Summary (Existing UI)


Obligation Summary (New UI)

 

 

1.6.4 Node Components

What’s New

  • The user interface of the node components is now updated offering a better user experience.
  • Now you can configure the maximum number of nodes to be displayed at once for carousal and tile view modes.


Action Node

 

What’s New

  •  ‘Action Performance’ field is now enhanced to provide a rich user experience, where ‘Percentage Completed’ field is also enhanced with values depicted in progress bars.

Action Node (Existing UI) - Carousel View

Action Node (New UI) - Carousel View

Action Node (Existing UI) – Tile View

Action Node (New UI) - Tile View


KPI Node

What’s New

  • All three KPI node templates are now updated with latest user interfaces allowing you to create personalized Dashboards.

KPI Node Template 1 (Existing UI)

KPI Node Template 1 (New UI)

KPI Node Template 2 (Existing UI)

KPI Node Template 2 (New UI)

 

KPI Node Template 3 (Existing UI)

KPI Node Template 3 (New UI)

 

Control Node

What’s New

  • ‘Control Owner Rating’ and ‘Control Authorizer Rating’ fields are now updated for clearer representation of rating values with respective rating icons.

 

Control Node (Existing UI)

Control Node (New UI)

 

 

 

Project Node

What’s New

  •  All Project RAGs are now updated allowing you to configure, visually appealing personalized Dashboards, where the progress performance is represented with a progress bar with its respective colour code and status.

Project Node (Existing UI)

Project Node (New UI)

 

 

Risk Node

What’s New

  • All ‘Risk Rating’ and ‘Trend’ fields are now updated for clearer representation of rating and trend values with respective icons.

Risk Node (Existing UI)

Risk Node (New UI)

 

 

Scorecard Node

What’s New

‘Scorecard Performance’ field is now enhanced to provide a rich user experience.

 

Scorecard Node (Existing UI)

Scorecard Node (New UI)

 

 

1.6.5 Detail Components

What’s New

  • The look and feel of the detail’s component are now updated with a brand-new user interface.
  • All fields related to performances, ratings, dates, progress and statuses are now shown in tiles on top of the component enhancing the usability of detail components.


Action Detail

What’s New

  •  All progress performance, dates and statuses will now be shown in tiles on top of the component, while the map would be shown in top right corner with location data, where the rest of the fields would be shown one below the other in an orderly manner.

Action Detail (Existing UI)

Action Detail (New UI)


KPI Detail

What’s New

  •  All three KPI detail templates are also updated with latest user interfaces allowing you to create personalized Dashboards.

KPI Detail Template 1 (Existing UI)

KPI Detail Template 1 (New UI)

KPI Detail Template 2 (Existing UI)

KPI Detail Template 2 (New UI)

KPI Detail Template 3 (Existing UI)

 

 

 

KPI Detail Template 3 (New UI)

 

Control Detail

What’s New

  • All Control Ratings are now shown in tiles on top of the component, where the rest of the fields are shown one below the other vertically.

Control Detail (Existing UI)

Control Detail (New UI)

 

 

Project Detail

What’s New

  • The ‘Assessment Score’, ‘Budget Status’, ‘Project Progress’ and ‘Percentage Complete’ fields are now shown in tiles on top of the component, where the ‘Timeframe’, ‘Project Dates’ and ‘RAGs’ are shown side by side, while the rest of the fields are shown one below the other vertically.

Project Detail (Existing UI)

Project Detail (New UI)

 

 

Risk Detail

What’s New

  • The ‘RAG Ratings’, ‘Risk Rating Scores’, along with the ‘Risk appetite’ and ‘Trend’ fields are now shown in tiles on top of the component, where the rest of the fields are shown one below the other vertically.

Risk Detail (Existing UI)


Risk Detail (New UI)


Scorecard Detail

What’s New

  •  The ‘Performance’, ‘Target’ and ‘Variance’ fields are now shown in tiles on top of the component.

Scorecard Detail (Existing UI)

Scorecard Detail (New UI)

 

Obligation Detail

What’s New

  • To provide more clarity to the users the Obligation Detail component is now shown as an independent detail component.
  • Obligation Status’, ‘Review Status’ and ‘Risk Priority Assessment’ fields are now enhanced improving the usability of Camms.Engage


Obligation Detail (Existing UI)


Obligation Detail (New UI)

 

Authority Document Detail

What’s New

  • To provide more clarity to the users the Authority Document Detail component is now shown as an independent detail component.
  • ‘Priority’ and ‘Severity’ fields are now enhanced, improving the usability of Camms.Engage


Authority Document Detail (Existing UI)


Authority Document Detail (New UI)

 

 

1.6.6 Graph/ Chart Components

What’s New

  • The look and feel of the Graph and Chart components are now updated with a brand-new user interface.
  • All graph/chart legends are now shown atop the components to provide better user experience.

KPI Graph Detail

 

KPI Graph Detail (Existing UI)

KPI Graph Detail (New UI)

 

Budget Chart

Budget Chart (Existing UI)

Budget Chart (New UI)

 

 

Portfolio Milestones

What’s New

  • Gridlines are now added to the ‘Portfolio Milestone’ component for clearer representation of milestones against its start/end date.

 

Portfolio Milestones (Existing UI)

Portfolio Milestones (New UI)

 

 

Project Cashflow

Project Cahflow (Existing UI)

Project Cashflow (New UI)

 

 

 

Project Phase Summary

What’s New

  • An arrow is placed between each project phase for clear representation of the project direction.

 

Project Phase Summary (Existing UI)

Project Phase Summary (New UI)

 

Project Phase Summary Extended

What’s New

  • The look and feel of this component is now updated allowing you to create more visually appealing Dashboards.

 

Project Phase Summary Extended (Existing UI)

Project Phase Summary Extended (New UI)

 

 

Interactive Risk Heatmap

Interactive Risk Heatmap (Existing UI)

Interactive Risk Heatmap (New UI)

 

 

Risk Profile Summary

Risk Profile Summary (Existing UI)

Risk Profile Summary (New UI)

 

 

Compliance by Authority Documents

Compliance Authority Documents (Existing UI)

Compliance Authority Documents (New UI)


2. Improvements to Dashboard Configuration Admin Panel User Interface

 

2.1 Improved view modes and introduction of a search filter in the Dashboard List and Dashboard Page List

 

What's New?

  • Now the usability of Engage is improved with the introduction of multiple view modes ‘Grid View’ and ‘Tile view’.
  • A brand-new Dashboard search functionality is added for ease of use for the Dashboard List and Dashboard Page levels.
  • User friendly placeholder texts are now added to all the functional buttons.

 

Admin Panel dashboard list (Grid view)

Admin Panel dashboard list (Tile view)

Admin Panel dashboard page view (Grid view)

Admin Panel dashboard page view (Tile view)

 

2.2 Introduction of Dashboard Preview Functionality

 

What's New?

  • A pain point that you faced in the past on the time spent previewing templates having to look at the Dashboard has now been fixed with a new Dashboard preview section introduced under Dashboard settings.
  • This preview section will now allow you to preview a dashboard, changing its background image, template, number of pages, layout etc. which you then can apply to the Dashboard.

 

Dashboard preview

 

2.3 Improvements in Dashboard Creation, Configuration and Edit

 

What's New?

  • The dashboard creation and edit pop-up windows are now updated with better user interfaces to provide more clarity to the users upon configuring personalized Dashboards.
  • The configuration button has been removed from the Dashboard list and Dashboard Page sections while applying that functionality to the Dashboard Title and Dashboard Page Titles to enhance the usability of Camms.Engage.

 

Create Dashboard 

 

Edit Dashboard 

Configure Dashboard 

 

 

2.4 Improvements to Page Design Section of Admin Panel

 

What's New?

  • The Dashboard components section is now equipped with a show, hide section which would help the Administrator in configuring Dashboards
  • A ‘return’ button has been added to let the user navigate to the previous screen easily.

 

Existing User Interface - Page Design Section

New User Interface - Page Design Section

 

2.5 Individual Component level improvements in Page Design Section

 

What's New?

  • New features and functionalities have been added into several individual components making it easier for the Administrator to configure and personalize the Dashboards.

For Example: All Node components are now equipped and are now configurable with a maximum node count per row, when the view mode selected is ‘Carousal’ view mode.

  • Improved user experience upon component configurations with updated user interface.

For example: The visibility of the list items (KPIs, Risks, Actions etc.) of a component can now be changed quite easily with the new visibility toggle button. This also allows multiple selections as well.

 

Hierarchy Summary – Admin Panel

Risk List  – Admin Panel

KPI Node – Admin Panel

 

2.6 Improvements to Dashboard Configurations, Traffic Lights, User Roles, User List and Client Details pages

 

The left-hand navigation menus of the Admin Panel are now updated with state-of-the-art user interfaces for clearer representation of settings, configurations, and details.

What’s New?

  • All pages related to dashboard configuration menu are now updated with a brand-new user interface, providing you with additional options such as pagination and clear visualization, to provide more clarity to the Administrators upon configuring personalized Dashboards.
  • Users would get an idea about the number of items and pages from the improved pagination functionality. It would act as a hyperlink where users would be able to switch between pages
  • Clearer placeholder text, outline, and fill colors for configuration buttons offering better user experience.
  • Info icons with tool tips upon cursor hover over to provide more clarity on the functionality or behavior of a certain section. 



Client Details


Custom Traffic Light

Dashboard Roles

 

Dashboard User Roles

Configuration Details

 

2.7 Improvements to Dashboard Success, Error, Alert messages

What's New?

  • When you are engaging in different activities within the application, now you would be able to see a variety of system messages such as ‘Success’, ‘Error’, and ‘Warning’ messages in green, red, and amber colors, respectively.

Success Message

Warning Message

Error Message

 

 

3. Improvements to Login Page User Interface

The user interface of the Dashboard login page is now upgraded to provide a rich user experience with more clarity for all the users.

 

Existing User Interface – Dashboard Login Page

New User Interface – Dashboard Login Page