Settings Revamp

Owned by Matt Birtch
Last updated: Feb 16, 2022
3 min read

Ready for implementation

Important Links

Figma Design

Figma Prototype

Jira Ticket

Overview

The current UI/UX for settings is dated and is in need of improvements. The main goals of this work are as follows:

  1. Re-organize the settings sections for greater clarity

  2. Reduce clicks to update settings

  3. Create a cleaner, simplified experience for the settings modal

  4. Update UI controls with latest components designed in the compass design system

  5. Algin settings modal with new modal pattern established in the design system

 

Related Work - Channel Settings

The work being done for the Channel Settings Modal will be laying a lot of groundwork for the UI proposed here.

New Sidebar Menu

One significant change proposed here is a newly organized sidebar menu. The newly proposed items are:

No more collapsed sections

Another significant change proposed here is the removal of sections being collapsed. All sections are now fully open without the need to click in to edit individual settings. This should help reduce the number of clicks and surface nested settings to be more discoverable.

Behavior for Saving Settings

As soon as a change is made to the settings, a floating footer animates from the bottom within the active content area. Users can continue making changes while this footer is displayed, but they cannot change sections until they either save or cancel the changes they’ve made.

Changing Tabs while there are unsaved changes

If users attempt to change sections while there are unsaved changes, the footer animates with a shake to highlight that they have unsaved changes. They cannot change tabs until changes are saved or canceled

 

 

Closing the modal while there are unsaved changes

Using the close button

If a user presses the close button or clicks anywhere outside the modal while there are unsaved changes they are prevented and warned about the unsaved changes once. If they try to close again, the modal closes without saving.

Pressing the ESC key

If a user presses the ESC key while there are unsaved changes they are not warned and the modal closes without saving immediately.

Sections

Mobile Webview

Adjust the layout and UI for mobile web as follows. More details outlined in the Figma design file.