COLAB27 - Web App

SmartRoute

SmartRoute is a webapp designed to provide users with optimized routes for navigating through multiple stops efficiently.

Product Discovery

SmartRoute is a cutting-edge solution designed to streamline navigation experiences. It serves as a navigation platform that allows users to receive the most optimized routes for their multi-stop journeys. Users can effortlessly input multiple destinations for their daily commutes and receive highly accurate and efficient routes, factoring in variables like distance, traffic congestion, and road closures. SmartRoute works as a navigation web app itself but can also be seamlessly embedded into different navigation apps such as Google Maps, enhancing their functionality and providing users with enhanced route optimization capabilities.

Background

When was the last time you traveled to multiple destinations without utilizing a navigation app? Over 90% of individuals in the United States under the age of 50 frequently utilize GPS applications (Miszewski). Mapping, and navigation apps have become essential for daily commuters, delivery drivers, and other individuals navigating through unfamiliar places. 

In 2022, the navigation app sector had a revenue of $16.2 billion, and it is forecasted to generate $36.6 billion in 2028, growing at a rate of 14.8 percent (Wylie). This growth underscores the growing demand for navigation apps, fueled by technological advancements and the increasingly hectic pace of modern life. As people rely more on these tools to manage their schedules, the demand for navigation apps is expected to continue rising, driving the need for additional features to improve user experience.

There are several navigation apps available that guide users from point A to point B. Some of the top used apps include Google Maps, Apple Maps, Waze, etc., with Google Maps being the most downloaded map and navigation app in the United States in 2023 (Ceci). Google maps has the highest number of average users with 1.8 billion monthly (Wylie). This is due to it being pre installed on android devices, efficient point A-to-point B route planning, and regularly updated street and photo data. 

However, Google Maps has its downsides. If you're planning a route with multiple stops, Google Maps will find the best route from one point to another, but it won't optimize the entire route (Miszewski). 

The route optimization software market has experienced significant growth, particularly among logistics companies and other businesses facing challenges related to multiple stop deliveries. These challenges stem from the profound impact of traffic congestion in the US on logistics operations, resulting in heightened operational expenses and disruptions to just-in-time business models. Studies reveal that the average American driver idles for over 16 minutes daily, leading to the wastage of 3.8 million gallons of petrol and approximately USD 7,980,000 each day. Moreover, Americans spend an average of 41 hours annually stuck in traffic during peak commute times, amounting to USD 305 billion in costs in 2017 (“Route Optimization Software Market Size”).

Simultaneously, e-commerce businesses are under pressure to meet customer demands for next-day delivery while maintaining delivery accuracy. However, challenges such as late deliveries, inefficient route planning, and escalating delivery costs impede supply chain operations, exacerbating these pressures. 

The implementation of route optimization software is important in reducing vehicle idle time and enhancing delivery executive productivity by allocating optimal routes (“Route Optimization Software Market Size”). 

Such technologies do exist for Businesses and delivery drivers. An existing solution is Route4Me, a delivery route planning software tailored specifically for delivery drivers. Operating on a B2B model, it offers a comprehensive suite of features including route planning, dispatch, tracking, driver efficiency management, delivery oversight, and enhancing customer experience.

While solutions like this primarily cater to B2B needs, we aimed to explore the demand for multi-stop route automation among users who need to manage personal errands and similar tasks.

Research Findings

To assess the demand, we conducted a survey with 20 respondents and interviewed 4 individuals to gain insights into their daily navigation habits, as well as their preferences and challenges with their current methods.

Survey Findings:

  • In the survey, 57.1% of respondents reported the need to plan routes with multiple stops for personal errands, while 42.9% did so for a combination of personal errands and work-related tasks. Only 14.3% stated they did it solely for work purposes, with 7.1% indicating they did not have a need for multiple stops. These findings indicate that the predominant requirement for inputting multiple stops is for personal errands, highlighting a clear demand for route planning to accommodate daily tasks and errands.
  • Confirming our initial research on the primary navigation app, when querying users about their primary choice, 50% reported using Google Maps, 35.7% preferred Apple Maps, and 14.3% mentioned Waze. No respondents indicated using any other app, highlighting these three as the most popular choices. Moreover, Google Maps maintains its position as the most widely used navigation app among respondents.
  • When asking respondents about their dislikes regarding their chosen navigation app, the most common responses included:
    1. Inconsistencies in providing the fastest available route.
    2. Decreased user-friendliness when planning routes with multiple destinations.
    3. Occasional inaccuracies or misleading information in estimated time of arrival (ETA) and directions.
    4. Issues with accurately positioning the user's location at the center of the map display.
  • When asking respondents about factors that would prompt them to switch to a different navigation app, they provided the following insights:
    1. Improved routes to navigate around traffic congestion or delays caused by incidents like train disruptions.
    2. Access to suggestions for the fastest routes available.
    3. Capability to input multiple destinations for efficient trip planning.
    4. Urgency to reach destinations swiftly.
    5. Compatibility with other apps in use.
    6. Clear visibility of road conditions along the chosen route.
    7. Availability of a comprehensive range of features such as images, user-generated content, reviews, and business hours.
    8. Preference for incorporating a plugin rather than entirely switching apps, enabling seamless integration with existing navigation platforms like Google Maps.
    9. Reliable offline functionality.
    10. Desire for a friendlier user interface coupled with enhanced accuracy in navigation instructions.

Interview Findings

  • All four interviewed users reported using Google Maps in their daily navigation routines. When asked about lacking features and frustrations when navigating through multiple stops, they provided the following insights:
    1. "Google Maps doesn't automatically provide the most optimized route for multi-stop journeys. It's frustrating as I have to manually organize and input the most efficient route myself."
    2. "I would appreciate a feature that suggests the most efficient route when navigating through multiple stops. For instance, if I need to visit multiple DHL locations before heading to the airport, it would be helpful if the app could optimize the route and indicate the closest DHL location to my current position. The limitation is that it doesn't provide this ordering automatically; I have to arrange it myself."
    3. "An option to display the order of stops during my drive, organized by proximity to each other, would be beneficial."
    4. "Occasionally, while driving, the app provides directions in a lengthy paragraph format, making it challenging to read and understand while navigating. A more user-friendly way to display directions would be helpful."
    5. "I encounter glitches with the app while driving, such as incorrect exit instructions on highways, which can be frustrating. Additionally, in areas with poor signal or dense buildings, the app tends to glitch."
    6. "Sometimes, the orientation of the map doesn't match the direction I'm facing. If I don't re-center it, it becomes challenging to understand."

Based on these findings, we identified several pain points, however we decided to focus on the need for optimized multi-stop routes. Users often experience frustration because the available solutions lack the fastest route option, resulting in inefficient travel times. Also, navigating through multiple stops is not intuitive due to limitations in the solution itself.

We chose these issues since they are closely related and the most prevalent among users. We also took into account technical constraints and our project timeline when making this decision.

Solution

Initially, we identified several features to alleviate our users' pain points. These included:

  • Route optimization
  • Adding multiple stops
  • Editing routes
  • Offline service
  • Written Route directions
  • Information on route duration
  • Printable Route directions
  • Maintaining the user's location at the center of the map display
  • Real-time navigation
  • Ability to view images of destinations and points of interest 
  • Allowing users to tailor the app's settings and preferences
  • Traffic-aware routing
  • Save addresses for easy access and convenience

After careful consideration, we chose to prioritize the core features essential for resolving the issue of finding the fastest route option.

  • Route optimization
  • Adding multiple stops
  • Editing routes
  • Offline service
  • Written Route directions
  • Information on route duration
  • Printable Route directions

Our initial solution comprises a web application allowing users to input up to 7 stops. The system then generates the quickest and optimized route displayed on a map, featuring the starting point and subsequent stops. Additionally, the map includes a footer indicating route direction. The web application also offers a list view option, enabling users to access step-by-step written directions of the route and providing the ability to print to a PDF format.

User Testing

After testing our product with users, we received the following feedback:

Positive Feedback:

  • "Very practical solution, and comes in very handy especially when planning multiple stops. 
  • “This is exactly what I need! I'm exhausted from constantly having to organize and input the most efficient route manually”
  • "I really like the functionality of being able to view the actual specifications of the route within the list."
  • "Great concept and color scheme."

Constructive Feedback:

  • “It would be ideal if this route could be integrated into Google Maps, allowing me to navigate in real time”
  • "When typing addresses, I didn't receive any options, making it difficult since I don't have the addresses memorized. Searching for the exact addresses and inputting them manually is quite time-consuming. Adding Autocomplete as an option would be beneficial."
  • “Having the ability to save addresses, favorite spots, and other locations would be incredibly convenient.”
  • “In terms of design, Adding some 3-dimensional graphic design elements could enhance the modern and dynamic feel of the app.”
  • “The presentation of the footer and the list with route time and direction needs to be clearer. Certain information, particularly important details, should stand out more prominently. Since everything is in the same font, color, and line, especially in the footer, differentiation is lacking.”

Although there seems to be great positive feedback on the solution itself and how it effectively addresses the optimized route problem, constructive feedback from users has highlighted several areas for improvement. Users expressed a desire for integration with Google Maps to enable real-time navigation, as well as the need for autocomplete options when inputting addresses to streamline the process.

Additionally, there is a strong demand for the ability to save addresses and favorite spots for added convenience. Suggestions have also been made to enhance the visual appeal of the app with 3-dimensional graphic design elements and to improve the clarity and differentiation in the presentation of route information to enhance usability and readability.

Enhanced Solution

In response to user feedback, we reassessed our approach. Initially positioning ourselves as competitors to Google Maps, Apple Maps, and Waze, we recognized the reluctance of users to abandon their preferred navigation apps.

Hence, we adapted our strategy. Rather than aiming to replace existing apps, we decided to complement them by integrating SmartRoute with popular platforms. This strategic pivot allows users to embed optimized routes directly into Google Maps, leveraging the strengths of both applications for a seamless navigation experience.

We also implemented the option for Autocomplete, simplifying the process for users to input multiple stops and obtain accurate routes. Additionally, we revamped the design to prioritize user-friendliness, ensuring a more intuitive and visually appealing interface.

As a result, SmartRoute has 6 features we are launching with:

  1. Optional Autocomplete for stop input
  2. Up to 5 stops input capacity
  3. Interactive map for shortest route and duration
  4. Written list of stops and directions
  5. Print option for off-line directions
  6. Direct route access via Google Maps integration

Tech Stack Used

Technical Stack:

We developed a REACT JS frontend integrating the GoogleMaps API.  We customized React Bootstrap components in CSS to develop a UI that aligned with the high fidelity designs.  Utilizing client browser storage for efficient data management, we implemented algorithms in JavaScript to generate and sort permutations with distinct duration values, optimizing for the shortest travel time.

Reasoning: 

Deciding on a Single Page Application architecture for rapid rendering and scalability, we deferred using a traditional backend API to ensure streamlined routing without compromising performance. Google Maps offers a robust API supplying comprehensive data for autofill, routes with waypoints, and map generation. Functionality was our primary focus, where initially we did not see the need to save locations, user testing suggested otherwise, and due to time constraints we forwent developing any user account support to focus on streamlining the functionality of the application.  

Challenges:

The primary challenge was route optimization, which we eventually tackled by generating all potential route permutations which were then sorted by duration value in order to find the route with the shortest projected travel time. Time was spent pursuing several methods of handling the data, such as various data packaging methods including much more object generation that was ultimately abandoned for the current waypoints-focused method. 

The sheer amount of data available through the GoogleMaps API was initially overwhelming, deciding on relevant data needed for our purposes was an ongoing debate as frequently potential features were realized through exploration of API data and React libraries.  Our ultimate challenge was time, as developing a functional sorting method took longer than anticipated.  It was only towards the end that we were in a position to consider features such as printing directions or changing travel mode to public instead of driving.  

Design / UX   

In my role as the UX Designer of this project I needed to strike a balance between functionality and enough appeal that would draw users in from their traditional navigation app. I did this by creating a clean and simple user flow that allowed users to input multiple stops, quickly view their directions, and edit those directions. I also made sure to include informational text on key screens that would explain to users in a fun and friendly way what sets Smart Route apart from other navigational apps. 

Building on that tone, I created branding, key colors and illustrations that have a fun, quirky and current tone. It has an unexpected and delightful tone, which sets Smart Route apart from competitors.  The custom illustrations and logo build upon that tone and create a truly delightful experience for users! 

The first wireframe shows Smart Route’s opening page. Next, we have an eye-catching illustration that primes users to know what to expect with Smart route. Thirdly, we have the ability for users to enter up to five stops and tap on “Generate Smart Route”. In the last two wireframes, you can see the optimized route in both list and map formats, with the option to edit the stop order if desired.

Next Steps 

As we conclude our journey with Co.Lab, our focus shifts towards further improving our solution based on the insightful feedback we've gathered. Throughout our journey, users have shown a pressing need for features geared towards enhancing convenience and streamlining navigation processes. A main feature is the ability to save addresses to minimize repetitive typing and expedite route planning. Complementing this, users have proposed the implementation of a "recently visited" list, offering quick access to frequently accessed destinations.

There is also keen interest in the integration of a shuffle mode, equipped with customizable rules to facilitate flexibility in stop selection while ensuring adherence to timing constraints. This feature would empower users to optimize their routes dynamically, accommodating changing priorities and schedules seamlessly.

In response to the evolving preferences of our user base, we're also exploring the integration of diverse travel modes. This includes options for public transit, pedestrian, and walking routes, catering to varied commuting preferences and promoting sustainable transportation choices.

Expanding beyond user suggestions, we're also considering enhancements such as offline service capability, ensuring uninterrupted access to navigation assistance even in areas with limited connectivity. Additionally, we're exploring opportunities to embed our solution across a spectrum of platforms, not limited to Google Maps, to maximize accessibility and convenience for our users.

Looking ahead, our commitment remains unwavering as we delve into the thorough investigation and exploration of these suggestions. Our aim is to integrate them into SmartRoute, ensuring that our navigation solution remains synonymous with innovation and user-centric design. By continuously evolving and refining our offering, we're dedicated to keeping SmartRoute at the forefront of navigation technology, empowering users to navigate their world with unparalleled ease and efficiency.

Contact Us

Are you frequently running errands and making multiple stops while driving? Do you aim to reach your destinations as efficiently as possible? Consider trying SmartRoute. We highly value feedback, and you're welcome to explore our GitHub repository too.

If you appreciate our efforts or wish to delve deeper into our journey with SmartRoute, don't hesitate to reach out!

Thank you for taking the time to learn about our story. We eagerly await your feedback and thoughts.

Learnings

Product Manager Learnings:

Carolina Rumie

I learned the importance of working cross-functionally and embracing diverse perspectives to enhance the user experience. I learned the significance of prioritizing user needs and preferences in product development. I learned the necessity of being agile in response to user feedback and market changes.

Designer Learnings:

Claire Hibbs

I learned the importance of understanding and navigating user needs and technical realities - there is a delicate balance that we needed to strike between meeting user expectations and respecting technical constraints, but we worked through it together I learned about refining through iteration - you won't get your product perfect on the first try, multiple iterations are necessary! I learned collaboration and communication is key - we all had so much to learn and contribute!

Developer Learnings:

Connor Prime

I learned to communicate about challenges and to avoid redundancy. I learned to be versatile with overall strategies and technical issues.  I learned to communicate frequently with designers regarding feasibility and the overall vision.

Developers Learnings:

William Reeder

&

I learned that setting realistic expectations and dividing tasks is a strong methodology for accomplishing mutual goals.  I learned by navigating REACT libraries and applying mathematical concepts in Javascript.  I learned that delegation and accountability, coupled with a clear plan is the path to success

Full Team Learning

We learned the importance of adopting a user-centric approach and focusing on understanding the needs of our users. Iterative testing emerged as a crucial aspect of our process, enabling us to refine our product continuously. We learned the importance of collaboration and working cross-functionally with others.

Everyone has something valuable to contribute, and it’s essential to listen and work together. We learned to effectively navigate difficult conversations within our team. It's crucial to actively listen and communicate openly, whether things are going smoothly or encountering challenges. This ensures that we address issues promptly and collaboratively, fostering a culture of continuous improvement.