Merchant APP

Impact

V1: I created the merchant app from scratch. After the merchant app was built, the unique package loading process and clean interface helped attract multiple local stores to partner and test with us. The stores included Draeger’s market, Delivery Guys, Freshop, Backhaus and Que SeRaw SeRaw.

After several rounds of testing, the loading task completed rate increased from 67% to 83%. Loading time decreased by 5%.

V2: After observing different companies’ business models, we developed a new task flow and user experience for B2B, which helped XL Parts deliver their goods from store to store easily. The delivery routes per day increased from 3 routes to 10 routes.

Also, the app would record all the delivery history automatically, which saved drivers 20% of their time, which they had spent on paperwork.

V3: Udelv new model transporter version and new version B2B mobile app won a research contract with USAF for autonomous parts delivery system.

The Problems

Merchants are seeking a solution to replace drivers. How can autonomous vehicles be the solution?

Manual work could waste time and cause errors
Some small to medium size merchants are still using paperwork to record delivery times. They require drivers to write down and sign their name which may waste time and cause errors

The Challenge

Help merchants manage and track customer deliveries.

To create a better loading process for merchants, we should design a product that

Makes it easy to understand how to open and load compartments.
Select correct compartments in the mobile app and load deliveries to the correct compartments in the physical vehicle.
Has the ability to undo the actions and errors.
Make sure the delivery is on track after loading.
Helps users find the corresponding package quickly.

Inspiration/Feature Analysis

Learnings From Analysis

Amazon Flex:
The scan function could help merchants load delivery fast.It also helps merchants record all the data and timing.

Uber Rush:
The map and status highlight interface are excellent features for merchants to keep track of their deliveries. We should avoid unpredictable work at this point, so we may need to hold the feature that allows users to order a vehicle to pick up things that they want to deliver.

Parcel:
The detailed information such as the destination and departure location is very useful. It could remind users to pick up and help users to keep track of packages. Another advantage of Parcel is it integrates every delivery service such as UPS, USPS and Fedex and users can track it at once. If Udelv can develop an app that allows users to follow all the package deliveries, it will benefit users.

Partners/Clients Research

The Approach

Efficient: Create a simple process for merchants to load items quickly and accurately.
Create a user interface that helps users connect the app with the real world and indicate the space available in the vehicle.
Prevent errors: Add an alert popup before any important action.
Give user control and freedom: Offer to undo canceled, removed, and reload options to undo the action and fix mistakes.
Add notes on the top to help users understand using the app.
Offer users a way to track delivery times and status in the App.

Wireframe: Task Flow - Load Items

Task flow 1

Look at the name on the package (real life)
Select customer (phone)
Select compartment (phone)
Load delivery (real life)

Task flow 2

Select compartment (phone)
Look at the name on the package (real life)
Select customer (phone)
Load delivery (real life)

Observation And Decision

After paper prototype testing with people, 9 out of 10 people finished task flow 1 faster than task flow 2.

Physically, people said it’s more straightforward to pick up packages, look at a name and load.
Task flow 1 allows users to think about how many compartments the customer needs.
Knowing which customer deliveries have been loaded is more critical than knowing which compartment is full.
For the three ideas of task flow 1, we decided to choose “Idea 1” which is simple because merchants usually don’t have time to look at details. They need to load delivery as quickly as possible.

Iteration

What Did I Change?

Big compartment button: Easy to click.
Clear background image: Easy for users to know which side of the vehicle to load.
Need more compartments switch button: In case merchants need to assign one more compartment to the same customer.
More prominent main functional button: Avoid merchants accidentally clicking “Cancel.”
Image instead of text: Easy to click and recognize.
Disable buttons and add small gif animation: Prevent merchants from clicking the button too quickly.
Version 2 vehicle has a different iris system. Instead of opening a single compartment, users need to select multiple spaces inside the compartment. The specific areas that the user selects on the app can be automatically opened. At the same time, try to keep all the advantages of the version 1 interface.

Final Design

Easy To Undo List

Swiping an order left allows it to be removed and canceled from the trip. Swipe removed and canceled order again to undo the action.

When all orders are loaded, the slide control at the bottom will activate to allow completion of loading.

Easy to Assign Compartment

The loading screen presents a selection area to pick a space within a side of the vehicle.

Buttons along the bottom of the vehicle allow for picking a different side or the back areas of the vehicle.

White spaces in the selection area are available to be picked for the current order.

Orange spaces can be tapped to undo selection.

Easy to Modify Assigned Compartment

Cyan-colored spaces indicate a filled area and cannot be deselected from an order without opening the vehicle first to retrieve the items.

If free space is available around the previously loaded area, it can be selected to increase the total order space (for example, if items were accidentally left out and need to be added).

Track Delivery Status

Always track vehicle location and trip details through the app after the items are already loaded.