Mobile shopping cart

The mobile app UI displays the shopping cart as a separate page overlaying the service catalog.

Figure 1. Elements of the mobile UI: shopping cart
Shopping cart user interface with callouts.

The mobile app UI shopping cart consists of the following elements.

Table 1. Elements of the mobile UI: shopping cart
UI element Description
Cancel button Closes the shopping cart.
Items requested Displays the list of items in the shopping cart.
Item costs Displays the one-time and ongoing costs of each requested item.
Cart totals Displays the one-time and ongoing total costs.
Checkout button Requests the catalog items in the shopping cart.
Edit button Displays an edit view to add or remove catalog items from the shopping cart.
Figure 2. Elements of the mobile UI: edit shopping cart
Editing the shopping cart interface.

When editing the shopping cart the mobile app interface consists of these elements.

Table 2. Elements of the mobile UI: editing the shopping cart
UI element Description
Items requested Select items to remove from the shopping cart.
Item quantity Edit the number of items requested.
Cart totals Displays the one-time and ongoing total costs as you edit the shopping cart.
Save button Update the shopping cart with the current items and quantities.
Figure 3. Elements of the mobile UI: order status
Sample order status

After checking out, the mobile app UI displays an order status page consisting of the following elements.

Table 3. Elements of the mobile UI: order status
UI element Description
Items requested Displays the items the user requested from the service catalog.
Item costs Displays the one-time and ongoing costs of the items requested from the service catalog.
Order details Displays information from the request record for this order.