Configuration Tab

Jump into the technical weeks by viewing Application and Violet Connect Configuration settings.

Scope

Provide easy access to the App Settings and Violet Connect configuration.

Problem

Task 1: App Settings: User's needed the ability to edit their App name, URL, description and image.
Task 2:Violet Connect Configuration: Enable the user to access the Violet Connect URL and Re-direct URL.
Task 3: Keep App Settings and Violet Connect Configuration on the same page for easy access, while ensuring each section was not confused with one other.

Solution

Displayed App Settings and Violet Connect configuration as two UI cards on the same page for clarity and ease of access based on the user's goal.

Overview

To provide clarity to the user, the screen was designed to display two unique sections. One for App Settings, and one for Violet Connect.

Requirements

Provide the user with three sections. App settings, Violet Connect configuration and app deletion.

App section must allow access to the applications name, image, info URL and description.

Violet Connect configuration required access to Violet Connect URL, Redirect URL and a locking safety step to ensure edits were purposeful.

App deletion allowed the user to delete an app if desired. This action triggered additional safety requirements.

Provide the user with three sections. App settings, Violet Connect configuration and app deletion.

App section must allow access to the applications name, image, info URL and description.

Violet Connect configuration required access to Violet Connect URL, Redirect URL and a locking safety step to ensure edits were purposeful.

App deletion allowed the user to delete an app if desired. This action triggered additional safety requirements.

Interface

For the App Settings, the visual design was simplified into a card style. The user can edit and modify the content and displayed images by opening an edit modal. Within the modal, the user has a focused area to compose a description and upload or edit the image or channel logo.

As for the Violet Connect configuration, the card visual treatment continued but varied in detail. Unlike the app detail where the user clicked into an editing modal, the Violet Connect URL and Redirect URL were visible in custom input variants. Before the user could edit the two values, they were required to unlock the section by clicking a small lock icon. Once unlocked the content became active. This small detail was added to enforce the user to take a second moment to confirm their action. This addition was fitting considering the two Violet Connect values were not often edited, and should have care applied when making edits, as they resulted in immediate impacts.

Outcome

The creative process for this page was a challenge at times, and required many iterations and team reviews. However, the end result enabled the user to access their app and successfully configure the Violet Connect settings.

Up Next!

Webhooks

Stay in sync with your merchants' merchandising using our new Webhook Events for Collections.

View Now

Up Next!

Webhooks

Stay in sync with your merchants' merchandising using our new Webhook Events for Collections.

View Now