shippabo platform
2021 - present
How my design team and I increased engagement by 2X and decreased task completion time by 46% by creating a new digital platform for global freight logistics.
I was brought on board to help Shippabo pivot from a freight forwarder to a software company offering freight services that focusses on a new digital platform to empower both our internal operations as well as the clients we serve.
The legacy product required a lot of manual processes, manual data entry, and cross-referencing different emails and communications between enterprise tools to be effective. My team was tasked to bring those tools into one unified view.
High-level demo showing MVP features that were shipped on June, 2023.
user metrics Last12 months
my role: ux director
As a player/coach, I am heavily involved in the day-to-day design for my own projects, offering design direction/critiques to my team of two designers, as well as crafting our UX design strategy. My direct and major design feature responsibilities included shipment detail pages, new and tracked shipment creation, internal pricing tool, as well as assisting our marketing partner with a redesigned marketing site, ads and sales collateral.
As a coach, it’s important to foster trust, care and understanding with my team. I mentor my team day to day and we collaborate on new design processes and best practices. We also hold biweekly 1:1s so that I can offer support in their current role as well as help them grow in their career ambitions. I work closely with our engineering team of 12 as well as senior leadership to help define the design strategy, initiatives, and roadmap that looks ahead 6 to 12 months.
design goals
Gain an understanding of our users through user research and persona building
Create a cohesive design language for the updated platform
Create and document a new design system for components (Atomic)
Collaborate and implement design processes, operations and rituals
Update several existing features to solve for pain points while also providing an updated and more efficient experience (MVP)
Plan, test, and rank new feature ideas based on user research and feedback
business goals
Shift from being a freight forwarding business to a SaaS driven business
Increase platform engagement through added value and improved experience
Increase conversions by offering a number of service tiers
Diversify revenue streams by adding software services
Increase efficiency (internal and external users) through task, data and shipment management as well as reduce manual processes and maintenance
process
To kick off our understanding of the world of global logistics, I conducted several user interviews who were active in the legacy product to gain an understanding of their ecosystem, needs, pain points, and where they found the most value. This led to the creation of our first persona: Logistics Manager. This data served as our foundation as we identified the MVP for our new platform. The product and design team spent 3 days together identifying and creating loose concepts for our MVP and beyond. We then took that information and aligned our roadmap along with initiatives like the creation of our design system.
Our team UX design process for feature work always starts with a form of discovery. Whether that discovery is existing research data, speaking with internal subject matter experts, or conducting our own research, it is entirely based on the feature spec and what is needed on a project basis.
Above: persona snapshot with selected insights
In addition to the initial user research that yielded our first personas, I also conducted a comprehensive design competitive analysis of the products for 5 major leading competitors in the freight forwarder space. That analysis yielded 3 design themes we felt our competitors struggled with as well as ideas we liked that we wanted to bring into our new platform.
Above: MVP actionable insights based on competition.
The final step in our discovery of a new logistics platform MVP, the team met in person for 2 days. The first day was to discuss possible features that should/could be included based on our findings.
The second day consisted of feature prioritization, which features must be in the MVP, followed by possible MVP features, and finally, features that would provide a lot of value but that we felt were not a part of the definition of a Minimum Viable Product.
The following site map below includes the original MVP features that we identified, as well as our Beta and General releases that followed.
MVP Feature Release outline
Dashboard
Shipments+Containers
Insights
Finance
Beta and General Feature Release outline
Create Shipment
Communications
Platform Controls
The site map is a collection of features made possible through the effort of myself and my team of 2 designers.
design team product metrics
a new design system
In order to move from a legacy system to an entirely new design language, we had to consider a new approach to our design system through Atomic Design. For the uninitiated, Atomic Design is a way to organize components from smallest building blocks (atoms) to the largest groups that form major components (organisms). For our purposes, we utilize atoms, molecules and organisms from the Atomic Design framework. We decided to name our new design system and user interface NUI (like GUI, get it). Sometimes the best solution is right in front of your face.
A big driver for adopting Atomic for our design system was that both design and engineer teams were familiar with Atomic, leading to a great collaborated effort between design and engineering when designing these new components.
The example shown breaks down the Shippabo main navigation by atoms, molecules and organisms.
documentation
Component documentation is a never ending process, am I right? Our living documentation keeps us unified and consistent in our designs across designers as well as engineers, which is crucial for scaling teams.
The examples shown display how our team documents components as well as page layouts with explanations to each component area, the usage of each and the do’s and don’ts.
design features
Up until this point, we’ve seen a lot of discovery process, user research, MVP feature prioritization, and design system. Now let’s get into the feature work for which I was personally responsible while my team worked in parallel on their own design features. I always want to contribute to the overall success of my team and I absolutely love being able to be both a player and a coach.
shipment detail
The first major feature we are discussing is the Shipment Detail. This feature is where our clients spend most of their time every day, followed by the Shipment List showing all shipments.
process
At this time, we had a good understanding of our core users so in lieu of starting with user research, I started with mapping out the structure of the Shipment Detail. This IA has since evolved over the course of working through business requirements and user feedback. It’s important to have a blueprint for such a major feature to make sure you are designing comprehensively through possible co-dependencies.
We all love an illegible info architecture picture, right? Explore info architecture Figma for Shipment Detail here.
Once I had the IA mapped with the help of our internal operations team, I moved onto UI inspo exploration followed by several iterations of wireframe concepts to quickly get in front of stakeholders to discuss what is working, and what is not working, both from a UX standpoint as well as workflow that our users have as a mental model.
The gallery below is a selection of wireframes and mid-fidelity designs from this exploration.
After receiving feedback from both internal stakeholders as well as validating these wireframes with 3 different clients, I kept pushing the visual design language forward while adding additional functionality to this screen to provide more value to our users.
The gallery below is a selection of mid to high-fidelity designs based on user and stakeholder feedback.
mvp execution highlights
The final design of the Shipment Detail feature launched with distinctive value-adds for our users, whether their shipment is Visibility (clients manage their own shipments) and Managed (Shippabo manages clients shipments).
We will also discuss the Shipment Booking feature.
shipment timeline
Shippabo’s powerful timeline utilizes risk levels at each port/terminal stop to final delivery of goods. Blue indicates smooth sailing (punny), yellow indicates an elevated risk, whether slight congestions or closed terminals at each port, and finally, red indicates a high chance of delay of shipment. Providing users this insight once a shipment is booked allows users to explore different carrier options as well as different beginning and end port stops (often referred to as Lanes).
We use Shippabo AI (patent pending) to provide additional insight as to when Shippabo is predicting each port’s arrival or departure, which may differ from the Carrier’s original date inputed depending on current risk. Because of this, users are aware of possible delays well in advance to allow them time to mitigate that risk.
In addition, both the current mode of transportation and all stops are interactive. Users are able to gain another layer of insight, including where their goods are, which carrier has what goods, and when they can expect the goods. This is especially valuable when shipments with multiple containers are split up across different modes of transport and possible partners carrying their goods.
shipment detail overview
Below the timeline, users see valuable high-level information concerning thier shipment. The top row highlights their Estimated Delivery, the ability to enhance Shippabo’s prediction model (in the even Shippabo is NOT managing the shipment), the services that the client has requested, and finally, AI-powered snapshot of the status of the shipment, the health score and any possible issues that Shippabo has identified.
The remaining components are both action-oriented as well as making sure users stay up-to-date on all recent activities, whether made by the Shippabo team, the client’s team, or the partners in their supply chain. This is the source of truth.
operations metrics Last12 months
*update*
shipment detail V2
After the initial MVP, beta and general release, we received a lot of good feedback from users for the shipment detail. What we heard most was the desire for density and the ability to view more of their shipment info and documents as well as the ability to take actions from this page.
I am currently exploring a new layout and components which includes a vertical timeline that allows additional information to be displayed for each timeline stop by default. We decided to reduce hierarchy of the map as the data density was more valuable to our users.
Finally, we see a reworked ‘dashboard’ experience that breaks out all shipment documentation and data across respective tabs, making it easy for user to quickly toggle views to increase workflow efficiency.
shipment booking
The 2nd major feature I was responsible for launching in the MVP and general releases are the 4 unique ways we allow users to book a new shipment or track an existing shipment. Booking and Tracking Shipments are both incredibly crucial for business health, making it imperative that we were able to capture and represent all requirements to provide additional value to our users and clients.
process
The legacy platform offered 1 way to book a shipment (Flow 1: Spot Rate) which served as a great foundation for our team. I began by working with internal stakeholders and our Director of Product to ID and remove all fields that weren’t required to book a shipment. Of course, it’s better to get more information up front, but for our users, they needed a more efficient and quicker way to book shipments.
The 2nd main flow (Flow 2: Rate Sheet) came directly from clients. We offered established rates to our clients through manual excel files and emailing back and forth to get a shipment booked. We digitized that entire flow and centralized it on the platform.
The final flow came due to being at the mercy of the global shipping industry. Often times, clients need to plan shipments months in advance. Typically, future shipments often don’t have available rates nor sailing schedules from the carriers. Now, our clients can still plan for future shipments without worrying about securing capacity on a vessel.
Once again, I’m not going to leave you hanging looking at illegible flow charts. Explore the different booking flows here.
The gallery below is a selection of wireframes and mid-fidelity designs based on the above flow charts.
After working with engineering on the feasibility of the proposed solution and breakdown, as well as receiving feedback from both internal stakeholders and product management on missing requirements, I kept pushing the visual design while adding additional functionality to this feature to provide additional value to our internal users who needed a way to manage these rate sheets per client.
The gallery below is a selection of mid to high-fidelity designs based on stakeholder and PM feedback.
MVP + General release execution highlights
The final design of the Shipment Booking project came in several phases. The 1st major flow that was optimized from our legacy product launched with our MVP, whereas the 2nd flow for Rate Sheets were more complex in execution. Ultimately, we saw a direct impact on the amount of bookings we were receiving as well as an increase in revenue.
The following highlights touch on these complexities as well as 12-month revenue metrics.
freight menus
The final freight menu poppers are new components introduced to increase workflow by giving users a succinct way to input their mode of transportation, their cargo needing shipped, and finally, whether or not they need full containers (FCL) of space or a subset of space in a shared container (LCL).
I worked with internal stakeholders to make sure we had captured everything we need to process a shipment in a small, easy-to-navigate drop down.
shipment requests
The Shipment Requests is a widget that appears on the booking page by default but can also be added to user dashboards. From here, users have a view off all requests with high-level request information, including the current status of the request. From here, users can cancel requests, view/accept/reject quotes, and navigate to individual shipment detail pages.
rate sheet
The Rate Sheet form intake is another new component for clients. Users choose 1 or multiple port pairing IDs (ie: Lane) to get started. From there, users have a full view of the lane rate information, including cost and average transit times. Users only need to input dates when their cargo will be ready for pickup, and identify the type and quantity of containers for each lane before submitting their request. We also allow users to request new lanes to be added to their recurring rate sheet. Using Rate Sheet is the fastest and most efficient way to get a shipment booked.
quote detail
In addition to the 3 flows to request a shipment booking, I took this opportunity to redesign our current Quote page inside Shipment Detail. Before, users could only see the individual line items and a total for their quote. Now, users can request multiple quotes to easily compare. They also have more details as to the shipment specification and the products attached to this quote. Lastly, users have full visibility into their sailing schedule to fully understand the proposed quote in front of them.
quote feedback
I know what you’re thinking. “These are just modals.” You are not wrong. The real value here for our clients as well as our internal team, is to give users ample ability to give us feedback on their proposed quote, which is a new addition. Users can reject a quote, request a change in their quote, and lastly, request a sailing route change by port. By empowering our users to directly give us quote feedback, we gain a better understanding of our clients, their preferences, as well as how to improve the quotes the clients receive. DATA!
ROI metrics Last 12 months
Looking ahead
We are currently working through several new features not yet released, including automating quote services by company, client and role, the updated Shipment Detail layout and content (teased above) and lastly, ingesting and automating shipping documents for our clients and internal operations team. Our main focus remains on removing friction for our users and increase workflow efficiency to make Shippabo the easiest platform in shipping. If you’re interested, I would love to walk you through my thinking and the current progress of all 3 of these features inside Figma.
Takaway
Memorable Moment
The most memorable moment for me was during usability tests during the Shipment Detail. Clients absolutely loved the wave timeline that represented risk. It was very intuitive for them to know which areas might cause problems for their shipment delivery dates if left unchecked. It was certainly the a-ha moment that we were on the right track.
what i learned
The world of logistics is chaos. There is no standard operating procedure. You must be flexible and able to adapt quickly to solve for complex processes. As best as we try, we are still at the mercy of the market and the antiquated ways of doing business in global logistics. We continue our aim to change that.
what didn’t go as planned
One of the main business goals of the Shippabo Platform was to pivot away from being a freight forwarder to a software company that offers a SaaS framework. As much as we tried to incentivize users, we discovered that they’re happy to pay a premium for a white-glove service for their shipments that someone else manages vs doing it themselves.
Thanks for your time! Keep the good times rolling below.