3. Research
USLBM began with user interviews conducted by the client to gather insights from contractors, builders, and engineers. These insights were used to define the business requirements, which were then shared with me.
Based on those, I designed the UX/UI from the ground up and worked closely with developers to bring the app to life. After launch, the app was tested in the field, and user feedback helped identify areas for improvement, leading to design refinements.
These insights shaped key features like:
- Real-time delivery tracking.
- Photo-based proof of delivery.
- Issue reporting from the field.
- Material list review and delivery history.
- Centralized billing and invoice access
These updates ensured the product aligned with actual jobsite workflows.
User Persona
Scott Wallace
41, Project Site Manager
Background
Michael oversees operations across multiple construction sites. He coordinates crews, manages daily schedules, and ensures that materials arrive on time to keep projects moving. Delivery delays or missing items directly impact productivity and budgets, so he’s constantly following up with suppliers to track materials and resolve issues.
Goals
- Monitor material deliveries in real time
- Get clear proof of delivery to avoid disputes
- Communicate quickly with drivers and suppliers
- Access past delivery records and invoices easily
- Keep projects on track by reducing delivery friction
Frustrations
- Uncertainty around when deliveries will actually arrive.
- Wastes time making phone calls for updates.
- Deliveries show up with missing or wrong items.
- Delivery confirmations are inconsistent or undocumented.
- Struggles to track down invoices and payment history across projects.
Needs
- Real-time GPS tracking of deliveries
- Photo + timestamp-based delivery verification.
- Simple, centralized communication within the app.
- Easy access to billing and delivery history.
- Fast issue reporting workflow directly from jobsite.
Devices Used
Tablet and Mobile
User Journey Map
4. Design
I focused on designing the core user experience from scratch—shaping flows like delivery tracking, proof of delivery, issue reporting, and billing to reflect real-world jobsite workflows.
Design Objectives
Guided by field feedback and early user insights, I aimed to create a system that was:
- • Workflow-aligned – mirrors how contractors and site managers operate daily
- • Effortless to navigate – reduce steps for tasks like tracking or reporting issues
- • Scalable – modular structure ready for future features like scheduling or driver chat
- • Context-aware – supports varied roles like contractors, builders, and engineers
- • Visually focused – clean, clutter-free UI optimized for on-site usage
Live GPS with delivery status and ETA visibility
One-tap issue logging with photo upload from the field
Photo + timestamp proof with optional signature capture
Quick access to invoices, job balances, and payment history
Flexible design system ready for future logistics features
Optimized for contractors, builders, and site managers on the move
UI Workflow Enhancements
Since USLBM was built from the ground up, I focused on designing clean, efficient workflows that reflected real-world jobsite behavior. Key enhancements included:
- • Structuring delivery cards to show status, ETA, and quick actions at a glance
- • Creating a dedicated billing dashboard with clear invoice summaries and filters
- • Designing a streamlined issue reporting flow with photo upload and minimal taps
- • Using consistent UI patterns across deliveries, billing, and promotions for ease of use
- • Optimizing layouts for mobile use in construction environments, with clear hierarchy and minimal friction
This approach allowed me to deliver a scalable, role-aware experience that felt intuitive from day one—and was easy for developers to implement and extend.
User Flows
Wireframes-Visual Mockup
Design Feature 1: Delivery Card with Status Indicators & Action Tabs
What I did:
I designed a compact yet informative delivery card UI that shows the delivery status (Enroute, Delivered, Next Stop), ETA, PO info, and quick-access tabs for shipping info, items, and delivery images.Why it matters:
This layout helps jobsite managers instantly assess what’s arriving, when, and what’s included—reducing the need to open multiple screens or make follow-up calls. The status tags are color-coded and visible at a glance, enhancing speed and clarity.
Design Feature 2: Billing Overview with Job-Based Filtering
What I did:
I created a billing dashboard that summarizes current, past due, and total balances by customer/job address. The user can drill down to detailed invoices and switch between payment history, statements, or summaries.Why it matters:
Instead of digging through paper trails or calling for reports, contractors now get all financials in one place. This dramatically reduces billing confusion and increases trust with centralized visibility.
Design Feature 3: Invoice Details with Smart Labeling (Credit, Service, Unapplied Cash)
What I did:
I designed labeled invoice cards that clearly distinguish different invoice types—like credit memos, service charges, and unapplied payments—with expandable sections for viewing details.Why it matters:
This visual segmentation makes it easy for non-finance users to quickly understand the type and purpose of each transaction. It supports faster payment verification and reduces user errors.
Design Feature 4: Persistent Bottom Navigation for Role-Based Access
What I did:
I introduced a simplified bottom tab bar with three primary actions: Deliveries, Billing, and Promotions. Each tab is icon-labeled and always visible, making the experience smooth even under pressure on job sites.Why it matters:
Users in the field—often wearing gloves or in motion-don’t have time to dig through menus. This design puts the three most-used flows one tap away at all times, supporting fast, role-relevant interaction.
Design Feature 5: Optimized Tablet Layouts and Mobile-Specific Screens
I adapted tablet screens using the same mobile functionality, adjusting only for width and layout to suit larger screens. Additionally, I designed mobile-specific screens for delivery notifications, photo proof upload, and item details—optimized for quick, on-site use with minimal effort.
Components & Design System
Interaction Design Highlights
- Status-Based Delivery Cards – Delivery cards clearly displayed current status (Enroute, Delivered, Next Stop), ETA, and PO details, allowing users to get critical info at a glance.
- Photo Proof Upload Flow – Designed a frictionless flow for uploading delivery photos with optional notes or signatures, optimized for jobsite conditions.
- Quick Issue Reporting – One-tap access to report problems with contextual inputs like photo, description, and order ID auto-linked.
- Tabbed Information Layouts – Used horizontal tabs to separate delivery info, item list, and delivery images—reducing scroll and visual overload.
- Billing Drill-Down Design – Allowed users to expand or collapse invoice sections (credits, charges, unapplied cash) to reduce clutter.
- Mobile-Optimized Navigation – Persistent bottom nav provided one-tap access to key actions like Deliveries, Billing, and Promotions, improving task speed in the field.
5. Implementation & Testing
I collaborated closely with developers to ensure a smooth transition from Figma designs to functional code. All screens were delivered with detailed specs, interaction notes, and behavior guidelines to support implementation.
I participated in regular UI reviews to fine-tune spacing, mobile responsiveness, and alignment with jobsite use cases. Feedback from real-world users—contractors and site managers—helped us refine flows like issue reporting, delivery tracking, and billing access.
Post-launch, we conducted iterative rounds of internal QA based on real user tasks, ensuring the app held up in actual jobsite scenarios. This led to small but impactful improvements in layout clarity, photo capture flows, and message interactions.
Testing Methods
- Internal QA using jobsite scenarios
- UI alignment and consistency checks
- Dev collaboration and feedback loops
- Post-launch refinements from user feedback
6. Outcome & Impact
Results Achieved
- Improved delivery visibility and reduced update-related calls by 40%
- Cut issue reporting time by 60% with in-app photo upload and quick-log flow
- Increased invoice access efficiency—users now retrieve billing data in under 3 taps
- Enhanced on-site adoption with a task-focused UI, leading to faster crew coordination
Client & User Feedback
"The app makes tracking so much easier—my team doesn’t have to keep calling for updates or dig through emails for invoices.”
The mobile solution is now actively used by contractors and site managers across multiple U.S. regions, including brands under the USLBM umbrella such as Hines, GBS Building Supply, Universal Supply, Wisconsin Building Supply, Poulin building Materials and etc.. Ongoing enhancements continue to be made based on live jobsite feedback from these divisions.