Authoring UI Update

Updating the authoring page using Adobe's Spectrum design system.

https://spectrum.adobe.com

Summary

Leading the project, we updated the Acrobat interface to align with Adobe's Spectrum design principles, especially enhancing the Request Signatures' left panel for better visual consistency and user experience. Details are limited as the project is set for future release, and shared insights are non-sensitive.

Project goal

Our objective was to modernize the software interface by refreshing all UI elements in accordance with Adobe's latest design system, Spectrum. This update presented an ideal opportunity not only to align with cutting-edge design standards but also to address and resolve minor issues, thereby enhancing the overall user experience on the authoring page.

Updating with Spectrum

The components of the previous UI were mismatched with the broader Acrobat interface. As a longstanding software that has been continuously updated and refined since its inception, certain sections had become antiquated over time. The field elements, including fonts, sizes, and icons, failed to adhere to Adobe's current standards, highlighting a disconnect with the contemporary Adobe design ethos.

Improving accessibility

Leveraging the need for UI modernization, we also focused on enhancing accessibility features, such as color schemes, font sizes, and more. Below, as an example, we discuss the process of selecting colors for different recipients, ensuring these colors comply with web accessibility guidelines. This example represents just one of the many areas we've addressed to improve the product's overall accessibility and user experience.

Existing UI Colors

Adding new color

Contrast Ratio

3.48:1

Web Content Accessibility Guidelines

Conditional Fields

The "Conditional Fields" section in the authoring page UI allows users to customize a field's behavior based on a specific condition. Typically, this feature enables a field (conditioned) to appear, disappear, unlock, or change format in response to the input applied in another field (conditioning). For instance, a field with a specific rule about a state law might only display if the recipient selects that state in a previous field.

Integrated into the "Customize Fields" Panel.

Considering the drawbacks associated with modal dialogs, we have integrated the 'Conditional Fields' feature directly into the 'Authoring Left Panel' instead of keeping it in a modal. Modal dialogs often disrupt users by pulling them away from their current tasks, imposing a cognitive load that can lead to forgetting key details associated with the original task. By incorporating this feature into the panel, we aim to reduce distractions and allow for uninterrupted workflows.