• UX Design
  • 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
  • Tools
    Pen and paper
    Adobe XD
    Google Analytics
    Google Tag Manager
  • Deriverables:
    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.

Old version of the Portal Overview

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.

1. Proposed layout

The brand’s guidelines were followed to keep the layout youthful and modern.

2. Profile information

The blue background was used to highlight the flow and created a button to access the email quickly.

3. Current balance

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).

4. Services

A layout was created for each type of service, with quick links to important features.

5. Assistance

A card was created for quick technical assistance links, mapping the 6 most accessed articles on the assistance site.

6. Notifications

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.

7. Recommended links

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.

8. Skeleton loading

A layout for loading the page was also created, giving users the idea of ​​exactly what they would find after loading.

Production

— Hand-off to developer & reviews

Ready for deployment

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.

Results

— Analysis

Continue monitoring

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.

Conclusion

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.

You can access MySavvy Portal here (login required).

Get in touch

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:

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.