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.
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.
To test this, we needed to
Enable mobile access to leads, quotations, vendor estimates, and contacts
Support mobile uploads for documents and KYC verification
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.
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
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.
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
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
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.
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.
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.
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.
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
“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.