RyderShip | Code Update
The image above shows the current Item’s Details layout and depicts a left side navigation layout on the left with a top sticky component containing high level global information like the item’s image and pertinent quantities.
Before Updates
Image above depicts the old code base with a tabbed view layout of categories on the left and an always present image with inventory counts on the right side.
TL;DR
Type of Company: Logistics (SaaS, B2B, B2C, DTC)
Problem: Outdated Code
Tools: Interviewing, Usability Testing, DataDog RUM, Figma Prototyping, Notion, ADO
Solution: Decreased CS Tickets by 25%, Increased Clarity and Accessibility by 60%, Optimized Page Loading by 60%
Skills: Research, Analysis, Interaction, Accessibility, Information Architecture, Visual Design
Pain Point:
The old code base support will be expiring soon. Also, the old code base was built by developers and not UX designers - so, a lot of the elements were NOT considered before placing them in the tabs. They were instead placed wherever it was easiest for the developer.
Objective:
To update an outdated codebase and propose any quick wins while cleaning up both the UI and the codebase.
Considerations
Every persona utilizes this feature daily and range from warehouse worker to dev ops, internal users, and customers.
We will not be addressing any net new components UNLESS the component is so broken there is no other path forward.
Some components may no longer be used by any persona type.
Examine how many of our users need this to be optimized for mobile, tablet or desktop.
Some of the information could be grouped in a more user-friendly pattern.
Strategy:
Interview users from every persona type to understand how they each use this feature.
Research DataDog to understand what device type and size is most popular and which - if at all - are not being used as much.
Usability test by categorizing components and information via card sorting.
Any enhanced feature components will be captured in a future sprint via backlog.
Collaborate with engineering to understand permission-based information and define which persona type will be able to view specific information.
Item Details
Shipping Details
History
Inventory Details
Inbound Details
Outbound Details
Type here to add a group
Street date (when an item - say an album - is dropping in December - you may go ahead and bulk up your inventory in the warehouse - then, schedule the date you want it to drop - and, we organize a way to make sure that as many albums get to their destination at the same time - whether in Japan or across the street)
Price
Category
Where to find discrepancies in inventory
Item is already in shippable container
Overall status of all inactive orders
Item is a bundle or part of a kitting set
Overall status of all active orders
Tariff Number
Label dimemsions and info.
Image of item
Replenishment Min
Replenishment Target
Item Case Dimensions
CSV download of all orders
Vendor
Dimensions
Category
SKU
Item Carton Dimensions
Serial Number
Threshold
Lot Control?
Lot Number
Connected Shops and their integration(s) - example Shopify Integration
Aged Inventory
Scancode
Has alcohol
Label Format and information
QTY backstock
QTY Available
Pause Orders for this item
Shipping Notice (ASN)
Origin Country
Weight
Hazmat
Hazmat
Is promo item
QTY coming in from Ship Notices - high level (ASNs)
Name of item
Wholesale Cost - as applicable
Rules for this item (ex. Only ship one of these items when ??)
Has battery
The image above shows the card sorting activity I used for usability testing. The top section contains all the categories with the ability to add new ones if the user can’t find the category they think should be there. The bottom section contains all the items which need to be placed into a category above. User must place ALL items into a category above.
Takeaways:
Our users did not like the categories and groupings the SME’s had proposed - seeking instead a MUCH more simple approach and grouped them with industry terminology instead of proposed scientifically correct categories
Users are more likely to work on a desktop over tablet or mobile.
There are a lot of things which were added in years past which are rarely or not used at all.
The majority of my interviewees had ideas on future features which can help make this flow more user-friendly.
Some things which were designed with one purpose were used for a completely different purpose - confusing solutions as a workaround for what they really need to happen.
There were unknown and unlogged bugs
Where Do We Go from Here?
Deep dive into categories like “History” in order to further document and understand how this is being used and what net new components can be added to make this more usable for our 5 persona types.
Continued monitoring of DataDog RUM sessions to make sure the new feature is well adapted - and document any quick wins.
Consider making the top global information an option to pin. So, a user can pin it to the top if they are actively using it and if they prefer more vertical space (since the majority of our users are on tablet) they can unpin it to see more of the screen.