Camms.Engage UI/UX Revamp Release Note - October 2022
- amani imtiyas
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. |
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.
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.
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
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.
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.
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.
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
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.
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.
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.
1.6.3.1 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.
1.6.3.2 Action Task List
What’s New
‘Percentage Completed’ field is now enhanced and the values are depicted in progress bars with respective color codes.
1.6.3.3 KPI List
What’s New
‘Performance’, ‘YTD Performance’ and ‘Actual with Performance Indicator’ fields are now enhanced for clearer representation of performance values.4
1.6.3.4 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.
1.6.3.5 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.
1.6.3.6 Risk List
What’s New
All ‘RAG indicators’ and ‘Risk Rating’ fields are now updated to provide a better user experience.
1.6.3.7 Scorecard List
What’s New
The Scorecard performance field is now updated to provide a rich user experience.
1.6.3.8 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
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.
1.6.4.1 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.
1.6.4.2 KPI Node
What’s New
All three KPI node templates are now updated with latest user interfaces allowing you to create personalized Dashboards.
1.6.4.3 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.
1.6.4.4 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.
1.6.4.5 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.
1.6.4.6 Scorecard Node
What’s New
‘Scorecard Performance’ field is now enhanced to provide a rich user experience.
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.
1.6.5.1 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.
1.6.5.2 KPI Detail
What’s New
All three KPI detail templates are also updated with latest user interfaces allowing you to create personalized Dashboards.
1.6.5.3 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.
1.6.5.4 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.
1.6.5.5 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.
1.6.5.6 Scorecard Detail
What’s New
The ‘Performance’, ‘Target’ and ‘Variance’ fields are now shown in tiles on top of the component.
1.6.5.7 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.
1.6.5.8 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
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.
1.6.6.1 KPI Graph Detail
1.6.6.2 Budget Chart
1.6.6.3 Portfolio Milestones
What’s New
Gridlines are now added to the ‘Portfolio Milestone’ component for clearer representation of milestones against its start/end date.
1.6.6.4 Project Cashflow
1.6.6.5 Project Phase Summary
What’s New
An arrow is placed between each project phase for clear representation of the project direction.
1.6.6.6 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.
1.6.6.7 Interactive Risk Heatmap
1.6.6.8 Risk Profile Summary
1.6.6.9 Compliance by Authority Documents
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.
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.
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.
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.
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.
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.
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.
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.