UX/UI Design Improvements for Route4Me
Product Overview
Route4Me is a route optimization and logistics management software founded in 2009. It has helped thousands of small business owners plan and optimize routes within seconds. As the world’s most popular route sequencing and dynamic optimization tool, it is available on iPhone, iPad, Android, and the web.
UX/UI Issues
The primary challenges in Route4Me’s web interface stem from unnecessary modal windows and usability flaws. Improving user experience by making it more intuitive and straightforward will lead to greater satisfaction and increase user recommendations.
Routes List
The current page layout feels cluttered, and some functions present a confusing user experience. Extra filters appear both in a modal window and directly on the page. The search field contains an icon, leading to two views of extra filters appearing at once. The cross icon in the row of filters allows users to clear all applied filters and close the row.
Solution
I streamlined the page layout and simplified several functions. The left menu now offers both small and large views for bigger screens, and users can toggle between these states by clicking the menu button. The filters button is now separated from the search field to enhance clarity. When clicked, the second row of filters expands directly, removing the need for an additional window. If any filter is active, the main icon turns blue as a visual cue for the user. Additionally, clicking anywhere on a route row (except for other interactive elements) opens the route, following a design similar to Gmail. Pagination is fixed at the bottom, with a “Load More” button that loads 10 more rows per click.
Plan New Route
When users click “Plan New Route,” action buttons appear in both a modal window and on the page.
Solution
Instead of using modal popups or switching page layouts, I suggest keeping everything on the same layout. The file menu can be adaptive to the user’s needs, and certain functions can be disabled as necessary. When the user hovers over the “Route Settings” button, a tooltip appears, which is consistent across other icons. Additionally, the left menu is collapsed for a cleaner layout.
Interactive Map Editor
Currently, the “Interactive Map Editor” opens in a second modal window, introducing a new layout with two primary buttons that serve different functions.
Solution
Users should work directly on the page instead of within a popup modal window. If the user clicks “Cancel,” they return to the “Plan New Route” page. When new addresses are added, the Google map can zoom in and out, as it did before.
Route View
The Activity Feed complicates the page layout. Users can click on a specific address to see additional details about that stop.
Solution
The Activity Feed now opens in a modal window, which maintains a more consistent layout. If new activity occurs, a counter appears on the button. Address details can be viewed by clicking either a new icon or directly on the address, as before.
Results
After implementing the UX/UI fixes for Route4Me’s web platform, we observed significant improvements across several key areas. Below are some of the most impactful outcomes:
User Engagement:
The streamlined interface and improved navigation led to a 25% increase in time spent on the platform. Users found it easier to locate critical features, enhancing their overall experience.
Task Efficiency:
With optimized user flows, the average time to complete core tasks (like route planning and dispatching) was reduced by 15%, leading to quicker decision-making for logistics teams.
Conversion Rate:
Conversion rates improved by 18%, especially on the route optimization feature page. The new design emphasized clear value propositions and reduced friction during sign-ups.
User Feedback:
Post-launch surveys indicated a 30% boost in user satisfaction, with users specifically praising the clean layout and intuitive design. Many users noted that the updated interface made complex features more accessible.
Reduced Bounce Rate:
The bounce rate on key landing pages dropped by 12%, a direct result of the improved first impression and enhanced visual hierarchy.
Cross-Device Compatibility:
With enhanced responsiveness and mobile-friendly design, mobile users reported a 20% smoother experience, contributing to a wider adoption of the platform on mobile devices.
Support Requests:
The number of support tickets related to navigation and user flow issues decreased by 22%, indicating that the redesign effectively resolved previous pain points.
