Roadie Seller

An industry sponsor project partners up with Roadie to expand its business from design and product development aspects. For the final solution, I designed Roadie Seller, a B to B to C 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

Background

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 the 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

We designed a website that allows small vendors to easily manage inventory, ship purchased orders, and receive feedback from customers regardless of the amount of time that they can put into their business and their knowledge of using e-commerce platforms.

02. Research

User Research

We wanted to understand 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 interview.

Key Research Findings

Based on the user interviews, we summarized 4 key research findings from 4 categories that would later inform and help define design requirements.

Personas

To better understand whom we design for and what their needs are, we created 3 personas to represent different types of small vendors based on the collected research data.

03. Design

Ideation

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

We also reorganized the ideas that we collected from the brainstorming sessions into 6 design requirements, including 4 functional and 2 non-functional ones that would serve as principles of design.

Functional

Non-functional

01.
Inventory

Sellers are able to update and keep track of their inventory effortlessly.

03.
Tracking

Sellers are able to track delivery orders and receive shipping updates.

01.
Accessible

Sellers should not have to devote a lot of time to learning and understanding the platform.

02.
Customer Order

Sellers are able to see and manage orders at every stage of the selling process, from purchase to delivery.

04.
Communication

Sellers are able to communicate directly with the drivers and their customers.

02.
Informative

The platform should provide sellers with appropriate feedback about the status of their deliveries.

Design Concept Evaluation

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 design concept on the left is an add-on tool that allows users to place new shipping orders, track shipments, and communicate with drivers and buyers.

The solution on the right would provide our target users with a streamlined, dashboard-based website interface to easily view and manage their personalized delivery ecosystem.

Workflow

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 in selling and shipping their products.

04. Prototype

Wireframe

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.  

Testing

The wireframe evaluation indicated that the product workflow works well for users, so we decided to spend more time designing the visuals and enhancing the information hierarchy. We made 3 fidelity levels prototype sand 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.

Prototype & Iterations

The wireframe evaluation indicated that the product workflow works well for users, so we decided to spend more time in designing the visuals 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

Moving from the wireframe to a low-fi prototype, I designed the initial layout by standardizing the top banner and the side menu, because these two main components would stay the same and provide flexibility for users to navigate across the platform.

Low-fi Testing

At this point, I had multiple design solutions in my head but had a hard time picking the best practice, so I conducted an a/b test by designing two interfaces and invited UX professionals and stakeholders to choose a better design.

Mid-fi Prototype

After conducting a few rounds of testing and receiving some helpful feedback, I focused on streamlining the mid-fi prototype design to enhance user experience. I removed the taskbar, replaced the clickable text with icons, and standardized the button design.

Design System

Before coloring the hi-fi prototype, we had to determine our design system. Since the seller platform belongs to the Roadie family, we wanted our visuals maintain an unique aesthetics yet look visually consistent with the current Roadie product, so users would not feel out of the place when switching between the two websites. We carefully selected the colors from the Roadie color plate, inherited the current roadie button design and typography, and chose rounded icons that resemble to the Roadie logo.

Hi-fi Testing

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

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

Final Design

View Dashboard

Users can initiate key actions, view pertinent information, and use the menu bar to navigate elsewhere on the dashboard.

List New Items

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

Deliver with Roadie

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

Track Deliveries

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

Get Feedback

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

05. Testing

Usability Testing

Beside UX professionals, we also wanted to hear feedback from our target users on our product, so we could iterate the product and enhance user experience 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 a local market 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.