Lanes
Services
- UX & UI Design
- Prototypes
- Design System
Team
- Ryan Pinkney (Founder)
Platform
Mobile App
The Brief
Lanes is a logistics platform connecting truck drivers with freight brokers—think Uber but for truckers picking up loads. I worked with the founder to develop a design concept that would improve the overall user experience and modernize the brand. My goal was to redesign the experience with UX principles in mind, propose a new brand identity, and deliver a concept that felt polished and production-ready.
From Search Lists to Interactive Map
In the original design, overly specific filters often left users staring at zero results. We solved this by combining search and available loads into an interactive map, where users can browse all nearby loads first, then filter with full visibility into what's actually available.
Before
After
Clearer Completed Loads
The previous design used iconography without labels, forcing users to guess what each state meant. Clickable items also lacked proper affordance. I added explicit state labels to reduce cognitive load, included origin details for context, and redesigned interactive elements with clear visual cues.
Before
After
Helpful Empty States
We designed empty states to guide users with clear information and a strong call to action—turning potential friction into opportunity.
Before
After
Brand Guidelines
Lanes Brand System
Logo
Wordmark
App Icon
Color Palette
A bold primary blue anchors the brand. Secondary colors provide flexibility for status indicators and UI accents. Neutrals keep the interface clean and legible.
Primary
#124FDC
Blue
Secondary
#C3E7BD
Green Light
#005F0F
Green
#D0DCF8
Blue Light
#0C3084
Navy
#FFEFE6
Yellow Light
#FFC702
Yellow
#7A5F00
Olive
Neutrals
#001C1F
Dark
#788096
Grey
#C7CDDB
Grey Light
#FFFFFF
White
Typography
Figtree is the primary typeface — modern, clean, and highly legible at all sizes. It keeps the interface feeling approachable without sacrificing professionalism.
Buttons
Three button styles used across the app: filled for primary actions, outlined for secondary actions, and a toggle for switching between states.
Icons
This project uses Feather Icons, an open-source icon library that matches the clean, minimal feel of the Lanes brand.
This project uses Feather Icons, an open-source icon library that matches the clean, minimal feel of the Lanes brand.
View the full library →Next Project
TripFlex
Website and Mobile Design