Designing a CRM Mobile App for Freight Forwarders

Designing a CRM Mobile App for Freight Forwarders

Designing a CRM Mobile App for Freight Forwarders

Role

Role

Sole Product Designer & Researcher

Sole Product Designer & Researcher

TIMELINE

TIMELINE

3 Months

3 Months

Tool

Tool

Figma

Figma

Team

Team

Designer + 2 Mobile App Developers and QA Team

Designer + 2 Mobile App Developers and QA Team

Note:

This project is protected under an NDA, so no original information has been used in the mockup screens. I’m only able to share selected screens that have been approved by Avow Solutions. Additionally, due to company policy, the product name and competitor names are not disclosed in this case study.

Project Summary

In mid-2022, I led the end-to-end UX design of a mobile CRM application tailored specifically for freight forwarding agents. The existing desktop CRM served core functions like lead and quote tracking but lacked mobile accessibility an essential requirement for freight agents handling vendor estimates, documentation, and client coordination.

This case study outlines how I designed and delivered a mobile-first CRM experience from the ground up. The result was a lightweight, centralized, and intuitive platform that enabled freight forwarders to access critical tools quotations, KYC, lead status, vendor estimates, and contact records without relying on desktop systems.

In mid-2022, I led the end-to-end UX design of a mobile CRM application tailored specifically for freight forwarding agents. The existing desktop CRM served core functions like lead and quote tracking but lacked mobile accessibility an essential requirement for freight agents handling vendor estimates, documentation, and client coordination.

This case study outlines how I designed and delivered a mobile-first CRM experience from the ground up. The result was a lightweight, centralized, and intuitive platform that enabled freight forwarders to access critical tools quotations, KYC, lead status, vendor estimates, and contact records without relying on desktop systems.

Hypothesis

If freight forwarding agents can manage CRM tasks through a dedicated mobile app, they will reduce dependency on desktops, shorten approval times, and improve lead follow-up consistency.

If freight forwarding agents can manage CRM tasks through a dedicated mobile app, they will reduce dependency on desktops, shorten approval times, and improve lead follow-up consistency.

To test this, we needed to
To test this, we needed to

Enable mobile access to leads, quotations, vendor estimates, and contacts

Enable mobile access to leads, quotations, vendor estimates, and contacts

Support mobile uploads for documents and KYC verification

Support mobile uploads for documents and KYC verification

Provide notifications for lead statuses like “Requested” or “Follow-Up”

Provide notifications for lead statuses like “Requested” or “Follow-Up”

Context & Background

Freight forwarders operate as intermediaries between shippers and consignees. Their job is complex, involving logistics coordination, vendor management, documentation, and real-time pricing. Most work from offices but frequently attend conferences, meet with carriers or agents, and grow their business network.

Freight forwarders operate as intermediaries between shippers and consignees. Their job is complex, involving logistics coordination, vendor management, documentation, and real-time pricing. Most work from offices but frequently attend conferences, meet with carriers or agents, and grow their business network.

While the desktop CRM offered standard workflows, it fell short in mobility. Freight agents needed:

While the desktop CRM offered standard workflows, it fell short in mobility. Freight agents needed:

  • A way to store contacts met at events or client visits

  • A tool to approve and share quotations quickly

  • Access to vendor estimates and pricing approvals on the go

  • The ability to upload documents and handle KYC compliance remotely

  • Notifications for deal stage transitions and follow-ups

  • A way to store contacts met at events or client visits

  • A tool to approve and share quotations quickly

  • Access to vendor estimates and pricing approvals on the go

  • The ability to upload documents and handle KYC compliance remotely

  • Notifications for deal stage transitions and follow-ups

The Problem

The CRM was designed for desktops. Freight agents had no mobile-friendly access to perform essential tasks like quoting, approvals, document uploads, or follow-ups.

  • Quotation approval and sharing required desktop access

  • Vendor estimates had to be checked from email threads or desktop folders

  • KYC uploads weren’t possible from mobile

  • Agents couldn’t track deal stages or receive follow-up reminders

  • Contacts met at events were stored in personal notes or WhatsApp

User Research

We interviewed 5 users across sales and operations, and also studied feedback patterns from competing CRM products in logistics.

We interviewed 5 users across sales and operations, and also studied feedback patterns from competing CRM products in logistics.

User Responses: Raw qualitative data-CRM Mobile App

User Responses: Raw qualitative data-CRM Mobile App

Insights

This helped me identify what features were industry standard, what gaps existed, and what could give us an edge. In parallel, I had conversations with stakeholders to understand:

  • Which CRM features were must-haves on mobile

  • Where users were dropping off or complaining in the web version

  • What internal limitations we had with development

This helped me identify what features were industry standard, what gaps existed, and what could give us an edge. In parallel, I had conversations with stakeholders to understand:

  • Which CRM features were must-haves on mobile

  • Where users were dropping off or complaining in the web version

  • What internal limitations we had with development

Competitor Analysis

Since this was a B2B product, I couldn’t just download competitor apps and test them, as most required login credentials and weren’t publicly accessible. However, I still conducted a feature-level analysis of similar CRM tools based on:

  • App Store descriptions and screenshots

  • Documentation, demo videos, marketing sites

  • User reviews and customer feedback posts

Since this was a B2B product, I couldn’t just download competitor apps and test them, as most required login credentials and weren’t publicly accessible. However, I still conducted a feature-level analysis of similar CRM tools based on:

  • App Store descriptions and screenshots

  • Documentation, demo videos, marketing sites

  • User reviews and customer feedback posts

This helped me identify what features were industry standard, what gaps existed, and what could give us an edge. In parallel, I had conversations with stakeholders to understand:

  • Which CRM features were must-haves on mobile

  • Where users were dropping off or complaining in the web version

  • What internal limitations we had with development

This helped me identify what features were industry standard, what gaps existed, and what could give us an edge. In parallel, I had conversations with stakeholders to understand:

  • Which CRM features were must-haves on mobile

  • Where users were dropping off or complaining in the web version

  • What internal limitations we had with development

Building the Design System

To keep things scalable and consistent, I built the design system using the Atomic Design Methodology organizing everything into atoms, molecules, organisms, templates, and pages.

This structured approach helped in more ways than one:

  • It ensured visual consistency across screens

  • Made components reusable and easier to maintain

  • Helped the developer implement faster with clearly defined UI patterns

From typography and color tokens (atoms) to cards, inputs, and lead modules (organisms), everything was designed with reusability in mind. The system also made it easy to extend the design later, whether for new features or other platforms.

Designing the Interface

Once I had a strong understanding of what users needed most on mobile, I moved into interface design.

I focused on creating a minimal, intuitive UI with just the essentials:

  • A clean dashboard with KPIs and reminders

  • Lead profiles with editable stages and notes

  • Simple flows for quotations, follow-ups, and document uploads

I prioritized clarity, tap-friendly spacing, and visual hierarchy knowing that users might be using the app while walking or driving between locations.

A Hard Lesson on Responsive Design

I originally designed the app at 430px width (iPhone Pro Max). It looked perfect on iPhones, but once built, the fonts appeared too large on other devices. Confused, I consulted the mobile dev team. After some research, they explained:
“Mobile UIs are responsive — and text sizes adjust based on system settings.”

That led me to explore best practices, and I learned that 360×800 is a widely accepted base size, especially for Android. Many designers in the community recommend designing at 360–375px to ensure broad compatibility across devices.

I originally designed the app at 430px width (iPhone Pro Max). It looked perfect on iPhones, but once built, the fonts appeared too large on other devices. Confused, I consulted the mobile dev team. After some research, they explained:
“Mobile UIs are responsive — and text sizes adjust based on system settings.”

That led me to explore best practices, and I learned that 360×800 is a widely accepted base size, especially for Android. Many designers in the community recommend designing at 360–375px to ensure broad compatibility across devices.

That mistake became one of my most valuable lessons. Always think in breakpoints, not fixed screens.

That mistake became one of my most valuable lessons. Always think in breakpoints, not fixed screens.

Iteration & Feedback

As the UI came together, I ran internal A/B tests and design reviews with stakeholders. We iterated on details like:

  • Layout clarity

  • Flow simplicity

  • CTA placement and button hierarchy

Every iteration aimed to reduce friction — so the experience felt fluid even with complex tasks like quotations or document uploads. The final design was a balance of business needs and mobile usability.

As the UI came together, I ran internal A/B tests and design reviews with stakeholders. We iterated on details like:

  • Layout clarity

  • Flow simplicity

  • CTA placement and button hierarchy

Every iteration aimed to reduce friction — so the experience felt fluid even with complex tasks like quotations or document uploads. The final design was a balance of business needs and mobile usability.

My Workflow: Developer-Friendly & Organized

To streamline development, I designed with a 4-point grid system and built fully responsive layouts using auto-layout and constraints. All components followed a consistent structure, making the UI scalable and easy to implement.

To streamline development, I designed with a 4-point grid system and built fully responsive layouts using auto-layout and constraints. All components followed a consistent structure, making the UI scalable and easy to implement.

Inside Figma, I kept the workspace organized by sections — grouping related screens like Dashboard, Leads, and Quotations together. This made handoff smoother, minimized confusion, and helped maintain clarity as the product evolved.

Inside Figma, I kept the workspace organized by sections — grouping related screens like Dashboard, Leads, and Quotations together. This made handoff smoother, minimized confusion, and helped maintain clarity as the product evolved.

AfterBefore
Final DesignDeveloper handover
AfterBefore
Final DesignDeveloper handover

Results & Impact

Post-launch, within 2 weeks of internal rollout:
76% adoption rate among users
80% of users reported their core needs were met
85% user satisfaction rate
Consistently positive feedback from customers

The app was successfully launched across both Android and iOS platforms.

“It’s fast, clean, and I can finally update leads without opening my laptop.”

“It’s fast, clean, and I can finally update leads without opening my laptop.”

Credits

Mobile Developers: Kumaran Karunakaran and Kathiresan S

QA Engineer: Kishore

Thanks to the stakeholders for continuous feedback

My Learnings

Designing for real devices matters.

Early in the project, I learned that designing at 430px without accounting for device settings caused unexpected font scaling issues. Since then, I always start with the right breakpoints and test on real devices early.

Developer collaboration isn't just about handoff. it's about empathy.

I structured my Figma files for clarity, used constraints and grids. This reduced confusion and made implementation smoother, especially in a resource-constrained setup.

Owning both research and design solo builds confidence fast.

Doing this end-to-end from competitor research to UI system to final handoff, taught me how to be self-reliant, ask better questions, and design with both product and people in mind.

Credits

This project was designed as part of my role at Avow Solutions Inc and all rights to the product belong to them. This portfolio entry showcases my design contributions, including UI/UX design, design system development, and prototyping.