MyMesra leads with UX innovation - Portfolio

PETRONAS DAGANGAN

MyMesra leads with UX innovation

Mymesra dazzles with all new website and AI chatbot in a single platform

Background

overview

The existing website of Petronas Dagangan Berhad (PDB) was designed more than 5 years ago when web technology is not as advanced as what we experience today. As market segment has also evolved, the wants and needs are different from the way it was before.

To continue as Malaysia's leading retailer and marketer of downstream petroleum products, XIMNET was appointed to evaluate PDB’s digital positioning as the market lead as well as to provide cutting edge technologies to strengthen its brand presence.

the client

Petroliam Nasional Berhad (PETRONAS) is a global energy and solutions company, ranked amongst the largest corporations on Fortune Global 500®. Its key downstream company, PETRONAS Dagangan is a Bursa Malaysia-listed company with over 1000 retail stations and more than 760 Kedai Mesra convenience stores across Malaysia. PDB markets petroleum products and operates service stations domestically.

Its products include lubricant, cooking gas, kerosene, diesel, fuel oil, bitumen and cards. The company operates through three segments: Retail, Commercial and Others.

The Retail segment consists of sales and purchase of petroleum products to the retail sector.

The Commercial segment consists of sales and purchase of petroleum products to the commercial sector.

The Others segment comprises of aviation fuelling services.

challenges

Lacking responsive web technology back then, the versions of Desktop and Mobile view had to be developed separately, which means there was double the effort when updating any changes in the old website’s UI. Moreover, the content presentation for the old website was too lengthy, holding an excessive amount of repeated and outdated information that does not match with the current user behaviour and content consumption manner at all.

The products of the website were also very technical, which makes it difficult for general users to understand. With MyMesra website serving as the key point to many other platforms and tools, it was challenging for our team to ensure a seamless and frictionless integration that is also able to serve multiple stakeholders on a single digital touchpoint (Consumer, Business, Investor).

our approach

MyMesra’s old website content was messy, with walls of texts and product details filled with technical jargons. Its navigation was also complex and indirect, which makes it difficult for users to navigate their way around the website.

Our team decided to solve the navigation issues by creating an unconventional Mega Dropdown to feature all products and services at one glance. On the content side, we took all the necessary information and turned them into bite-sized content which makes them much more comprehensible, designing them with a poster layout that conveys each key message and product with prominent hero banners and video banners for attractive storytelling.

As majority of the users spend more time on their mobile devices, we prioritised mobile-first experience, in which we started the design process from the smallest of screens: mobile, before moving on to other versions. Designing MyMesra’s website in this way helped to ensure a better experience for users, making the transitions to mobile, tablet and desktop as seamless as possible.

Figure 1: Gap analysis of technology advancement over the years

Designed to be mobile-first, user transition from mobile to desktop is seamless.

The Work

Research

We conducted a series Stakeholder Workshops to collect business insights from all PDB stakeholders including the strengths, weaknesses, opportunities and threats in their respective segments. The session also covers a brief discussion on all cutting edge web technologies in the market as part of our process of formulating new ways to serve PDB customers more effectively through the website.

Next, XIMNET met each individual team to craft each segment’s unique selling point and key messages and to ensure the content prioritisation was on point. We also did some market research to examine and understand PDB’s competitors’ approach in bow they communicate through their website.

Figure 2: Web usability and behaviour study

Site Architecture

Determined to provide a ’seamless and frictionless’ user experience, we set out to organise MyMesra’s site architecture in a more comprehensible manner by prioritising the sitemap structure according to the size of the market segment. PDB’s main segment during the revamp project was ‘Consumer’, so it was put as the first, followed by ‘for Business’ and ‘Investor Relations’.

The arrangement for each segment is based on user behaviour data; For example, ‘Promotions’ was placed first in the order because majority of incoming traffic to the website are looking for latest promotions. To ease usability, the sitemap was also kept to only 2 levels so that the information is easily assessable with minimal exploration or clickthrough.

We set out to organise MyMesra’s site architecture for clarity and accessibility.

Unconventional AI Chatbot Design

In this revamp, we utilised chatbot technology to enhance customers engagement process and operational efficiency, making a full integration between Chatbot and Website to deliver seamless bot-to-page interaction flow.

MeVA, MyMesra’s virtual helper with a Bilingual NLP for English and Bahasa Melayu, is the first in the world that can switch between languages within the same conversation session. MeVA streamlines interactions between users and services, improving the experience for users. Our team gathered all the enquiries from web forms to social media so that the data can be analysed, and key roles can be prioritised accurately for MeVA.

MeVA’s responses are bite-sized so that users do not get overwhelmed by the length of the chatbot’s reply. To ensure any issues that might occur throughout the bot and user interactions are kept to a bare minimum, MeVA will be able to collect the user’s name, contact and email to be routed to the Customer Service Team when the bot is unable to respond to users properly. The bot is also integrated with the website search when it is unable to retrieve information from its knowledge base.

We designed the UI for Chatbot conversation to be unconventional – a full page that covers the entire device screen with a card-style output – this was to ensure that there will be no distractions from anything going on the website while the conversation is ongoing. Additionally, users will be able to clear their conversation and restart from the beginning as well as keep their conversation history even as they browse through the website.

The design of the AI Chatbot UI is one of its kind.

Online Tools

In search for a Petrol Station or a Gas Dealer nearby your home, but have no idea where to find them? No worries, with MyMesra’s Petrol Station Finder and Gas Dealer Finder integrated with Google Maps, users can now easily get directions to their desired Petrol Stations and Gas Dealers from Google Maps, Apple Maps and Waze. MyMesra is one step ahead of any of its competitors with its Lubricant Recommender. Others are mostly designed with texts or a quiz-style design whereas MyMesra is out of the ordinary in that it uses visuals.

Design Concept

The website design retained its colours as inherited from the PETRONAS Group’s master branding – an emerald green that represents the seas and land where oil and gas originate, and the sturdy and highly legible Museo typeface. With a strong use of visuals for story-telling especially for key products, the poster layout was considered by far the most major transformation to the design as compared to their previous website with the super lengthy multi-paragraph content.

Bite-sized

Make content palatable by only serving what is important for users to take the next steps

Poster Layout

Undivided attention with one visual - one key message design approach for brand communication

Interactivity

Experience the brand through rich media tools such as petrol station finder, AI chatbot and more

copywriting

With how user attention span is rapidly dropping, it is important to communicate the key message across with as little friction as possible. In the process of re-writing PDB’s website content, we kept in mind of the following guidelines:

Precise
Keep sentences short and on point. To not lump up all the key messages in 1 long statement

Clear
Use as little jargon as possible. It should be understood at the first read.

Purposeful
Content in website has to add value to the customer experience otherwise they are just noise.

The key to effective communication is to say just enough for users to make the next move.

The Results

The website was launched officially by the former CEO of PDB, Syed Zainal Abidin Syed Mohd Tahir, in conjunction of the 6^th Time Victory Celebration with Lewis Hamilton and Valterri Bottas event.

project achivements

20%

growth in average browsing session

10%

increase of users from all devices

2.3

mins per session on average

5.3k

monthly conversation with MeVA

With Rich Media Content presentation and a Mobile-first user experience, MyMesra has successfully achieved to be ‘Seamless & Frictionless’. Furthermore, AI Chatbot MeVA, was able to serve over 5,000 users monthly. This has helped to reduce the number of incoming calls to the Call Centre for general help such as Loyalty Programme and Promotions related enquiries.

see the work

Other works

Baiduri Webform

Simplifying Banking with Baiduri Webform

Dec 11, 2024

Kreatif KL

Celebrating Creativity with Kreatif KL Festival

Dec 11, 2024

Velesto

Energising the Future with Velesto

Dec 11, 2024