Roadie Seller

a B2B2C platform that aims to help local small vendors sell and ship their products with the current Roadie delivery service.

Role:
Product designer
UX researcher

Team:
1 Product Designer
1 UX Researcher

Methods:
Contextual inquiry
Prototyping
Usability testing
Data analysis

Tools:
Figma
Figjam
Zoom
MS Suite

01. Overview

Problem Space

Roadie wants to help local vendors ship their products

Roadie is a delivery platform that enables urgent, same day and next-day delivery of just about anything, anywhere in the U.S., and they wanted to expand the current business by encouraging small local vendors to deliver their products to customers with Roadie drivers.

Problem Statement

"How might we support small business owners in finding new ways to sell and ship their products with Roadie delivery services?"

Solutions

Design a B2B2C platform for small vendors to easily manage inventory, ship purchased orders, and receive feedback from customers

02. Research

User Research

UX researcher and I rarely used any delivery services to buy perishable goods. We wanted to begin the research by understanding what the current delivery services look like in the market and what small vendors think about some existing e-commerce platforms, so we conducted 2 research methods: competitive analysis and user interviews.

Key Research Findings

03. Design

Ideation

Brainstorm initial design ideas with UX professionals

We practiced Crazy 8’s, a core Design Sprint method where everyone brainstorms 8 distinct design ideas, to collect as many design ideas as possible in a group of 9 UX professionals. Then, we invited the participants to share and compare what they wrote on stickies and later summarized them into 7 overarching design ideas.

Design Requirements

Functional

Non-functional

01.
Track Inventory
Sellers are able to update and keep track of their inventory effortlessly.
01.
Low Learning Bar
Sellers should not have to devote a lot of time to learning and understanding the platform.
02.
Manage Inventory
Sellers are able to see and manage orders at every stage of the selling process, from purchase to delivery.
02.
Provide Feedback
The platform should provide sellers with appropriate feedback about the status of their deliveries.
03.
Track Delivery
Sellers are able to track delivery orders and receive shipping updates.
04.
Communicate with customers
Sellers are able to communicate directly with the drivers and their customers.

Design Concept Evaluation

Distill down 2 design concepts into web-based Roadie seller platform

Inspired by some design ideas that we collected from ideation, we came up with 2 competing design concepts and invited our clients to evaluate which one would be more aligned with the project objectives.
The first design provides our target users with a streamlined, dashboard-based website interface to easily view and manage their personalized delivery ecosystem.
This design provides our target users with a streamlined, dashboard-based website interface to easily view and manage their personalized delivery ecosystem.

Workflow

Map out the workflow to analyze user selling and shipping behavior

Our clients pointed out the business and technical limitations of the add-on tool and leaned toward the dashboard-based website. They also hoped to see an integration between the new seller platform and the existing product. Therefore, we decided to map a workflow to visualize how the new design can connect with the current Roadie website to support local vendors selling and shipping their products.

04. Prototype

Wireframe

Visualize the initial design on Figma to show basic functionalities

Based on the workflow, we identified some key tasks and wireframed 6 screens on Figjam to show how small vendors can interact with the product to manage inventory, shipments, and customer orders.  

Wireframe Feedback

Test workflow on the wireframe with 4 small business owners

We wanted to test whether the workflow makes sense to users, so we invited 4 small business owners who sell products online and on-site and conducted cognitive walkthroughs on Figjam to see how they reacted to the wireframe. We color-coded 73 testing data by types and discovered that the users gave overwhelmingly positive feedback to the current product workflow.

Prototype & Iterations

Keep iterating the design based on user and stakeholder feedback

The wireframe evaluation indicated that the basic workflow works well for users, so we decided to spend more time in designing the UI and enhancing information hierarchy. We made 3 fidelity levels prototype and conducted 5 UX evaluations to validate the design with UX professionals and stakeholders. Based on their feedback, we iterated the design to improve UI and user experience.

Wireframe to Low-fi

Refine the design to show key features and main user flows

Low-fi Testing

Conduct a/b tests and iterate the button design to maintain consistency

Redesign the nav bar and the side menu to enhance navigation

Mid-fi Prototype

Test the mid-fi prototype with UX professionals to get feedback

More iterations

Streamline the menu design and standardized the button design

Hi-fi Prototype

Apply the design system to hi-fi prototype and revamp user flows

With the client’s approval for the design system, I applied it to the hi-fi prototype to refine the design and prepare for usability testing.

Hi-fi Testing

Conduct a heuristic evaluation to evaluate information hierarchy

However, at this stage, we were hesitant about information hierarchy and how to prioritize “should do” over “could do,” so we decided to conduct a heuristic evaluation over hi-fi prototype and invited 10 UX professionals to look for some UX problems and provide potential solutions on Figjam. We collected 74 comments and iterated the prototype based on their user feedback.

Final Designs

Design System

View dashboard to make business decisions

Users can initiate key actions, view pertinent information, and use the global side panel to navigate elsewhere on the dashboard.

List new items and manage inventory

Users can create brand new listings or use an auto-fill option to quickly update and manage their inventory.

Deliver with Roadie in a seamless experience

Users can check order details, modify them, and easily deliver their product with Roadie drivers.

Track deliveries to ensure on-time rate

From the dashboard, users can easily identify in-transit orders and track delivery status in real-time.

Get feedback to optimize communication

Users can converse with customers to receive feedback from individual orders and questions about inventory items.

05. Testing

Usability Testing

Evaluate the design with users to get real-world feedback

We also wanted to hear feedback from our target users other than UX professionals and stakeholders on our product, so we could evaluate the usability of our product and make iterations in the future. We showed the Figma prototype to 4 small business sellers on Zoom and conducted task-based think aloud to observe how they navigate our platform and hear what they think about our design.

06. Reflection

Lesson Learned

01. Prioritize “should do” over “could do”
How to establish an information hierarchy that allows users to receive key information and take action is challenging, and I spent a lot of time thinking about how to design interfaces that give users streamlined information yet prompt them to keep exploring the product.
02. Choose a right method
There are numerous research and design methods available, but given a limited amount of time and resources, I learned how to choose appropriate methods to tackle the issue quickly and effectively.
03. Gain confidence in talking to users
We were intimidated by talking to vendors in the local markets at the beginning, but soonly, we realized that they were very approachable and willing to share their thoughts and experiences. Talking to users affords me confidence and skills in conducting user interviews.
Code snippet for Zoomsl v3.0 https://github.com/taveevut/zoomsl Made in Webflow