After a successful build of the original sales tool, Telenet asked us to visually upgrade the original sales tool.
Telenet asked us to provide their sales tool, which we previously built in 2016, with a visual upgrade and improved UX for desktop and tablet. The app also needed to be fully bilingual and offer a shopping cart for the customer. In workshops with Telenet and the shop owners, who use the app in the stores, we analyzed the flow of the tool and adapted it to better meet users' real-world needs. A concrete example is the functionality of assigning promos.
Looking for technical partner for your portal?
We chose to completely redesign and rebuild the front-end for the sales tool to create a beautiful and interactive whole using React JS. This allows us to build a reusable component library to use throughout the app. The backend has an API to dynamically send the right data to the front-end and possibly add additional products and promos later. We explored options for the new implementation and after workshops with the client, chose a decoupled set-up. Here, the front-end focuses on the display and usability of the app and the backend is responsible for the data delivery. This also offers the possibility of switching to an API from the customer itself in the future.
We mentioned earlier that we were using a modular component system for the front-end rebuild. We started by building the navigation for desktop and tablet, with three levels to make choices between bundles, categories and self-assembled components. Then we developed the most commonly used components, namely the tables and box component. These had to be very versatile so they could be easily reused. We also added the sliding price tag to display or hide the price of a product.
We then formatted the different pages of the app using data from the backend and displayed the appropriate components on the pages. We also made the app available in both Dutch and French by using translations from the backend and converting them into the front-end with i18n.
Finally, we put together the shopping cart, where the user can select products or bundles and see a summary at the end that can be printed without obligation or emailed to an email address of their choice.
We started API development by creating a complete data structure, avoiding unexpected problems and making sure the components were built consistently. Then we gradually built basic endpoints for querying the components, keeping in mind the translations that were needed. Our data structure analysis took into account the ability to determine in which language a component is or is not visible.
We developed an interactive web app that meets modern standards and is extensible for the future. All that with an uplift in user experience. During the interim evaluation, we showed a demo to Telenet. We then deployed the application on a staging environment where customers could test the tool and provide feedback. The tool has a more modern look-and-feel and offers an intuitive way to flow through it, and the needs of users are better met.
