The NS Navigator is a mobile application to be used by drivers in vehicles servicing waste bins. Collection routes are generated and assigned to drivers with an overview of the estimated shift length and number of bins that need to be collected, including a detailed navigation with turn by turn instructions and directions on where the bins are located.
CAPABILITIES
Mobile Interface Design, Interaction Design
TOOLS
Sketch, Principle, After Effects
Creating a driving directions application can be quite intimidating, especially if you are working in a small team with limited resources available. Fortunately, we were not the first ones creating one (perhaps navigation to empty containers yes!).
References became essential to have as a starting point on how interfaces are most likely designed in this context. There was no need to reinvent the wheel, a lot could be learned from huge apps like Google Maps and Waze, and adapt what has been built to our product needs.
When many containers are located in a small area range it can be difficult to identify and select precisely which container needs to be emptied. When two containers are positioned in the same place but in different levels it makes it even harder for the collector: “Is this container the one on the first or second floor?”
A modal slides up when the driver approaches a Building — a place where containers are mostly indoors and spread on different levels, think of a shopping mall for example.
During the iterations, the navigation interface had some major visual updates worth pointing out: The container thumbnail was increased in size for better recognition; the current street where the driver is located it is displayed over the map below the arrow (before only the street name of the container was being shown); the label of the buttons were replaced by icon-only buttons.
The reason to do so is that depending on the language, the button width could not be enough to fit the label, thus it also avoids translation work. In addition, the blue background was replaced by a white one, as it makes the application, in general, more “white-labeled”, blending better with any customer’s brand colors.
We performed a series of tests in order to validate the design and implementation. Details that sometimes are unnoticed during the design at the office were brought when testing in the field, for example, font size being too small — the drivers’ eyesight distance from the phone in a car/truck can be farther away from my office desk, and the lack of feedback and undo actions when a container was serviced or skipped by mistake.
When a driver finishes emptying all the containers in a route, we wanted to reward him with a message telling him that it was a good job and his work is helping to make the city cleaner. The message is followed by an animation of a happy container. In the future, the idea is to explore ways to gamify waste collections motivate drivers when performing their job.
