Case studies
Province selector with GeoIP
If you go to bell.ca today without cookies saved, you will see a bar come up that prompts the user to change their province, and will automatically detect your province if you live in Canada. I was among the team who worked on this component initially. The idea came from a couple of other developers at Bell and I began development before we had a design in place. I began by making a layout myself and then molding it to the existing design some weeks later. Then with the help of the team I connected the front-end to a service that would automatically detect the user's province based on their IP address.
We used the Geolocation service MaxMind GeoIP API for this project as it was lightweight and easy to integrate. With the help of the team we successfully managed to integrate the service to detect the user's province based on their IP address. The last features we implemented were saving cookies to the user's device and finishing the layout according to design specifics.
The old layout for this component on desktop consisted of a modal window that would cover the entire screen, and didn't have automatic geolocation. This was very intrusive for users who were on private browsing or didn't have cookies enabled. The new banner-style province selector automatically sets the user's region and lets them change it through a dropdown menu. This design has been considered much more compact and useful, and is still being used on the site today!
I made a JavaScript recreation of the province selector here. Try using it on both desktop and mobile views. It does not use any Geolocation service but it still embodies the compact and efficient design of the one at Bell.
Form generator using React
React is a JavaScript library that has become particularly popular in recent years. One such project at Bell was to create an app that would generate a form based on user input. This would be used internally by employees to generate new forms. There are a lot of forms on Bell.ca, and this would prevent the need for having to make a brand new template every time a new form is needed.
This project had us restricted to pure React, as Bell didn't want to use external libraries. Regardless we ended up using many core elements of React in this project such as the useEffect and useState hooks. When the form is submitted, this would trigger a dependency that updates the useEffect hook and submit the form. We built a number of form templates that were styled according to the user's input on what layout and input types they wanted.
Bell Aliant ordering
Bell Aliant is a subsidiary of Bell Canada that provides services in the Atlantic provinces. Prior to 2022, wireless home internet products could only be ordered by Bell Aliant customers by phone or filling out a web form. The aim of this project was to establish a new connection between the front and back-end that would allow Aliant customers to order these products online. This involved a good amount of back-end development and a lot of troubleshooting, as I was not familiar with the architecture of the Bell Aliant website prior. Much of the existing MVC application had to be reworked to enable this to happen.
Print & Email with PDFLib
This was one of the earliest projects I had a degree of freedom with at Bell. This was a project that was meant to launch in 2016 but was held back due to changes in business. It changed hands a few times until it ended up with me.
The aim of this project was to make a brochure in Adobe's PDF format that would dynamically generate TV channel names and logos based on what is available in the customer's area. It also included pricing information for available TV packages and addons. I was tasked with implementing the layout of the brochure based on mockups from the design team. This involved usage of PDFLib, a developer library for dynamically generating and manipulating PDFs. There was a lot of trial and error and some painstaking work in placing all the elements according to the design and making sure all the pages generated correctly but we got the project finished by the end of 2017!
Print and email marks the first time bell.ca had any sort of dynamic PDF generation. However this feature now seems to be deprecated on bell.ca.
Sandbox
Does the province selector component above intrigue you? Check out the sandbox for more components and features!