Revel System Design System
At Revel Systems, I was responsible for maintaining the POS design system and adding any new components that were created over my tenure there. This process includes both research and technical documentation after the update has been rolled out.
Buttons
Buttons are an interactive UI element for users to trigger a response. These buttons are mainly used within the Order Experience. The purpose of the buttons is to be dynamic in size so it can display additional content as needed.
Unselected State
Image Disabled
Image Enabled
A - Height of the container is dynamic depending on the configuration setting.
B - Placeholder for icons
C - Price display
D - Label display and can hold up to two lines
E - Color or image can be changed depending on the configuration setting.
Selected State
A - Height of the container is dynamic depending on the configuration setting.
B - Additional row is created for icons to display system status.
C - Quantity stepper to manipulate the total amount.
Additional Icon Assets
These icons are visual enhancements for modifier selection when editing a product.
For example,
Cards
A card is a container used to create a visible separation between pieces of content. This element is used in the Check Area of the ordering screen to display different types of products that are being worked on or added to the order.
Unselected State
A - Quantity Display
B - Label Display with dynamic text size depending on how many characters exist.
C - Price Display
Selected State
Card will be in a highlighted variation when tapped on. Tapping on the product will redraw the menu to where the button tile resides or the edit view.
Tool Bar
The toolbar provides access to frequently used actions relevant to the current view.
A - Modifier Options toggles that allow users to change how the modifier is served.
B - Split Modifier toggles that allow users to apply modifiers to a certain side.
C - Linked Combo Presets which allows users to switch to different menus.
D - Active state display to let users know they have turned it on.
Depending on the configuration settings, you are able to turn on/off certain features that exist in the toolbar.
Sidebar
A sidebar UI component is a graphical interface element positioned along the edge of a tablet or iPad screen, designed to display navigation options or additional content, facilitating intuitive user interaction and accessibility within applications or websites
Check Area Sidebar
A - CRM feature & meatball menu holding tertiary actions
B - Product cards that display information such as modifiers and pricing.
C - Power gesture left swipe to delete/remove.
D - Power gesture right swipe to upgrade a simple product to a combo.
E - Tray element that displays additional pricing information. Can collapse and expand when tapped on.
F - Primary CTAs that allow users to cancel, hold, send/save, and pay. Both the top and bottom buttons are dynamic in labeling depending on where the user is at.
G - Quick action footer that displays 4 buttons by default and 28 buttons if expanded. Can be customized in the back office settings.
Order Management Sidebars
A - Quantity display with a navigation action to open up the order
B - List of product cards that are vertically scrollable.
C - Order actions related to the task.
D - Quick action footer element related to the user tasks. Can be customized on the back office settings.
A - Escape navigation and actions related to the payment flow.
B - Numpad with quick payment presets. There also exist payment type buttons.
C - Payment log to see what and how many payments have already been made.
D - Additional actions that could either be navigational or functional related to the user tasks.
Popover Views
A Popover View UI element on a tablet or iPad is a temporary display that appears over the current screen, providing contextual information or additional options without navigating away from the primary content.
A - Switch element for sorting
B - Table cell elements that are tapable. Primarily used for filtering multiple data sets. It can be multi-select or single select.
C - A table cell element that has a destructive behavior. Primarily used to reset all changes back to its default state.
These elements are used in these projects!
Centralized Hub for Customer Orders
Created a management queue experience that enables users to display all incoming customer orders for different channels.
Increasing Speed of Use when Servicing a Customer
Streamlining the ordering experience when a customer orders multiple products.