Background
Proton is Malaysia's leading automotive brand, playing a pivotal role in the nation’s automotive industrialization and ecosystem. Since the launch of the iconic Proton Saga in 1985, the brand has embarked on a remarkable journey, often celebrated as the "Pride of the Nation." Taking a significant step forward, Proton unveiled its new EV sub-brand, e.MAS, marking its commitment to future electric vehicle (EV) models. Over the years, Proton has continued to grow and establish its presence internationally, with operations in countries such as Mauritius, South Africa, Brunei, Srilanka, Pakistan, Egypt, and more.
Challenge
Proton Pakistan required a brand new website ahead of its re-launch in the Pakistani automotive market after decades of absence. The launch featured the Saga (Sedan) and X70 (Intelligent SUV) models, highlighting the brand’s core values of innovative technology, reliability, and adherence to international standards.
X70 Internal Page
Mobile Landing Page
Mobile Landing Page
Objective
As a design agency, our primary goal was to develop an aesthetically pleasing, user-friendly, responsive, and informative website. Each product page was designed to showcase detailed information, engaging visuals, and compelling content, offering users everything they need to know about the Proton Saga and X70. The website aimed to generate online bookings and encourage users to visit their nearest 3S Dealership for a seamless experience.
Brand Guide
The color palette for each car was carefully curated to complement its unique characteristics. A neutral grey tone was used consistently throughout the website to maintain balance and sophistication, while vibrant colors; electric blue and celestial red highlighted the striking appearances of the cars.
The X70’s page featured sharp, dynamic collage of visuals, reflecting its bold and powerful personality. In contrast, the Saga’s design embraced rounded visuals, harmonized with the vibrant red accents, showcasing it as a versatile everyday vehicle. This thoughtful use of colors and visual elements added depth to the user experience, making the website engaging and product-focused.
Typography
We utilized the ‘Gotham’ font family, which seamlessly aligned with the brand identity while ensuring clear and easy readability. Regular and bold styles were thoughtfully used for headings to create a modern and dynamic visual appeal, enhancing the reader’s overall experience.
Key Success Factors
Our approach began with an in-depth analysis of competitors in the existing automotive market, paired with thorough understanding of user behavior. Utilizing the design thinking methodology, we conducted UX strategy sessions to identify user needs and brainstorm innovative solutions tailored to their expectations.
Key activities included creating user personas and mapping customer journeys, ensuring a holistic perspective and diverse input to shape the product and align it with both user and business goals.
Initially, low-fidelity wireframes were designed to outline primary user flows, which were later digitized with a focus on usability and interactive elements.
Interactive elements such as hotspots, buttons and toggles were designed to be touch-friendly, delivering essential information and an intuitive experience across desktops, tablets, and mobile devices.
The design system and wireframes were optimized to ensure a seamless user experience across all devices, maintaining consistent branding, faster loading speeds, and smooth performance.
The IMpact
By implementing a comprehensive UX design process, including prototyping and testing, our team successfully developed a fully custom-built Proton Pakistan official website on React – Native platform.
The website’s interface was strategically designed to spark user’s curiosity, by gradually unveiling information to encourage exploration. Each interaction and button was purposefully designed and developed to enhance user engagement.
Key features included detailed internal page of the vehicles, starting with Design and Performance—core aspects of any vehicle—and concluded with a Customize Your Vehicle section. This feature stood out as the website’s most interactive component, allowing users to rotate the car in a 360-degree view and interact with options such as variant selection, color customization and a DRL button, that visually activated the Daytime Running Lights upon interaction.
On a national level, the website was a success. It achieved a 4x increase in user engagement immediately upon launch and delivered measurable results with over 3,000 online bookings leads within the first month. This performance played a pivotal role in solidifying Proton's strong re-entry into Pakistan's competitive automotive market.
Our Role
Strategy
UX Strategy
Content Strategy
Marketing Strategy
Design
UI / UX Design
Low-Fidelity Prototyping
Graphic Design
Development
Front-end Development
Back-end Development
User Testing
Quality Assurance
Optimization
Marketing
Lead Generation
Google Ads
Search Engine Optimization
Content Writing
Shopify Migration
Enhanced UX
Data-Driven Marketing
Consistant Optimization
Shopify Migration
Enhanced UX
Data-Driven Marketing
Consistant Optimization
