CLIENT UX/UI Case Study
Londo
Enhancing the Admin Portal for Mobile
Londo is a mobility platform that brings rides, deliveries, accessibility services, and transportation management into one system. I worked on enhancing its existing admin portal for iPhone, turning desktop-heavy management workflows into a clearer mobile experience while staying consistent with Londo’s existing product and design system.
Project Type
Client Project
My Role
UX/UI Designer
Timeline
7 weeks
Tools
Figma
01
Overview / Challenge
The Challenge
Simplifying a complex, desktop-only software tool into a clean, mobile-responsive dashboard layout.
Londo’s admin portal was primarily designed around desktop workflows, using dense tables, persistent side navigation, and information-heavy screens to manage users, drivers, and bookings.
As the platform expanded to mobile, the challenge was not simply shrinking the desktop interface onto an iPhone. The same workflows needed to remain clear, usable, and easy to scan on a much smaller screen while still preserving the existing functionality and design system.
I focused on improving the mobile admin experience by restructuring dense information into clearer card-based layouts, simplifying navigation, and making key management actions easier to understand.
How can Londo’s existing admin workflows be adapted for iPhone without losing important information or making the interface feel overcrowded?
02
Understanding the Problem
Analyzing how fleet managers quickly audit data spreadsheets while working on the go.
Our team reviewed the existing Londo experience, mapped admin workflows, created personas and journey maps, and studied comparable mobility and accessibility platforms to understand where the current experience created friction.
“
I shouldn’t have to dig around to find out something is urgent.
03
Exploring the Experience
Mapping out a clear list-to-detail navigation path across a multi-user marketplace.
I started by mapping the admin workflow and reviewing how the existing desktop experience handled users, drivers, bookings, and urgent actions. Instead of immediately designing mobile screens, I worked through how these workflows could translate to iPhone without losing important information or creating overly dense layouts.
The main challenge was deciding what needed to stay visible in the list view and what could move into dedicated detail screens.
Key Iteration
Making active states easier to understand
One of the biggest issues I noticed was that navigation and filter controls relied too heavily on similar blue styles. When several controls looked active at once, it became harder to tell where you were or which filter was currently selected.
I simplified the mobile menu so only the current section receives the stronger active treatment, while inactive options remain neutral. I also redesigned the filter buttons with clearer selected and unselected states using fill, borders, text weight, and contrast rather than relying on color alone.
This made the interface easier to scan and addressed an accessibility concern identified during our research: interaction states should remain understandable without depending only on color.
Design System
Londo
Before filters
Before menu
After menu
After filters
04
Designing the Solution
Introducing interactive action workflows to speed up administrative dispatch tasks.
I focused the final admin experience around clearer hierarchy, faster scanning, and reusable patterns across users, drivers, and bookings. Instead of shrinking desktop tables onto a smaller screen, I reorganized information into mobile-friendly cards and dedicated detail views while keeping Londo’s existing functionality and design system consistent.
Screen Comparison
Users can be searched, filtered, and reviewed through a card-based layout designed for faster scanning on mobile.
Drivers follow the same reusable structure while surfacing status, vehicle information, ratings, and approval states.
Design Detail
Keep detailed driver information easy to scan
Rather than placing every piece of information into one dense card, I separated vehicle details, contact information, documents, performance metrics, and recent bookings into clear sections. This gives admins access to more detail without making the screen feel overloaded.
Bookings use the same list-to-detail structure, allowing admins to scan current activity first and open a dedicated view when they need more information about a specific booking.
Feature Highlight
Keeping management patterns consistent
The same search, filter, status, and card patterns are reused across the portal so admins do not have to relearn the interface every time they move between users, drivers, and bookings. Consistent interaction states also make the experience easier to understand on smaller screens.
User filters
Driver filters
Booking filters
05
Key Design Decisions
01
Tables vs. mobile cards
What I chose: Convert desktop user, driver, and booking tables into stacked cards for iPhone.
Why: Wide tables worked on desktop but became too dense on smaller screens. Cards made the information easier to scan and gave each item a clearer hierarchy.
Trade-off: Less information is visible at once, but the mobile experience becomes much easier to read and interact with.
02
Showing everything vs. list-to-detail
What I chose: Keep list screens lightweight and move secondary information into dedicated User, Driver, and Booking Detail screens.
Why: Trying to fit every field into one mobile card made the interface feel cramped and visually overwhelming.
Trade-off: Admins need one extra tap to see deeper information, but the main list views stay much cleaner.
03
Persistent navigation vs. mobile menu
What I chose: Replace the desktop sidebar with a hamburger menu on iPhone.
Why: A permanent sidebar would take up too much horizontal space on mobile.
Trade-off: Navigation takes one extra tap, but the main screen gets significantly more room for actual admin content.
06
Testing & Validation
Stakeholder Feedback & Iteration
Throughout the project, I reviewed the admin experience against the existing workflows and gathered stakeholder feedback on what needed to be more useful in day-to-day operations. One of the biggest changes came from feedback around the dashboard, where stakeholders wanted admins to be able to review delivery requests, see available drivers, and assign a driver directly. I used that feedback to refine the dashboard from a mostly informational overview into a more actionable management tool.
Feedback
Iteration
I replaced the less actionable system-status area with a delivery-request module and designed a review-and-assign workflow.
Before → After
Original dashboard
After — revised design
Updated dashboard with Delivery Requests
07
Outcome & Reflection
What I Learned
Responsive design is not just shrinking desktop screens. It required rethinking hierarchy, navigation, and how much information should appear at each level.
Stakeholder feedback
Feedback directly changed the dashboard from a mostly informational surface into a more actionable operations tool.
Next Steps
Test the mobile admin workflows with real operations users, validate the delivery-assignment flow, and refine accessibility states based on actual usage.