Overview

User Settings

UX design

UI shell

Objectives

Create UI designs and user flows for the User Settings feature of the UI shell for the Honeywell Forge application.

Since all application-federated teams need a version of user setting screens, it should live in the UI shell and only be developed once instead of each app team creating their own. User Settings is accessed through the user avatar within the global header of the UI shell; also referred to as the Common Portal. 

Completion

June 2023

Background

Where the UI shell screen designs started

These images show past implemented UI User Setting screens that used an outdated and unsupported design system called SCUF UI. 

Note: some functionalities found in the image were not translated to the new screen designs due to back-end limitations for now, such as 'Appearance' preferences to change color theme or text size.

Old user setting screen designs

Old user setting screen designs

To be incorporated into the Common Portal UI shell, it needed to be revamped using the current design system as well as usability fixes in order to be cohesive with all Honeywell Forge products.

Profile

Profile user flows

Instead of accessing the User Settings from the hidden global navigation, it is readily available through the global header's avatar icon.

Old state

The user would access their settings from the global navigation hidden in the hamburger menu icon from the header; the global navigation appears from the left as a panel overlay.

Current state

The user clicks on the avatar from the application header and a contextual menu opens with the items of 'Profile', 'Notifications', or 'Security', which takes the user to a specific section of the User Settings.

Update the user profile

The user profile page includes an editable form, and viewable cards with the user's assigned Roles, Scopes, and User Groups. These flows pertain to changes made to the top card, named 'Overview'.

Flow 1

The user makes an update to the editable form, the disabled buttons become enabled, and they save their changes for a snack-bar to appear in the bottom-left corner.

Flow 2

The user makes an update to the editable form, the disabled buttons become enabled, and they decide to reset their changes.

Flow 3

The user navigates before saving or resetting their changes; a confirmation modal appears asking them to discard changes or go back to save their changes.

View roles, scopes, & user groups

The user profile has viewable cards with the user's assigned Roles, Scopes, and User Groups. These assignments give the user access to specific sites, admin rights, and functionalities of the application. These objects cannot be changed at the end-user level.

Flow 4

The user clicks through pagination to view additional Roles, Scopes, and User Groups assigned to them.

Flow 5

The user clicks into a User Group list item to see additional details about that specific User Group item. The user can then view the next User Group's details without going back to the top-level of the card.

Notifications

Notification user flows

The user can change their notification preferences through the user settings, found on the second tab of the user settings feature.

This gives the user capability to turn all possible notifications on or off, specify which notifications they want to receive, & how they want to receive them.

Default notifications in the product

Notifications are turned on by default; specific default notifications is dependent on the user when their profile is initially set up by a third-party configurator.

Flow 6

The user turns off all notifications by clicking the toggle, and it goes into immediate effect without the user having to save the change. To turn notifications back on, they can re-click the toggle again.

Flow 7

The user clicks into any list item to see details of the current settings, as well as make changes per each item at a time. 

Change notification preferences

Notifications are classified into 6 categories of Sites, Areas, Categories, Event types, Asset criticality, & Event severity.

Flow 8

The user drills down into the category of Site/ Area/ Category/ Event Type from the menu, and deselects items from the checkbox, and saves the change. Site/ Area/ Category/ Event Type categories have the same UI with showing the settings as checkbox lists.

Flow 9

The user drills down into the category of Asset Criticality or Event severity, turns on/off a toggle to make notifications preferences, and saves the change. Asset criticality and Event severity categories have the same UI.

Flow 10

The user navigates back to Notifications without saving or resetting the changes the made, and receives and confirmation modal asking what action they want to take next.

Security

Security user flows

The user can change their multi-factor authentication (MFA) through the user settings, found on the third tab of the user settings feature.

Though limited to only email or SMS text message at the moment, the can select which they prefer to authenticate from.

Change MFA settings

The user can change their multi-factor authentication (MFA) through the user settings, found on the third tab of the user settings feature.

Flow 11

The user selects SMS text message as a second option for MFA, and they save the change for a snack-bar to appear in the bottom-left corner.

Flow 12

The user selects SMS text message, but decides to reset the change.

Flow 13

The user navigates before saving or resetting their changes; a confirmation modal appears asking them to discard changes or go back to save their changes.

Conclusion

Demo - Profile user flows

This demo shows some user flows in the Profile section of the User Settings, and interacting with the User Groups as well as saving a change from editing the name in the input field.

Demo - Notifications user flows

This demo shows some user flows in the Notifications section, and interacting with different list items, and saving out a change from the Site notifications specifications.

Demo - Security user flows

This demo shows some user flows in the Security section, and making a new selection, as well as resetting changes and trying to navigate from the page before saving changes.

In conclusion

Though these screen designs are edited every once in a sprint to meet new requirements, they have come a long way from the original user setting designs.

It was challenging to create screen designs that deviated from the original designs, but overall, the interaction costs are greatly reduced, and it now uses the new design system guidelines and components.

paschalallie@gmail.com

Connect with me

Copyright © Allie Paschal.