HPCL – CMS Redesign & Mobile Web Application

Frontend Developer – Individual Contributor · 2018 · 3 months · 1 person · 5 min read

Updated key CMS modules and built a fresh mobile web application for HPCL using HTML, SCSS, and JavaScript — delivering a cleaner, device-friendly interface in three months as a solo contributor.

Overview

Owned two frontend streams for HPCL (Hindustan Petroleum Corporation Limited) — refreshing selected CMS screens and building a dedicated mobile web app from scratch. As the only frontend developer, I delivered both workstreams in a tight three-month window using semantic HTML, modular SCSS, and vanilla JavaScript.

Problem

HPCL's CMS had grown uneven over time, with different modules showing inconsistent visual patterns and usability issues. At the same time, field users needed a lightweight mobile interface, but the CMS was not built for phones. The right answer was a careful UI refresh for the CMS plus a separate mobile web application designed for the devices people actually used.

Constraints

  • CMS module redesigns must be non-breaking — existing functionality had to be preserved through the visual overhaul
  • Mobile web application built without a frontend framework — vanilla HTML, SCSS, and JavaScript only
  • Three-month timeline across two parallel workstreams as a solo contributor
  • Mobile web application must perform well on mid-range Android devices common among field staff
  • Enterprise environment with strict UI consistency requirements across HPCL-branded products

Approach

Started by reviewing the selected CMS screens and isolating the worst visual and usability issues. Updated the interface with cleaner layouts, stronger hierarchy, and consistent styling while keeping the underlying functionality intact. At the same time, built a mobile web app from the ground up using semantic HTML, modular SCSS, and vanilla JavaScript — focusing on fast load times, touch-friendly controls, and a calm, easy-to-use experience on mobile networks.

Key Decisions

Vanilla HTML, SCSS, and JavaScript for the mobile web application — no frontend framework

Reasoning:

HPCL's field staff worked on mid-range Android devices with limited mobile data. A framework-free mobile web app meant smaller payloads, fewer dependencies, and a more reliable experience for the people using it every day. It also kept the codebase easier to maintain for any frontend engineer.

Alternatives considered:
  • Angular or React with server-side rendering for performance
  • React with a lightweight bundler
  • Progressive Web App with service worker for offline support

Additive CMS module redesign without structural refactoring

Reasoning:

A full refactor in a short solo engagement carried too much regression risk for a production system used by operations staff. Improving visuals and consistency through additive CSS and markup updates allowed meaningful change without disturbing the existing business logic.

Alternatives considered:
  • Full component-level refactor of selected modules
  • Replace CMS modules with new Angular components
  • Apply a global theme update only, no module-level changes

Mobile-first layout with progressive enhancement for larger screens

Reasoning:

The primary users were field staff on smartphones, not desktop users. Starting with a mobile-first layout meant the app felt natural on phones and then grew gracefully into larger screens.

Alternatives considered:
  • Desktop-first responsive layout with mobile breakpoint overrides
  • Fixed-width mobile layout (no responsiveness)
  • Native mobile app (outside of scope and timeline)

Tech Stack

  • HTML5
  • SCSS
  • JavaScript (ES6+)
  • CSS Custom Properties
  • Responsive Design
  • Mobile-First Layout

Result & Impact

  • CMS redesign + mobile app
    Workstreams Delivered
  • Solo contributor, 3 months
    Delivery Model
  • Mid-range Android, mobile networks
    Target Devices
  • Zero — vanilla HTML/SCSS/JS
    Framework Footprint

The CMS refresh gave HPCL operations staff a cleaner, more consistent interface across the modules they use every day. The mobile web app provided a fast, touch-friendly experience for field staff on the devices and connections they actually rely on. Delivering both workstreams as a solo contributor showed strong ownership and the ability to move between design and implementation quickly.

Learnings

  • Vanilla JavaScript and CSS remain a strong choice for mobile web apps targeting users on constrained devices and networks — framework convenience can come with a real cost in those environments
  • CMS redesigns are safest when they respect the existing system — additive improvements often deliver the most reliable value without creating regression risk
  • Mobile-first layout is more than just responsive CSS — it forces clarity about who the main user really is
  • Delivering two parallel workstreams alone requires disciplined context-switching and a clear weekly plan to keep both streams moving
  • Enterprise brand standards are a helpful constraint — they make the final interface feel more coherent and trustworthy
  • Building without a framework makes the underlying patterns more obvious and easier to maintain over time

CMS Module Redesign

Audited and redesigned selected modules of HPCL’s internal CMS to improve visual consistency and usability:

  • UI consistency audit identifying mismatched patterns, outdated visual styles, and information hierarchy issues across the selected modules
  • Visual modernisation applying refreshed typography, color, spacing, and component styles to align with HPCL brand standards
  • Information hierarchy improvements restructuring layouts to surface the most relevant data and actions for CMS users
  • Form and input redesign updating data entry interfaces with clearer labels, better grouping, and consistent feedback patterns
  • Additive implementation approach layering design updates onto existing markup so the underlying functionality stayed intact

Mobile Web Application

Built a standalone mobile web application from scratch using HTML, SCSS, and vanilla JavaScript:

  • Mobile-first responsive layout designed for smartphone viewports and progressively enhanced for tablet and desktop
  • Touch-optimised interactions with appropriately sized tap targets, simple navigation, and minimal hover-dependent behaviors
  • Semantic HTML structure built a clean document outline and accessible defaults with no framework overhead
  • Modular SCSS architecture organising styles across base tokens, layout utilities, and component-level partials for easier maintenance
  • Lean delivery with a zero-framework footprint, minimal JavaScript, and lightweight assets tailored for mobile network conditions

Frontend Engineering

Applied engineering rigour to both workstreams despite the solo, fast-turnaround nature of the engagement:

  • CSS custom properties used for brand color and spacing tokens across both the CMS updates and mobile application, enabling consistent theming from a single source of truth
  • ES6+ JavaScript patterns — modules, arrow functions, destructuring, and template literals — kept the vanilla codebase modern and readable without a build toolchain
  • Cross-browser and cross-device testing across Android browsers and desktop environments to ensure consistent rendering
  • Responsive layout validation across a range of viewport sizes and device pixel ratios to confirm the mobile application worked well on real target hardware
All projects