ECHO is a powerful framework for delivering refuse and recycling services to help companies plan, manage and deliver their fleet with features such as tracking vehicles in real time. As sole designer I helped the company through a major redesign to be compatible with the latest browsers as the company doubled in size winning over new contracts.


Working alongside the product manager our main objective was to standardise the forms in ECHO and create a better interaction for users on the home screen. 

We were tasked with making the experience as accessible as possible and creating a modern interface while still keeping the functionality from the old system.

We also needed a way to document these new designs so developers can reuse them to implement similar screens in the future.


old screen

Above: Old ECHO Form

home screen

Above: Old ECHO Homepage


Designing these forms was a constant back-and-forth of ideas about how the data and layout should be displayed. The current yellow tinted background was outdated and a lot of direction came from the CEO and product manager because they had years of experience with understanding the functionality of the product. 


Events screen

Above: Updated ECHO Form

To streamline the development process, we needed to create forms components that were generic across all forms. We went through ECHO and figured out what kinds of format all these forms had then we standardised these and made sure each form was part of these components. 

Screenshot 2021-04-07 at 11.48.09

Above: Design System

Above: Design System

Above: Updated home screen


Customers said that the new home screen looks really modern and update to date but found that the forms didn’t have as high contrast as they’d like. I was proud of the result but thought that as a team we should have brought a better process into practice. The general and form components have been documented in the design system so these can be easily replicated to build future screens.

Nav bar

Above: Updated ECHO Homepage Navigation