UX DESIGNER AT HABANERO CONSULTING

Redesigning the Communications Portal for Petro-Canada Retailers

UX DESIGNER AT HABANERO CONSULTING

Redesigning the Communications Portal for Petro-Canada Retailers

Challenge

Design an easy-to-consume communications portal to support Petro-Canada retailers in their daily activities.

Business opportunity

Improve the efficacy of business processes by implementing a digital experience that supports the way employees want to work.

Technology

SharePoint Online

Project type

Intranet site

Context

A subsidiary brand of Suncor, Petro-Canada is one of Canada’s largest oil and gas companies, with about 750 retail sites and 130 wholesale distributors. Each of these sites connects to Suncor’s back office environment through a VPN connection to access several applications provided by Suncor in support of site-level processes and activities. In this context, The Associate Communications Portal is a fundamental tool to disseminate information to associates/operators and provide the necessary direction to help them manage their business. Used every day by ~5000 users, it acts as a gateway into Suncor’s network as the primary landing application.

In 2019, Suncor engaged Habanero Consulting and requested a new design for the Petro-Canada Associates Portal. The project was part of a massive initiative to improve the digital employee experience by implementing a modern platform based on Microsoft technology.

When we started the project, many Associates were frustrated because their digital experience was composed of legacy technologies and hardware that became a bottleneck for the daily business processes. They needed to access Suncor’s back using specific devices and follow a multi-step process consisting of several password screens. In addition, the portal’s content was not always intuitive or updated. As a result, some managers created unofficial solutions such as Whatsapp groups to help them share files and keep their teams informed.

The expected outcome of this project was to design and implement a new mobile-friendly portal to support the way Associates want to work (from anywhere using their own devices). The new portal should also work as a gateway for the multiple applications Associates need to consume to perform their jobs. The navigation should work seamlessly, and the content should be reliable and intuitive.

 A human-centred design process

Approach

Through extensive research and analysis, our design process was grounded in a detailed understanding of user needs. Combining creativity and technical expertise to overcome obstacles, we delivered a solution that explored the main advantages of the Microsoft platform adopted by Suncor.

My role

Collaborating with the Consultant Lead and UI Designer, I designed the new concept from initial sketches to final approval.

I also took on the role of a Business Analyst, managing and documenting all functional requirements. My aim was to provide developers with detailed information for accurate estimates and ensure the Product Owner fully understood the mockup details.

 A human-centred design process

Approach

Through extensive research and analysis, our design process was grounded in a detailed understanding of user needs. Combining creativity and technical expertise to overcome obstacles, we delivered a solution that explored the main advantages of the Microsoft platform adopted by Suncor.

My role

Collaborating with the Consultant Lead and UI Designer, I designed the new concept from initial sketches to final approval.

I also took on the role of a Business Analyst, managing and documenting all functional requirements. My aim was to provide developers with detailed information for accurate estimates and ensure the Product Owner fully understood the mockup details.

 A human-centred design process

Approach

Through extensive research and analysis, our design process was grounded in a detailed understanding of user needs. Combining creativity and technical expertise to overcome obstacles, we delivered a solution that explored the main advantages of the Microsoft platform adopted by Suncor.

My role

Collaborating with the Consultant Lead and UI Designer, I designed the new concept from initial sketches to final approval.

I also took on the role of a Business Analyst, managing and documenting all functional requirements. My aim was to provide developers with detailed information for accurate estimates and ensure the Product Owner fully understood the mockup details.

The solution at a glance

A laptop and smartphone displaying the new site , demonstrating its responsiveness to different screen sizes.
A laptop and smartphone displaying the new site , demonstrating its responsiveness to different screen sizes.
A laptop and smartphone displaying the new site , demonstrating its responsiveness to different screen sizes.

Responsive design

Responsive design

Responsive design

Retailers use smartphones and tablets as their primary devices. The new solution allows them to use their own devices instead of a specific laptop. It also leverages a flexible and responsive interface.

Home

Home

Home

The new homepage highlights alerts and the latest bulletins. This structure provides the updates retailers need to know before starting their day.

Obs: The name of the new portal was 'to be determined' when we delivered the approved design to Suncor. Their product team would be responsible for running a survey and selecting the new name.

The new homepage, where users can find the most recent bulletins and links to policies and procedures.
The new homepage, where users can find the most recent bulletins and links to policies and procedures.
The new homepage, where users can find the most recent bulletins and links to policies and procedures.
Image showing the new 'My Preferences' feature, where users can select their preferred topics from bulletins and recommended links.
Image showing the new 'My Preferences' feature, where users can select their preferred topics from bulletins and recommended links.
Image showing the new 'My Preferences' feature, where users can select their preferred topics from bulletins and recommended links.

Customized experience

Customized experience

Customized experience

Retailers have different products and services depending on their locations. A common complaint by users was that the old portal promoted everything to everyone. They were frustrated by frequently seeing irrelevant information on the homepage.

We solved the problem by allowing users to customize their experience by selecting the topics they want to consume on the homepage.

Bulletins

Bulletins

Bulletins

The new portal allows users to search and filter bulletins by topic. This page is super convenient for users trying to get up to speed after an extended leave.

Bulletins landing page displaying entries ordered by publication date, with a filter option by topic.
Bulletins landing page displaying entries ordered by publication date, with a filter option by topic.
Bulletins landing page displaying entries ordered by publication date, with a filter option by topic.
Bulletins landing page displaying entries ordered by publication date, with a filter option by topic.
Bulletin details page, where users can read the complete bulletin and have access to related links.
Bulletin details page, where users can read the complete bulletin and have access to related links.
Bulletin details page, where users can read the complete bulletin and have access to related links.
Bulletin details page, where users can read the complete bulletin and have access to related links.

Bulletin details

Bulletin details

The new bulletin page displays all the critical information associates expect when reading an update.

The old layout had small fonts, and it could easily break when users tried to zoom the page or print it. We solved all these technical problems in the new design.

Resources library

Resources library

The new portal allows users to search and filter policies and procedures. Users can also quickly bookmark their favourite links.

Resources Library landing page, where users can search or browse policies and procedures. A filter is available for users to narrow content by type and category.
Resources Library landing page, where users can search or browse policies and procedures. A filter is available for users to narrow content by type and category.
Resources Library landing page, where users can search or browse policies and procedures. A filter is available for users to narrow content by type and category.
Resources Library landing page, where users can search or browse policies and procedures. A filter is available for users to narrow content by type and category.
Procedure details page, where users can read the complete procedure, acknowledge they have read it and also have access to related links.
Procedure details page, where users can read the complete procedure, acknowledge they have read it and also have access to related links.
Procedure details page, where users can read the complete procedure, acknowledge they have read it and also have access to related links.
Procedure details page, where users can read the complete procedure, acknowledge they have read it and also have access to related links.

Acknowledgement of safety procedures

Acknowledgement of safety procedures

The new solution allows the Health & Safety team to post product recalls and request retailers to acknowledge that they read the content. This process is critical to ensure all products for sale are safe to consume.

We also delivered a dedicated area where managers can quickly verify those that forgot to acknowledge.

Like what you see?

Let's transform your ideas into successful projects.

Like what you see?

Let's transform your ideas into successful projects.

Like what you see?

Let's transform your ideas into successful projects.

Like what you see?

Let's transform your ideas into successful projects.

Photo Credits

'Woman holding steering wheel sitting inside car’
Photo by William Krause on Unsplash

'Woman holding steering wheel sitting inside car’ Photo by William Krause on Unsplash

'Woman holding steering wheel sitting inside car’
Photo by William Krause on Unsplash