Stord: Warehouse management | Product Designer

Stord • 2021 • 4 weeks

Stord: Helping warehouse managers visualize their inventory

How might we help warehouse managers view and manage inventory?

02. Project overview

Why is Stord building an internal WMS (Warehouse management software)?

Since Stord had a mission of creating a cloud supply chain, so warehouse managers needed an instant and accurate way of inventory visibility. Before this internally built WMS, we partnered and bought software from a 3rd party WMS. (Infoplus wms)

Currently, Stord had a few problems:
1. The current WMS software Stord integrated with was slow to update. Too much time in between when the WMS software gave us inventory updates that our shippers could view.

2. When Stord's implementation team onboarded new customers, there were some requirements that these new customers needed that Infoplus didn't have. If we built WMS internally, we can control our roadmap and control our destiny and onboard more customers.

03. Discovery

Getting Started

To align engineering, product, and design, I went over a design brief to figure out the why, who, when, where, what, and how people working in fulfillment centers were operating.

This project needed to be designed, developed within 100 days (design complete in 4 weeks)

Understanding WMS software

There are a lot of different types of WMS software that focus on different types of shippers.

1. Parcel (B2C fulfillment)
2. Bulk (B2B fulfillment)

The team (product, design, development) debated on which type of shipper to target first for the future and to build this initial MVP out. We picked bulk because most of Stord's current customers are bulk shippers and that would be the highest impact.

04. Research

Understanding Bulk Shipping Workflows

I wanted to learn more about who, how, where, and why bulk fulfillment was being done. I wanted understand their current workflow and also to see opportunities to improve the UX with the limited time.

User Groups

Warehouse Supervisor

Edgard is a warehouse manager. He is on the floor day to day. He is responsible for the accuracy of inbound orders (PO), outbound orders, and inventory. He makes sure that all the work warehouse associates do is done efficiently and accurately.

Warehouse Visits

The goal of the visits was to understand why and who the user groups were and understand their workflows.

1. There are dedicated receiving locations/shipping locations

2. Pallets of goods are dropped off at the receiving location

3. Associate takes the inbound pallet and puts them away. A license plate #) is associated with this pallet for item tracking.

4. LPN is on the pallet to let pickers know what they are picking and how many there are.

1. Warehouse associate view their scanner app to see what they need to pick.

2. Goes to the location of the item. Scans the location barcode

3. Scans the individual LPN that the item is associated with and takes that case

4. Takes items to the shipping location with a forklift for trucks to pickup

05. Define

Pain Points, Metrics & More

The next step is to compile all the different customer pain points to find patterns so that I can prioritize which pain points to target first.

Needs

1. Automated and efficient way to prioritize orders that needs to be shipped out for the day.

Pain Points

1. Takes too long to organize all orders that need to be shipped out for the day.

2. Prioritizing orders is a bit difficult when I start the day

Success Metrics

1. Have a shipper use our internally built WMS

06. Ideation

Iterating and Communicating

Once the team defined all the pain points, needs, and success metrics, I started drawing up ideas to target our user's pain points. I also designed to hit our success metrics.

Ideas

1. Sorting columns (Updating existing UX)

2. Grouping orders by similarity (New feature)

3. Managing filters users don't use (New feature)

4. Automation rules (New feature, however too much lift)

5. Saved "views" combination of filters, groups & sorted columns (New feature)

07. Solution

Turning Ideas into Reality

Turning wireframes into designs

Filtering

Batches (Bulk Purchase & Print Shipping Labels)

08. Conclusion

Project Results

Due to changes in management, the new design system was halted and direction was changed. Implemented UX using the old design system in place. I started seeing a 30% reduction in time spent using the old designs.

The next step to make ShipStation more efficient would be through easier automation. This way users can set automation once and the software will do 80% of the heavy lifting (Sorting, filtering, etc.)

Problem

Discovery

Define

Company

Research

Ideate & Solve

01. Company

Stord is a cloud supply chain visibility platform for bulk B2B shippers.

Shippers = retailers. Stord works with companies that want to ship out pallets to distribution centers or parcel fulfillment centers.

Shippers ship goods out to one of Stord's networks of warehouses so that Stord can fulfill their products as cost-efficient as possible.

Stord also partners with 3PLs (3rd party logistic companies) so when a shipper decides to do business with Stord, Stord can either store shipper's goods in Stord's warehouses or other 3PL-owned warehouses that Stord partners with.

The blue Stord logo represents all the Stord owned warehouse facilities and green dots represent partnered warehouses.

02. Problem

Why is Stord building an internal WMS (Warehouse management software)?

Warehouse managers needed an instant and accurate way of inventory visibility.
Before this internally built WMS, we partnered and bought software from a 3rd party WMS. (Infoplus wms)

The Problem

The current WMS software Stord integrated with was slow to update. Too much time in between 3rd party software gave inventory updates.
Requirements that these new customers needed that 3rd party software didn't have.

Problem

The outsourced WMS (Warehouse management system) was slow, didn't sync inventory accurately and couldn't get real time order and inventory visibility.

03. Discovery

Getting Started

To align engineering, product, and design, I went over a design brief to figure out the why, who, when, where, what, and how people working in fulfillment centers were operating.

Inventory portion of this project needed to be designed, developed within 4 weeks.

Prompt

Design a way for warehouse managers to receive, view and manage item inventory within our WMS software

Understanding Users and Flows

I had experience in the B2C parcel fulfillment workflow. However, I did not have much experience in the B2B bulk workflows so I wanted to better understand B2B shippers operations.

Narrowing down type of WMS

There are a lot of different types of WMS software that focus on different types of shippers.

1. Parcel (B2C fulfillment)
2. Bulk (B2B fulfillment)

The team (product, design, development) debated on which type of shipper to target first for the future and to build this initial MVP out. We picked bulk because most of Stord's current customers are bulk shippers and that would be the highest impact.

04. Research

Understanding Bulk Shipping Workflows

I wanted to learn more about who, how, where, and why bulk fulfillment was being done. I wanted understand their current workflow and also to see opportunities to improve the UX with the limited time.

User Groups

Warehouse Supervisor

Edgard is a warehouse manager. He is on the floor day to day. He is responsible for the accuracy of inbound orders (PO), outbound orders, and inventory. He makes sure that all the work warehouse associates do is done efficiently and accurately.

Warehouse Associate

Helen is a warehouse associate. She is responsible for picking outbound orders and receiving inbound orders using forklifts. She also conducts cycle counts and different inventory moving tasks.

Warehouse Visits

The goal of the visits was to understand why and who the user groups were and understand their workflows.

Inbounds flow (Inventory coming into the warehouse

1. There are dedicated receiving locations/shipping locations

2. Pallets of goods are dropped off at the receiving location

3. Associate takes the inbound pallet and puts them away. A license plate # (LPN) is associated with this pallet for item tracking.

4. LPN is on the pallet to let pickers know what they are picking and how many there are.

Outbounds flow (Inventory coming into the warehouse

1. Warehouse associates view their scanner app to see what they need to pick. (Infoplus UI)

2. Goes to the location of the item. Scans the location barcode and grabs the pallet using a forklift or into a bin for smaller orders

3. Scans the individual LPN that the item is associated with and takes that case

4. Takes items to the shipping location with a forklift for trucks to pickup

05. Define

What to design and build

Once engineering, product, and design got a firm grasp of the workflows and requirements we started to narrow down the ask for this project.

Devices

When I explored the warehouse we saw a lot of warehouse associates using handheld scanners and warehouse managers using pc desktops to view and manage inventory for efficency.

Design Needs

1. Manager: Inventory visibility
2. Associate: Order receiving visibility
3. Associate: Put away items

Technical constraints

Quick overview of the data model. Customers wanted to quickly visualize at every point what, and where the items were.

Release Timeline

The PM helped define the timeline.
For phase 1, we decided to push out the inventory table using Chakra UI.

For phase 2, adding features that we wanted to add more common table sorting and filtering UI.

For phase 3, updating and making the UI match Stord's new color pallet and brand.

There are time gaps in between phases to learn and other projects that needed to be done before the UI revamp

06. Ideate & Solve

Fat marker drawings

Since I wanted to design something shippable within 4 weeks I drew out some concepts with engineering lead and the PM.

Item inventory view

Standard table with items, SKU

Too much effort: Concept from airline ticking to select a location to visualize where and what location has inventory. Dots would represent if item is present.

Item details page

Item details page if managers want to see a bit more about the item

Reducing scope

We could add common table features such as filtering, searching, sorting, and adding/removing table columns. However, for this first phase, I wanted to narrow and remove unnecessary features to get something shippable within a given time frame that the team can design and develop.

Scanner Receiving

Scan will input and take associates to the next step

Associates can tap on a sku to receive

The logic here is to help limit mistakes for the associates. Additionally, the keyboard shouldn't hide important information. Associates must receive items to a receiving location and a PO. Also, associates are using the Keyence scanner to receive and put away items. Keyence resolution: Android 320x640.

07. High Fidelity Prototypes

Concrete UI

Once we had some wireframes to work from, I went and turned these wireframes into high-fidelity designs and added copy. UI wasn't the most polished as I would like, but it was something shippable via stakeholders and to learn quickly.

08. User feedback

Eliminate clicks!

Associates: I hate tapping so much
Managers: I want to be able to see my inventory warehouse so that I don't have to filter and sort constantly.

Updating UX

I went back into the screens and updated places in the scanner workflow to eliminate unnecessary typing so that associates can leverage the scanning technology.

Eliminate typing SKU - scan SKU barcode if applicable.
Eliminate typing PO # - scan PO # if applicable.
Full pick workflow - pick entire pallet vs typing qty.

09. Future UI work

Polish

Polishing up UI for scalability and aesthetics.

10. Conclusion

Next steps

The team is currently evaluating user behavior and the next steps for our WMS product. Since we didn't have initial quantitative data to work with, we are gathering user data to understand inventory accuracy.

Some key learnings/potential next steps

Always think about eliminating extra taps and consider the keyence scanning technology.
Need to think about companies that might not have an expensive scanner with an android device.
Understand that the UI is not going to be fully polished when you design a new product offering. Design something shippable, learn and improve.
Designing a new product with limited resources is f'ing hard

Prototypes

User feedback

Future

Conclusion

Stord • 2021 • 4 weeks

Stord: Helping warehouse managers visualize their inventory

How might we help warehouse managers view and manage inventory?

Why is Stord building an internal WMS (Warehouse management software)?

Getting Started

To align engineering, product, and design, I went over a design brief to figure out the why, who, when, where, what, and how people working in fulfillment centers were operating. This project needed to be designed, developed within 100 days (design complete in 4 weeks)

Understanding WMS software

Understanding Bulk Shipping Workflows

I wanted to learn more about who, how, where, and why bulk fulfillment was being done. I wanted understand their current workflow and also to see opportunities to improve the UX with the limited time.

User Groups

Warehouse Supervisor

Edgard is a warehouse manager. He is on the floor day to day. He is responsible for the accuracy of inbound orders (PO), outbound orders, and inventory. He makes sure that all the work warehouse associates do is done efficiently and accurately.

Warehouse Visits

Pain Points, Metrics & More

The next step is to compile all the different customer pain points to find patterns so that I can prioritize which pain points to target first.

Needs

1. Automated and efficient way to prioritize orders that needs to be shipped out for the day.

Pain Points

1. Takes too long to organize all orders that need to be shipped out for the day.

2. Prioritizing orders is a bit difficult when I start the day

Success Metrics

1. Have a shipper use our internally built WMS

Iterating and Communicating

Once the team defined all the pain points, needs, and success metrics, I started drawing up ideas to target our user's pain points. I also designed to hit our success metrics.

Ideas

1. Sorting columns (Updating existing UX)

2. Grouping orders by similarity (New feature)

3. Managing filters users don't use (New feature)

4. Automation rules (New feature, however too much lift)

5. Saved "views" combination of filters, groups & sorted columns (New feature)

Turning Ideas into Reality

Turning wireframes into designs

Filtering

Batches (Bulk Purchase & Print Shipping Labels)

Project Results

Due to changes in management, the new design system was halted and direction was changed. Implemented UX using the old design system in place. I started seeing a 30% reduction in time spent using the old designs.

​

The next step to make ShipStation more efficient would be through easier automation. This way users can set automation once and the software will do 80% of the heavy lifting (Sorting, filtering, etc.)

Stord is a cloud supply chain visibility platform for bulk B2B shippers.

The blue Stord logo represents all the Stord owned warehouse facilities and green dots represent partnered warehouses.

Why is Stord building an internal WMS (Warehouse management software)?

Warehouse managers needed an instant and accurate way of inventory visibility.

Before this internally built WMS, we partnered and bought software from a 3rd party WMS. (Infoplus wms)

The Problem

The current WMS software Stord integrated with was slow to update. Too much time in between 3rd party software gave inventory updates.

Requirements that these new customers needed that 3rd party software didn't have.

Problem

The outsourced WMS (Warehouse management system) was slow, didn't sync inventory accurately and couldn't get real time order and inventory visibility.

Getting Started

To align engineering, product, and design, I went over a design brief to figure out the why, who, when, where, what, and how people working in fulfillment centers were operating. Inventory portion of this project needed to be designed, developed within 4 weeks.

Prompt

Design a way for warehouse managers to receive, view and manage item inventory within our WMS software

Understanding Users and Flows

I had experience in the B2C parcel fulfillment workflow. However, I did not have much experience in the B2B bulk workflows so I wanted to better understand B2B shippers operations.

Narrowing down type of WMS

Understanding Bulk Shipping Workflows

I wanted to learn more about who, how, where, and why bulk fulfillment was being done. I wanted understand their current workflow and also to see opportunities to improve the UX with the limited time.

User Groups

Warehouse Supervisor

Edgard is a warehouse manager. He is on the floor day to day. He is responsible for the accuracy of inbound orders (PO), outbound orders, and inventory. He makes sure that all the work warehouse associates do is done efficiently and accurately.

Warehouse Associate

Helen is a warehouse associate. She is responsible for picking outbound orders and receiving inbound orders using forklifts. She also conducts cycle counts and different inventory moving tasks.

Warehouse Visits

Inbounds flow (Inventory coming into the warehouse

Outbounds flow (Inventory coming into the warehouse

What to design and build

Once engineering, product, and design got a firm grasp of the workflows and requirements we started to narrow down the ask for this project.

Devices

When I explored the warehouse we saw a lot of warehouse associates using handheld scanners and warehouse managers using pc desktops to view and manage inventory for efficency.

Design Needs

1. Manager: Inventory visibility 2. Associate: Order receiving visibility 3. Associate: Put away items

Technical constraints

Quick overview of the data model. Customers wanted to quickly visualize at every point what, and where the items were.

Release Timeline

The PM helped define the timeline. For phase 1, we decided to push out the inventory table using Chakra UI. For phase 2, adding features that we wanted to add more common table sorting and filtering UI. For phase 3, updating and making the UI match Stord's new color pallet and brand.

There are time gaps in between phases to learn and other projects that needed to be done before the UI revamp

Fat marker drawings

Since I wanted to design something shippable within 4 weeks I drew out some concepts with engineering lead and the PM.

Item inventory view

Standard table with items, SKU

To align engineering, product, and design, I went over a design brief to figure out the why, who, when, where, what, and how people working in fulfillment centers were operating.

This project needed to be designed, developed within 100 days (design complete in 4 weeks)

To align engineering, product, and design, I went over a design brief to figure out the why, who, when, where, what, and how people working in fulfillment centers were operating.

Inventory portion of this project needed to be designed, developed within 4 weeks.

1. Manager: Inventory visibility
2. Associate: Order receiving visibility
3. Associate: Put away items

The PM helped define the timeline.
For phase 1, we decided to push out the inventory table using Chakra UI.

For phase 2, adding features that we wanted to add more common table sorting and filtering UI.

For phase 3, updating and making the UI match Stord's new color pallet and brand.

I went back into the screens and updated places in the scanner workflow to eliminate unnecessary typing so that associates can leverage the scanning technology.