Tags: vodafone react webpack web

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 prequalify products.

Home page

In this project, I owned the 100% of the front-end build and I collaborated with the team manager and a designer to conceptualise 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.

Canary won the prestigious Knowledge Management Innovation award in the UK legal industry:

Initial prototypes

Second prototype

Second prototype

First prototype