Design Decisions

The 'why' behind the key UX decisions

This page documents the strategic "why" behind key UX decisions made for the Embrace Suite from 2020 onwards. Each decision explains the problem we were solving, the approach we chose, and the rationale connecting back to our Core Principles.

For implementation details and specifications, see the individual Pattern pages. For the principles guiding these decisions, see Core Principles.

Architecture

In our Suite, we've got a extremely varied set of modules for a varied set of users. We want to serve all of our users to the best of our abilities, while providing a consistent user experience.

Navigation split

The division between Suite-specific UI and App-specific UI (modules) is made very clear. The topbar is reserved for Suite information or actions, while the side bar is reserved for app-specific actions.

The top bar shows Suite specific information or actions, while the side bar is reserved for the module specific information.

Multitasking

CRM operators work in inherently interruptive environments, where phone calls can arrive mid-ticket. Traditional 'complete or discard' workflows would force operators to lose their work.

The system should adapt to human work patterns.

Saving incomplete work

Decision: Allow users to save incomplete work (in cache). Keeping Draft emails or Tickets open to come back to later. Also see: Create and edit

Keeping the draft modal open, even after a reload, can save important unfinished work.

After work states

Decision: Leave time for users to 'finish up'. This is done via the 'after work' states.

Data accessibility

Frequently accessed data varies a lot per client.

Minimize clicks to access frequent data: for CRM this is contract and household information.

Quick 'copy to clipboard' actions allow for fast access to relevant data.

Pin to top

Allow for pinning of fields, to be configured by the operator. These pinned fields allow for quick access to any data type.

An example interaction of 'pinning data', making sure that the important data is quickly available.

AI-strategy

Aid, but let the human make the call

Prefill, do not act

Prefill data where possible, and let the user make the call whether to use the prefilled data.

Give option to re-do AI tasks

Always allow the user to re-do any AI automations or tasks that the system supports.

Overlays

Some key decisions have been made regarding the usage of overlays in the context panel.

Also see: Overlays

The main three-pane structure of the Suite. An overlay is highlighted in blue.

Single overlay at a time

When closing an overlay, all overlays are closed, unless a 'default overlay' was specified. Previously, a stacking framework was used throughout the system. The new approach is to avoid stacking, and make use of browser navigation (explained below).

Avoid stacking. Stick to a simple structure.

Browser navigation

Instead of the previously implemented stacking behavior, we try to stick to using the browser navigation as much as possible, changing the URL path whenever a new item (overlay) is opened.

This way we stay true to the browser navigation patterns that our users are used to.

A base card, open by default, can show relevant contextual information.

When navigating to a different context (opening an overlay), the URL path changes accordingly.

When navigating to a different context (opening an overlay), the URL path changes accordingly.