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:

  1. Total Number of Edited Orders Over Time: A graph that calculated the total edits over time (e.g. per day or per month).
  2. 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.

Edit Order - Design