Embedded Files
Overview
Overview
This project aimed to create an effortless and efficient way for eCommerce retailers to manage orders using Dlvvr's shipping options, while ensuring integration with Shopify and a user-friendly experience.
The Process
The Process
Requirements
Requirements
Design an app empowering users to effortlessly view and manage orders utilizing Dlvvr’s shipping option. The app must:
One-stop Shop Dashboard : Create a dynamic dashboard offering a comprehensive summary of all orders, including their status and crucial information.
Shopify Integration : Ensure seamless integration with Shopify, facilitating complex interactions with orders and maintaining synchronization.
Effortless Registration: Provide users with a straightforward process to register their Shopify store(s), reducing friction in onboarding.
Flexible Billing Options: Implement a pay-per-use billing system, offering users flexibility and transparency in managing their expenses.
Service Control: Enable users to easily toggle the Dlvvr service on/off and customize specific features according to their business needs.
Time Management Features: Incorporate functionalities allowing users to set and adjust their business hours and holidays, promoting efficient scheduling.
Research
Research
As I delved into this project, the absence of a product meant no existing user data for research. To uncover pain points faced by retailers in their current processes, I closely examined how they navigated Shopify’s platform, especially in managing online orders and shipments. Two carrier types stood out: major shipping carriers like Canada Post and UPS, and smaller same/next-day carriers, direct competitors to Dlvvr. While the processes were straightforward, they revealed numerous steps and challenges hindering the smooth delivery of customers' orders.
Major Shipping Carriers
The store's staff receive a notification for every new order, whether for shipping or curbside pickup.
Verify the order and check item availability.
Retrieve items and package them in a box.
In Shopify, select the order, print label(s), and apply them to the box(es).
Drop the package at the carrier, dropbox, or schedule a pickup in the admin.
The carrier collects all packages, bringing them to their warehouse for triage (high probability of package loss).
Shipping times vary from 2-15 days, requiring customers to retrieve packages from the warehouse if missed.
Pros
Notifications for new orders.
Automated billing within Shopify (mostly).
Delivery settings manageable within Shopify.
Order management within Shopify.
Cons
Notifications lack clarity on carrier or preparation time.
Manual actions abound (fulfillment, label printing, packaging, pickup).
Complexity in shipping options and settings.
Staff training required for tasks.
Risk of human error in label printing and packaging.
Time-consuming and expensive packaging.
Package deposit or pickup often done by owners.
Restriction on changing the shipping provider or selected speed.
Major Competitors (Same/Next-Day Delivery Services)Carriers
Staff receive notifications for orders from this carrier.
Open the carrier's app to view and prepare orders, occasionally creating orders manually.
Verify order and check item availability.
Retrieve items and package them in a box.
Open the carrier's app, select the order, print label(s), and apply them to the box(es).
The shipping carrier arrives before 12 PM (orders after cutoff delivered/picked up the next day).
Staff marks the order fulfilled in Shopify.
The carrier collects packages for triage (high probability of package loss).
Deliveries by the carrier start by 5 PM, delaying customer receipt.
Pros
Notifications for new orders specific to the carrier.
More flexibility in billing options.
Cons
Billing not automated within Shopify.
Manual actions abundant (fulfillment, label printing, packaging, pickup).
Delivery settings updated outside Shopify.
Order management outside Shopify.
Complexity in shipping options and settings.
Staff training required for tasks.
Risk of human error in label printing and packaging.
Time-consuming and expensive packaging.
Package deposit or pickup often done by owners.
Restricted changes to the shipping provider or selected speed.
Most customers receive packages late in the day.
Other Considerations & Findings
Some retailers use warehouses or third-party warehouses to expedite shipping.
Converting orders between shipping carriers could offer flexibility.
Retailers prefer Shopify's dashboard, especially from their POS screen.
Shopify's open design system supports app developers and designers.
Business owners and staff, mostly not tech-savvy, handle shipping complexities.
Training required for staff in proper package arrangement with labels.
Business owners prioritize customer service.
Retailers favor curbside pickup for process efficiency.
The Perfect Process
After scrutinizing various pros, cons, and pain points in discussions with different stores, I crafted an ideal process. They envisioned a seamless, simple, and efficient workflow without compromising features, quality, or flexibility. Their preferences included:
Prompt notifications of new orders with carrier name, "prepared by" time, and delivery time.
Staff ability to easily view ordered items and package them as if for a customer, in a branded bag.
Simple handoff to a courier without manual actions.
This envisioned process aimed to eliminate most steps, mirroring a customer entering a store, scanning items, putting them in a bag, and completing the transaction. The preference was to use the Shopify platform over another app, saving time and reducing training efforts for both owners and staff.
Design
Design
Ideation and Feasibility
Ideation and Feasibility
In the initial stages, I rapidly generated ideas and sketches with a clear set of goals:
Ensure app installation and registration are a "1-click" operation.
Enable users to quickly activate the service on their store with minimal friction.
Allow users to start using the app seamlessly without extensive training.
Provide the capability to manage orders directly from the front desk, utilizing the POS system.
Automate as much of the process as possible.
With these objectives in mind, I collaborated with developers, presenting them with specific requirements and sketches. Key headlines included:
App installation requiring minimal user actions.
Full integration within Shopify, avoiding external dependencies.
Utilization of Shopify's billing system for streamlined retailer billing.
Adoption of Shopify's design system for cohesive app design and coding.
Elimination of the need for labels, boxes, and scanning.
Automation of fulfillment at pickup.
Implementation of notifications to alert staff about every Dlvvr order, including delivery times (same-day/next-day).
Despite facing certain limitations in integration possibilities and time constraints, the majority of the outlined requirements proved achievable.
Designing for Shopify
Designing for Shopify
To ensure seamlessness within Shopify's existing UIs, I conducted an in-depth analysis of user interactions. This involved studying Shopify's design guidelines and collaborating with a developer to understand their design system. At the time, the absence of a Figma library prompted me to create my own using Sketch files provided. Leveraging my proficiency in Figma, I swiftly addressed the library issues, laying the groundwork for the design phase.
Design of the Dashboard
Design of the Dashboard
Aligning with user research and business requirements, specific elements were deemed essential for display:
Order ID
"Prepare by" time
Order status
Customer's name
Zoomr name and telephone number
From an interaction perspective, it was crucial to provide a pathway to the original order and offer tools for order management, including status changes and tracking.
Following iterations and feedback from the team, we opted for an interface resembling Shopify's orders UI, striking a balance between familiarity and distinction to avoid user confusion.
To enhance user focus on critical data, I established a visual hierarchy in the table, emphasizing open orders. Utilizing Shopify's tab system, I categorized statuses into Open, Paused, Delivered, and Canceled tabs. Prioritizing open orders, I sorted columns by urgency and maintained the Order ID as the first column, aligning with Shopify Orders' page.
For further emphasis, I highlighted same-day orders with the earliest "Prepare by" time, sorting the Open tab accordingly. The "Prepare by" time information would be omitted for orders already picked up.
Status played a vital role, prompting the use of Shopify's tag system to signify different statuses. These were sorted as Assigned, Pending, Out for delivery, and Paused. Additional information such as customer's name and courier details were presented adjacent to the status tags.
Anticipating user interactions, I ensured fields were clickable, allowing users to navigate to order details or execute more actions, mirroring Shopify's approach. This approach was seamlessly integrated into the Dlvvr Dashboard, enhancing user accessibility and functionality.
Wrap-Up
Wrap-Up
Dlvvr's dashboard received acclaim, boasting a 5-star rating on the Shopify App Store. The success lies in its seamless integration with Shopify, automated processes, and user-friendly design – making it the highest-rated delivery app globally.
Page updated
Google Sites
Report abuse