Channel Dashboard / Bags
Bags Tab
Bags Tab
Bags Tab
Bags Tab
Bags Tab
Bags Tab
Carts, Order and Bags are explained and simplified into a user friendly interaction.
Carts, Order and Bags are explained and simplified into a user friendly interaction.
Carts, Order and Bags are explained and simplified into a user friendly interaction.
Carts, Order and Bags are explained and simplified into a user friendly interaction.
Carts, Order and Bags are explained and simplified into a user friendly interaction.
Carts, Order and Bags are explained and simplified into a user friendly interaction.
Scope
Orders and Bags were accessible through Violet’s API but not the Dashboard.
Problem
Non-technical users had limited access to their Orders, Bags, and SKUs without interacting with the API.
Solution
Displayed Orders at the Bag level in a table, allowing users to access SKU details by clicking on rows to open a detailed view with SKU information and various states.
Overview
Overview
Introduction to how Violet defines Carts, Orders and Bags.
Checkout revolves around the concept of carts. It involves creating, managing, and submitting carts, which ultimately result in an order. The goal of any checkout experience is to complete a cart and generate an order.
With Violet, you can offer a seamless end-to-end checkout experience to your shoppers without redirecting them to another platform. To understand how to integrate cross-platform checkout in Violet, it is important to grasp the key concepts of Carts, Bags, and Orders.
Introduction to how Violet defines Carts, Orders and Bags.
Checkout revolves around the concept of carts. It involves creating, managing, and submitting carts, which ultimately result in an order. The goal of any checkout experience is to complete a cart and generate an order.
With Violet, you can offer a seamless end-to-end checkout experience to your shoppers without redirecting them to another platform. To understand how to integrate cross-platform checkout in Violet, it is important to grasp the key concepts of Carts, Bags, and Orders.
Order ID = Cart ID
Order ID = Cart ID
In Violet, a Cart refers to an Order that is still in progress. These terms can be used interchangeably, including their ids. An Order will have the same id as the cart had before it was completed. The Cart encapsulates all the data that the shopper gathers for checkout, such as items, addresses, and payment methods.
In Violet, a Cart refers to an Order that is still in progress. These terms can be used interchangeably, including their ids. An Order will have the same id as the cart had before it was completed. The Cart encapsulates all the data that the shopper gathers for checkout, such as items, addresses, and payment methods.
Multi-Merchant Checkout
Multi-Merchant Checkout
A single Cart can include items from multiple Merchants. Each Merchant has its own nested Bag within the cart. In Cart and Order objects, a Bag is essentially the child of a Cart or an Order related to a single merchant. Bag data contains the items, prices, tax and shipping rates related to items for a single merchant. This Bag is synchronized with the respective Merchant’s platform. Data from all nested Bags within the order are consolidated into the Cart or Order object.
A Cart contains at least one Bag. A sample Order that had successfully been placed through our Sandbox API can be seen below:
Now with a clear understanding of how Violet defines Orders and Bags, let's continue onto this features requirements.
A single Cart can include items from multiple Merchants. Each Merchant has its own nested Bag within the cart. In Cart and Order objects, a Bag is essentially the child of a Cart or an Order related to a single merchant. Bag data contains the items, prices, tax and shipping rates related to items for a single merchant. This Bag is synchronized with the respective Merchant’s platform. Data from all nested Bags within the order are consolidated into the Cart or Order object.
A Cart contains at least one Bag. A sample Order that had successfully been placed through our Sandbox API can be seen below:
Now with a clear understanding of how Violet defines Orders and Bags, let's continue onto this features requirements.
Requirements
Requirements
Display data on the Bag Level
Provide breadcrumbs from the Order ID to the Bag ID
Capture the items within the Bag
The high level goal of this feature was to visually capture the structure already in place via the API. Instead of capturing the data from the order level, we captured the data by the Bag level. This decision provided more clarity when displaying the times belonging to the Bag. With the ability to review from the Bag View, user could access the Order it was a part of.
Display data on the Bag Level
Provide breadcrumbs from the Order ID to the Bag ID
Capture the items within the Bag
The high level goal of this feature was to visually capture the structure already in place via the API. Instead of capturing the data from the order level, we captured the data by the Bag level. This decision provided more clarity when displaying the times belonging to the Bag. With the ability to review from the Bag View, user could access the Order it was a part of.
Experience
Experience
The goal behind this experience was to provide easy navigation between Orders and their Bags without losing any key information.
The goal behind this experience was to provide easy navigation between Orders and their Bags without losing any key information.
Interface
Interface
The first set of tasks for this table was selecting the data to surface for the bag level. The Violet team selected the following:
Merchant Name
Amount
Bag ID
External ID
Payment Status
Fulfillment Status
Date
A sorting function was added to the header to enhance the user's viewing ability. In addition, the user could also filter by Merchant and Date.
The first set of tasks for this table was selecting the data to surface for the bag level. The Violet team selected the following:
Merchant Name
Amount
Bag ID
External ID
Payment Status
Fulfillment Status
Date
A sorting function was added to the header to enhance the user's viewing ability. In addition, the user could also filter by Merchant and Date.
The Detail View
The Detail View
Once the table was completed, the next task was to design the detail view, providing the user insight to the SKUs within a bag alongside a side pane populated with data.
The creative process for this feature consisted of many collaboration sessions in FigJam where a TPM and I worked thought the best possible ways to display data, enable the user to navigate through bags and have clear understanding of the multiple stages attached to a bag.
The two tasks transformed into a flow where once the user clicks on a row within the bag view, they were taken to the details screen to view SKUs and navigate between bags with ease.
Once the table was completed, the next task was to design the detail view, providing the user insight to the SKUs within a bag alongside a side pane populated with data.
The creative process for this feature consisted of many collaboration sessions in FigJam where a TPM and I worked thought the best possible ways to display data, enable the user to navigate through bags and have clear understanding of the multiple stages attached to a bag.
The two tasks transformed into a flow where once the user clicks on a row within the bag view, they were taken to the details screen to view SKUs and navigate between bags with ease.
The Details
The Details
Two micro-interactions are located on the right side of the Details View. The first is the ability to copy data. By hovering on 'Violet Bag ID' for example, a copy icon appears alongside a background around the data. The user can click to copy the Violet Bag ID to their clipboard.
The second micro-interaction is also located on the side pane. This micro interaction is a status overview component displayed within the Shipping section. For example, if the user wanted to review the Bag Status in order of progress, they can hover and then click on the status to reveal the compete list.
Two micro-interactions are located on the right side of the Details View. The first is the ability to copy data. By hovering on 'Violet Bag ID' for example, a copy icon appears alongside a background around the data. The user can click to copy the Violet Bag ID to their clipboard.
The second micro-interaction is also located on the side pane. This micro interaction is a status overview component displayed within the Shipping section. For example, if the user wanted to review the Bag Status in order of progress, they can hover and then click on the status to reveal the compete list.
Outcome
The Table and Detail view enables the user to view their Bags Statues. Shipping information and order specific data with ease.
Up Next!
Offers
Learn more about how Violet defines Offers and explore how the Dashboard support the user with offer specific and SKU information.
Up Next!
Offers
Learn more about how Violet defines Offers and explore how the Dashboard support the user with offer specific and SKU information.