Redesign of an overview screen of a customer portal
TekSavvy is a Canadian service provider, with their portal hitting approximately 30,000 monthly with several functions to change or add new services, make payments, as well as get notification on the latest blog news and promotions.
The R&D department noticed that it was necessary to give more prominence to the notifications area, as this area was hidden among the other overview features.
From the start, the main challenge was finding enough data to be able to monitor the current state of the site and to follow possible changes to understand if the goals would be reached.
The portal had the Google Analytics Universal tool; however, it did not get much information since the website was made in angular and did not have dynamic URLs. So, my first task was to implement the new version (GA4) and create events using the Google Tag Manager Tool to be able to monitor the traffic based on the site code, instead of the URL.
I added about 50 tags and triggers to be able to collect around 1 month worth of data before deploying the new version.
With access to data on the most requested pages and services through the portal and telephone, I was able to pinpoint the higher priority targets.
Competitors' portals were also analyzed to understand how they distribute the amount of information given to the users.
I was able to identify some problems regarding the current layout.
The point that drew the most attention on the site was a side banner, which did not always change; therefore, there was no need to be 100% prominent. In addition to causing problems with the page load speed
It only showed the information for the home internet service. If the user had a telephone or TV service, they would only be able to view the service by clicking on the side menu.
Notifications are displayed below the banner, making it the last thing to be noticed on the site, and it's only viewable on the overview page.
Many people turn to the portal when they need assistance, but there is no quick menu to access self-help articles.
Many people seek access to e-mail; however, they need to go through 3 pages to get to it.
The site took a long time to load due to the amount of information it generated on the overview. And even after loading it didn't get any feedback from the system, which seemed to be an error.
After defining some simple goals based on the presented hypotheses, it was time to start designing the structure that would achieve them.
The brand’s guidelines were followed to keep the layout youthful and modern.
The blue background was used to highlight the flow and created a button to access the email quickly.
The current balance is colour coded to alert users if balance has been paid (green), if the due date is close (orange) and if it is overdue (red).
A layout was created for each type of service, with quick links to important features.
A card was created for quick technical assistance links, mapping the 6 most accessed articles on the assistance site.
Gave notifications more prominence and split them into sections for account activity and news & promos, based on their order of importance. It was also inserted in the navigation to be accessible from anywhere within the portal.
The banners were turned into a card with smaller images; which in addition to increasing loading performance, allowed users to visualize all messages without having to use a slide banner.
A layout for loading the page was also created, giving users the idea of exactly what they would find after loading.
After being tested and presented to the departments involved, it was then approved and moved into production, where it went through several reviews until the launch.
The tags and triggers created to monitor the site using Google Tag Manager and Google Analytics 4 have been updated.
Through the triggers, we gathered data that showed that the access to help articles increased the average monthly hits by 4%, decreased the number of pageviews/sessions by -15%, and decreased the time spent on the site by 20 seconds as more relevant articles were more easily accessible.
It was a very interesting project to work on since it took a lot of work to create the events to track data on the website. The developers on the team did an excellent job in producing the site and with that, it became a very pleasant work to be a part of.
The portal was highly praised and fulfills all the goals we set out to accomplish from the beginning.
I would love to hear your ideas.Reach out and let’s discuss how to make your dream project go live!
Do you prefer to send an email? Please, send it to:
