Canary is an app that allows a quick way to see which Vodafone products can be sold around the World. Some countries have restrictions or legal implications. It also combines Legal, Bid and Pre-sales information to prequalified products.
In this project, I owned 100% of the front-end build and I collaborated with the team manager and a designer to conceptualize the features and the design. Before coming up with the final design, I also built a couple of prototypes and even a React Native demo!.
The home page displays a horizontal scrolling grid matching countries with services. Each cell contains colorful dots representing the availability of a service in that country. The sidebar allows to user to enable/disable countries whilst the portfolio category bar allows the user to enable/disable products in the grid. This UI makes it very easy for users to compare services in different countries.
When the user clicks on a cell, an overlay appears with more information regarding the services in that particular country.