Loading case study…
Loading case study…
Enterprise Platforms / PETRONAS DOT
PETRONAS
From Paper Business Cards to Digital Connections
Designing a digital contact-sharing experience within PETRONAS DOT, allowing employees to share professional information through QR codes and recipients to save contact details directly to their phones.
01PETRONAS / DOT
The PETRONAS Digital Name Card (DNC) is a feature within DOT, the central hub for PETRONAS applications. It lets PETRONAS employees manage digital business cards and share their contact details through a QR code.
I was the UX/UI Designer from requirements to go-live, between June and October 2023. The work meant designing a new digital contact-sharing experience within an existing enterprise mobile ecosystem.
02The Problem
Professional contact information was traditionally exchanged through paper business cards.
PETRONAS wanted to digitalise this and introduce a new way for employees to share their business information, inside DOT, the app they already use.
How might we
How might we make professional contact sharing more convenient through a digital experience that employees can access from their existing mobile application?
03Product Objectives
Provide a digital alternative to physical business cards.
Let employees share their digital card through a QR code.
Let recipients view the details and save them to their phone.
All of it delivered as a feature within the existing DOT app.
04My Role
My ownership was the end-to-end UX/UI design and Design QA, from requirement gathering, workshops and interviews through wireframes, UI, prototype and handover, then Design QA on Android and iOS until go-live. The application itself was implemented by the development team.
05Understanding the experience
Discovery combined requirements gathering, design workshops, interviews and requirements discussions, followed by user-story grooming. I worked with stakeholders, the UX Lead, the Project Manager and the Business Analyst. Requirements and user stories were managed in Azure DevOps, and the design work was done in Figma.
FigmaUX and UI design, prototype
Azure DevOpsRequirements and user stories
06User Roles
The project defined two user roles, the person who owns and shares the card and the person who receives it.
User role 01
A PETRONAS employee who registers and manages digital name cards through DOT and shares them with others.
Needs
User role 02
A person who receives a PETRONAS employee’s contact information by scanning the QR code.
Needs
07User Journeys
First-time users open DOT and register for DNC. Card owners open DOT, go to DNC, view their card and display the QR code. Scanners scan the code with their phone, open the digital business card, view the details and save the contact to their phone.
AFirst-time user
BDNC owner
CDNC scanner
08UX Process
Understand business needs and feature scope.
Explore user journeys and requirements with the project team.
Refine requirements and align expected behaviour.
Define the registration, card and contact-sharing journeys.
Design the mobile experience in Figma.
Communicate the intended experience.
Provide designs for development.
Review the implementation and address UI discrepancies.
The DNC feature was developed and launched.
09Designing within an existing ecosystem
The EH design system had no mobile version suitable for this project. I sought guidance from Rizal on reusing and adapting EH web layouts and components for mobile.
At the same time, DNC had to stay consistent with DOT. DOT, created by Downstream and later passed to EDX, has its own visual language that doesn’t fully follow the PETRONAS design language, so the feature kept DOT’s icon style, font family and colour treatment while adopting suitable EH layouts and components.
10Card Management
Users can manage multiple digital name cards, adding, editing and removing cards, choosing which card to display and showing its QR code.
11QR Sharing
The owner displays the QR code from DOT, and the recipient scans it with their phone camera, which opens a digital contact page with the owner’s details and a way to save them straight to the phone’s contacts. The recipient doesn’t need DOT.
1Owner shows the QR in DOT
2Recipient scans with the camera
3Contact page, save to phone
12Conceptual UI
Original conceptual recreations of the key screens, with fictional details and an original teal and purple background in place of the approved one.
First-time registration
The full sharing journey
13Designing for a global audience
The audience included PETRONAS staff around the world, so the digital card design went through review by GSC, the PETRONAS branding team. GSC provided the DOT-themed background used on the card. Brand review was part of the delivery process, not an afterthought.
14Designing for both Android and iOS
My Design QA covered both Android and iOS, because DNC is a mobile feature. Changes during development meant repeated design checks, and the review compared the implementation with the intended UI for visual consistency and mobile layout, taking platform differences into account.
Android
iOS
15From concept to go-live
Developed and launched (completed October 2023).
The DNC feature was developed and launched, and the project was completed in October 2023.
PETRONAS employees can
Recipients can
16Key Takeaways
Fitting into DOT shaped the design as much as the feature itself.
Adapting web design-system components to mobile took judgement, not just resizing.
Brand consistency and application consistency had to be balanced.
Working through details with UX, PM, BA and stakeholders kept the scope aligned.
Android and iOS each needed review, again after every development change.
Design QA carried the design intent into a launched product.