Feature Specifications: Edit Order
Here is an old product exercise where I created the requirements and designs for a feature where the user can edit their order after the purchase has been made. Keep in mind that this is a hypothetical situation and is just an exercise :).
1.1 Overview
For many years, the ReOrder app has been ranked as the #1 Shopify upselling app. This simple app transforms multiple 1-time customers into recurring ones, generating revenues and creating lifetime value for the eCommerce store. This app allows the merchants to fully customize their thank you page on Shopify with several widgets to choose from, such as product recommendations and discounts for the next purchase.
Now, the merchants who are using this ReOrder app are requesting the ability for customers to edit their order on the thank you page. The merchant would add this ‘Edit Order’ widget from their Shopify admin panel, customize this widget and publish it to their store.
This document captures the requirements and designs for this ‘Edit Order’ feature in the ReOrder app.
1.2 Requirements
For the ‘Edit Order’ feature, the merchant can select what they want their customers to edit in the order for unfulfilled orders. For example, if the order is unfulfilled, the merchant can choose to allow the customers to edit the quantity of the item, add a discount code, add new items or add a gift service.
A new section option called ‘Edit Order’ will be found in the ReOrder app. When the merchant clicks it, the left panel will have the following fields, as seen in Table 1.2.1. Once the merchant adds this ‘edit order’ section to their store, this widget will be displayed on the ‘Thank you’ page of the customer’s order.
Table 1.2.1: Fields of the ‘Edit Order’ widget feature in the ReOrder app.
Sub Section |
Field |
Type |
Option |
Action |
Unfulfilled Orders |
Allow customers to edit the following for unfulfilled orders: |
Checkbox |
Change item’s variant |
Provides the option for the customer to change the variant (e.g. color, size) of the item. |
Checkbox |
Change item’s quantity |
Provides the option for the customer to increase or decrease the quantity of the item. |
||
Checkbox |
Add new item |
Provides the option for the customer to add a new item to the order. |
||
Checkbox |
Remove item |
Provides the option for the customer to remove the item from the order. |
||
Checkbox |
Add discount code |
Provides the option for the customer to add a discount code to the order. |
||
Checkbox |
Add gift wrapping service |
Provides the option for the customer to add gift wrapping service to the order. |
||
Maximum time allowed for the customer to edit their order: |
Dropdown |
Every hour from 0 to 24 hours. |
Provides maximum time that the customer can edit their unfulfilled order (from the time it was created). |
|
Design |
Free Text |
Editing Box |
N/A |
Allows the merchant to customize the text about editing orders found on the ‘Thank you’ page. |
Button Text |
Textbox |
N/A |
Allows the merchant to customize the text on the button found on the ‘Thank you’ page. |
|
Button Alignment |
Dropdown |
Left, Right, Center |
Allows the merchant to customize the alignment on the button found on the ‘Thank you’ page. |
|
Button Background Color |
Color Selector |
N/A |
Allows the merchant to customize the background color of the button found on the ‘Thank you’ page. |
|
Button Text Color |
Color Selector |
N/A |
Allows the merchant to customize the text’s color on the button found on the ‘Thank you’ page. |
|
Delete |
Delete Section |
Button |
N/A |
Allows the merchant to delete this ‘Edit Order’ section on the ‘Thank you’ page. |
If the merchant adds this ‘Edit Order’ widget on their ‘Thank you’ page, this impacts the dashboard view on the ReOrder app. The following analytics would need to be added:
- Total Number of Edited Orders Over Time: A graph that calculated the total edits over time (e.g. per day or per month).
- Increase or Decrease in Revenue due to Edited Orders: A number that calculates the total amount of increase/decrease in revenue due to edited orders to date.
1.3 Design
One of the main goals of this ‘Edit Order’ feature is to make it easy to use for the merchant, thus increasing their user experience with the ReOrder app. A wireframe design has been created to illustrate the requirements of this ‘Edit Order’ widget found in the merchant view of the ReOrder app.
Image 1.3.1: Wireframe design of this ‘Edit Order’ feature in the ReOrder app.