PERTAMINA NEW & RENEWABLE ENERGY
Navigating the Energy Landscape with Ease
Optimizing the Landing Page of a Renewable Energy Company Website: Enhancing User Engagement, Improving Usability and Driving Sustainable Impact
Client
Pertamina New & Renewable Energy
as Product Designer @ Sagara Tech
Platform
Responsive Website
My Role
Product Designer
Tools
Figma, Google Meet
Timeframe
3 Months
Introduction
Pertamina New & Renewable Energy, commonly abbreviated as PNRE, is a subsidiary of Pertamina that operates in the field of renewable energy-based power generation. PNRE is dedicated to developing and managing renewable energy projects.
Project Objective
Revamp the existing website and improve the overall user experience, enhance brand consistency that will drive overall website engagement and online presence.
01 / Product & Desk Research
Indonesia is actively working towards a sustainable energy future, with a key milestone being the integration of 23% renewable energy into its national energy mix by 2025 (RUEN, 2016).
As the world increasingly focuses on sustainable energy solutions, Pertamina NRE, a subsidiary of Pertamina, understood the critical role of a strong online presence in shaping public perception and driving their mission forward.
THE PROBLEM
The current online presence didn't reflect their growing importance.
🤔 Outdated visual style
🤔 Hard to prioritize information
🫠 “I’m not reading all of these!”
☹️ Difficult to navigate
They were facing a challenge. Their online presence didn't reflect their growing importance. Their website needed to not only introduce the company but also build awareness and solidify their reputation as a leader in sustainable energy.
PROJECT REQUIREMENT & SCOPE
Working with client and stakeholders in a public sector entity.
Business Objectives
Improve brand awareness
Strengthen Brand Reputation
Improve Stakeholder Engagement
Stakeholder Goals
Easy Access to Information
Compliance Information
Transparency and Accountability
Constraints
Existing branding guidelines
Content Availability
My Responsibilites
Overseeing the overall product design process
Communicating design decisions to stakeholders
02 / Define
Who Are the Audiences?
The stakeholders invovled presented a unique opportunity for Pertamina NRE.
*photo for illustration purpose only
Name: Budi Santoso
Age: 45
Occupation: Government Regulator
Location: Jakarta, Indonesia
Description
Budi is a government regulator at the Ministry of Energy and Mineral Resources, specifically focusing on renewable energy compliance and policy implementation. He wants to ensure that all companies relating to renewable energy complies with all relevant regulations and environmental standards.
Needs & Wants
Verify Pertamina NRE's compliance with relevant regulations and standards.
Assess Pertamina NRE's contribution to Indonesia's renewable energy targets.
Monitor Pertamina NRE's environmental impact and sustainability practices.
Pain Points
Difficulty finding a specific information.
Lack of transparency and inefficient communication.
03 / Ideate
We focused on generating a broad range of creative solutions to address the identified user needs and business objectives; focusing on user needs, content structure, and visual design.
How might we
make complex technical information about renewable energy projects easily accessible to government regulators?
How might we
effectively showcase Pertamina NRE's expertise and project portfolio to potential investors and partners?
How might we
enhance the general public's understanding of renewable energy and Pertamina NRE's role in promoting sustainability?
Proposed Solutions
Based on the insights gained during the Ideate phase and a deep understanding of user needs and business objectives, we developed a set of proposed solutions for the Pertamina NRE website redesign.
Redesign Overall Visual
Focusing on clean and modern layout, enhance accessibility by using fonts that are easy to read, and using color palette that adhere to PRNE’s brand identity.
Reorganize Information Hierarchy
Emphasize key points, develop clear and organized layout for website content for effective communication, avoiding information overload that leads to clear user experience.
Interactive Data Visualizations
We proposed the implementation of interactive charts, graphs, and maps. These visualizations allow users to quickly grasp key data points and trends.
Establishing a Design System
Providing guidelines and components used that ensures unify and consistency across the website, to optimize design and development processes.
04 / Solutions
Design System
To create a more cohesive and modern interface, I developed a design system, including a component library, design guidelines, and a style guide. This resulted in improved aesthetics and usability.
Primary
Main color of product and brand. Used for buttons, links, inputs
50
#EFFEFC
100
#C8FFF6
200
#90FFED
300
#51F7E3
400
#1DE4D2
500
#05C7B9
600
#00A198
700
#05807B
800
#0A6562
900
#0E5352
950
#004748
Secondary
Main color of product and brand. Used for buttons, links, inputs
50
#F9FBEA
100
#F0F5D2
200
#E1ECAA
300
#CBDE78
400
#B3CD4E
500
#9BB931
600
#748E22
700
#596D1E
800
#48571D
900
#3D4A1D
950
#1F280B
Neutral
Main color of product and brand. Used for buttons, links, inputs
25
#FCFCFD
50
#F6F6F6
100
#E7E7E7
200
#D1D1D1
300
#B0B0B0
400
#888888
500
#6D6D6D
600
#5D5D5D
700
#4F4F4F
800
#454545
900
#3D3D3D
950
#2E2E2E
Futura
Ag
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Futura Regular
Futura Medium
Futura Bold
A glimpse of the design system I established!
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Sustainability Policy
Sustainability Policy
Sustainability Policy
With a focus on developing clean energy and energy efficiency programs, Pertamina New & Renewable Energy strives to build a more environmentally friendly world. A comprehensive sustainability policy serves as the foundation for the company to achieve its long-term goal of creating a more sustainable future.
2024
Sustainability Policy Document (Q3 2024)
Download
Collect Data
Gather and analyze relevant data to gain insights into your energy consumption patterns and identify areas for improvement.
Data Quality Review
We conduct rigorous data quality reviews to identify and rectify errors, inconsistencies, and missing data.
Solar Energy
Plaju Solar PV
Pertamina Starts Operating 2.25 MW Solar PV at Plaju Refinery
Design Solutions
Landing Page
Before
After
Color Adjustments
Adjustment of colors to adhere to the company’s brand identity, enhance accessibility and creating a more clean and subtle look.
Enhanced Cards Section
Reorganize information in cards, providing user more context and emphasizing key points.
Before
After
Color Adjustments
Adjustment of colors to adhere to the company’s brand identity.
Enhanced Footer Section
Creating an overall cleaner look in the footer, using clear and concise links, eliminating unnecessary information, and using white space to improve readability.
New Section
ESG Commitment
A new ESG section is added, presenting Pertamina NRE’s ESG initiatives through visually appealing cards. A clear call to action encourages deeper exploration.
ESG Score
The ESG Score is presented with numbers and concise data visualization to emphasize credibility and increase transparency of Pertamina NRE.
ISO Certifications
Highlighting Pertamina NRE's ISO Certifications and inviting users to explore more with 'See All Certifications' Call to Action button.
Sustainability Page
Before
After
Color & Image Adjustments
Adjustment of colors to adhere to the company’s brand identity, creating a more clean and subtle look. Using high-quality and informative image to increase professionalism in the website.
Downloadable File Organization
Reorganize downloadable files by using expandable accordions that contains title and brief description, that enables users to navigate the desired file easily.
Enhanced Cards Section
Redesign the card section with a fresh, modern look to improve visual clarity.
Environment, Social and Governance Page
Before
After
Downloadable File Organization
Reorganize downloadable files by using expandable accordions that contains title and brief description, that enables users to navigate the desired file easily.
Visual Enhancements with Illustrations
Use illustrations to describe every ESG aspect, making it more visually appealing to the users and create a more memorable user experience.
About Us Page
Before
After
Organized Information Hierarchy
Reorganize layouts and information, by determining the most important information, emphasizing key points and divide informations into smaller pieces.
Color & Image Adjustments
Adjustment of colors to adhere to the company’s brand identity, creating a more clean and subtle look. Using high-quality and informative image to increase professionalism in the website.
New Section
Optimized Content Navigation
Using a Scrollable Card Carousel to improve content discoverability and user engagement. This interactive feature allows users to easily explore various topics and information.
Group Structure Page
Before
After
Redesign the Overall Visuals
Adjustment of colors to adhere to the company’s brand identity, creating a more clean and subtle look. Modern typography is also utilized for easier readability and visual appeal. Using high-quality and informative image to increase professionalism in the website.
Organized Information Hierarchy
Reorganize layouts and information, by determining the most important information, emphasizing key points and divide informations into smaller pieces.
Before
After
Redesigned Organization Chart
Redesigned the organization chart to a more modern and cleaner look, enhancing readability and consistency with the website's overall aesthetic.
Other Services Page
Before
After
Redesign the Overall Visuals
Adjustment of overall layout creating a more updated, clean and subtle look. Modern typography is also utilized for easier readability and visual appeal. Using high-quality and informative image to increase professionalism in the website.
Usage of Intuitive Icons
Using icons to convey informations to the user, enhancing visual clarity, and information accessibility.
Before
After
Optimized Content Navigation
This interactive feature enables users to scroll content, find information they need and increase engagement and overall experience in the website.
EV (Electric Vehicle) Page
Before
After
Reorganize Information Hierarchy
Determine and emphasize the most important information with cleaner layouts and typography.
Interactive Carousel
Clickable carousel is implemented to improve user engagement and content discoverability. This interactive feature allows users to easily explore multiple content options.
Hydrogen Page
Before
After
Redesign the Overall Visuals
Refined the overall layout with a cleaner, more modernized design. Simple typography is also utilized for easier readability and visual appeal. Using high-quality and informative image to increase professionalism in the website.
The overall look is updated to current design trend while still ensuring that it’s aligned to Pertamina NRE’s branding and value proposition.
Reorganize Information Hierarchy
Reorganize layouts and information, by determining the most important information and emphasizing key points.
05 / Reflection
While a landing page project might initially appear straightforward, we discovered its complexity, particularly in navigating stakeholder engagement. Effectively communicating technical processes to non-technical stakeholders and ensuring their meaningful participation proved to be a significant learning experience for myself.
Given the established brand guidelines, a key consideration was balancing creative exploration with the need to ensure strict adherence to Pertamina's standards and procedures. This required a strategic approach to design, prioritizing brand consistency while seeking opportunities for subtle innovation.
Working on a project for a major organization like Pertamina marked a significant milestone in my professional development. I am grateful for the opportunity to contribute and for the collaborative experience shared with my team; including the project manager and development team!
Let's see the live version!
Thanks for reading! ✦
