UX/UI Design | Web Analytics

MySavvy Portal Overview

Redesign of an overview screen of a customer portal

About the project

  • Duration
  • August 2021
  • My Role
  • UX Designer
  • UI Designer
  • Web Analyst
  • Team members
  • Jake Normandin
  • Tools
  • Pen and paper
  • Adobe XD
  • Google Analytics
  • Google Tag Manager
  • Deliverables
  • Hi-fi interactive prototype
  • Analytics report

Summary

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.

Discover

— ANALYTICS

Where's the data?

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.

— COMPETITOR ANALYSIS

Finally, got some info!

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.

Define

— BRAINSTORM

Creating hypotheses

I was able to identify some problems regarding the current layout.

1. Slider banner

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

2. Lack of service's info

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.

3. Hidden notifications

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.

4. Support

Many people turn to the portal when they need assistance, but there is no quick menu to access self-help articles.

5. How to access e-mail?

Many people seek access to e-mail; however, they need to go through 3 pages to get to it.

6. Loading...

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.

— SKETCHES, WIREFRAMES & PROTOTYPE

Putting it all on paper

After defining some simple goals based on the presented hypotheses, it was time to start designing the structure that would achieve them.

Conclusion

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.