# DGH auction portal UX case study URL: https://kalpana-srivastava.pages.dev/work/dgh > Revamping a 16-year-old government auction portal, without rebuilding it. [← All work](https://kalpana-srivastava.pages.dev/work) C1 India · Web portal # DGH auction portal Revamping a 16-year-old government auction portal, without rebuilding it. _\[Image: The revamped DGH e-tendering portal in a browser window on a blue background, showing the header, navigation, an offshore platform hero with a login card, and the About DGH section.\]_ My role UI/UX designer Timeline 2023–24 Platform Web portal Team Client (DGH), project manager, developers Tools Figma The Directorate General of Hydrocarbons (DGH) runs its oil and gas tenders and auctions on an e-tendering portal that is 16 years old. I revamped its design and created a style guide for it. Requirements came from the client and the project manager, and developers were involved from the start, because the old platform limited what we could change. 16 years old, the portal we revamped without a rebuild 1 style guide, so every page follows the same rules Day 1 developers involved, to check what the old platform could support The problem A 16-year-old e-tendering portal for oil and gas blocks. It worked, but it looked and felt its age. The brief Revamp the design for the client, with requirements from DGH and the project manager. The constraint The platform was too old for big changes. We could not introduce many new things, so the design had to work within it. Shown here The revamped home page and the style guide colours behind it. ## The challenge DGH works under India’s Ministry of Petroleum and Natural Gas. Companies use its portal to register, sign in with a digital signature certificate, follow tenders and bid in rounds such as the Open Acreage Licensing Policy (OALP). The portal had been running for 16 years. A full rebuild wasn’t an option. The job was to give the portal a clear, modern design while keeping what was underneath it. > How might we make a 16-year-old portal feel clear and trustworthy, when we can change how it looks far more than what it does? ## Feasibility first I gathered requirements and information from the client and the project manager. Before designing anything, I brought the developers in to learn what the old platform could and couldn’t support. Their answers shaped every decision that followed. - Client (DGH) Requirements, content and sign-off - Project manager Scope, information and priorities - Developers What the 16-year-old platform could support, from the very start 1. Requirements 2. Feasibility check 3. Style guide 4. Design 5. Review 6. Refine Each design was checked with developers before it was finalised ## Designing inside the box There were many restrictions from development, because the portal is 16 years old and we couldn’t introduce many new things. So I treated the platform as a fixed frame and designed inside it. Fixed by the 16-year-old platform - Existing features only - The same pages and menu items - The same login and registration - Tender data in its existing tables - Simple, standard components My design space - A clear hierarchy: login and tenders first - One style guide for colour, type and components - A cleaner header and navigation - Tabs to group the tender lists - Consistent buttons, tables and icons - A calmer, more trustworthy look for a government portal ## The revamped home page Scroll inside the frame to see the whole page. _\[Image: The revamped DGH e-tendering home page: header with Register, blue navigation, offshore platform hero with a login card, a news bar, About DGH with a map of exploration blocks, an OALP Bid Round button, and the Tender’s List with tabs, search and a table.\]_ Bidders and visitors Home “Where do I sign in, and which tenders are open?” What to look for - Login on the first screen, beside the hero - The digital signature menu first in the navigation - About DGH and the current bid round in the middle - Tender lists in tabs, with search and actions on each row ## Three design decisions ### Decision 01: Let returning bidders in straight away **Why:** Many people who open the portal already have an account and come to work on a tender. _\[Image: Top of the DGH portal: logo, home, phone and help icons, a Register button, the navigation with Digital Signature Certificate first, an offshore platform hero, a login card and a news bar.\]_ [1](https://kalpana-srivastava.pages.dev/#top-1)[2](https://kalpana-srivastava.pages.dev/#top-2)[3](https://kalpana-srivastava.pages.dev/#top-3)[4](https://kalpana-srivastava.pages.dev/#top-4)[5](https://kalpana-srivastava.pages.dev/#top-5) 1. 1 Login on the first screen The login card sits on the hero, so returning bidders don’t have to look for it. 2. 2 One primary action for newcomers Register is the only filled button in the header. Home, phone and help stay as quiet icons. 3. 3 Digital signatures first Bidders need a digital signature certificate before they can bid, so it leads the navigation. 4. 4 The sector in one photo An offshore platform tells visitors what the portal is for before they read a word. 5. 5 News without a takeover Announcements scroll in one slim bar under the hero, with arrows to move between them. ### Decision 02: Context before the tenders **Why:** Some visitors are companies new to bidding with DGH. They need to know who they are dealing with. _\[Image: About DGH: the national emblem beside two paragraphs about the Directorate General of Hydrocarbons, a map of India showing exploration blocks, and an OALP Bid Round X button.\]_ About DGH pairs the national emblem with a map of exploration blocks, and ends in one button for the current bid round. ### Decision 03: Group the tenders, keep the table **Why:** The tender data stays in tables. The design could still make it far easier to find the right list. _\[Image: Tender’s List: tabs for Group List, New Tenders, Tenders In Progress and View Amendments, a search field with a Search button, and a table with category, group ID, group name and action icons.\]_ [1](https://kalpana-srivastava.pages.dev/#tenders-1)[2](https://kalpana-srivastava.pages.dev/#tenders-2)[3](https://kalpana-srivastava.pages.dev/#tenders-3)[4](https://kalpana-srivastava.pages.dev/#tenders-4)[5](https://kalpana-srivastava.pages.dev/#tenders-5) 1. 1 Four lists, one place Group List, New Tenders, Tenders In Progress and View Amendments are tabs, not separate pages. 2. 2 Search by what people know Group ID or NIO group name, in one field with a clear Search button. 3. 3 A calm table A light blue header and alternating rows make a dense table easier to scan. 4. 4 Actions on every row View and details icons sit in their own column, in the same place on every row. 5. 5 More when you need it The home page shows five groups, with a link to the full list. ## A style guide for an old platform To keep the revamp consistent across a portal this old, I created a style guide for colour, type and components. Every page follows the same rules, and developers had one reference to build from. The colours below are sampled from the design. - DGH blue #0262ae Navigation, buttons, tabs and links - DGH red #c4302b The logo - Table blue #a9c4e9 Table headers - Charcoal #151515 Footer ## Outcome The DGH portal kept the platform it was built on, but gained a clear, consistent design: login and tenders first, context in the middle, and one style guide behind every page. Because developers checked feasibility from the start, the design could be built on the existing platform. ## What I learned A revamp with heavy technical limits is still a design problem. Knowing the limits on day one turned them into a clear brief: change what people see and how it’s ordered, and leave alone what the platform can’t change. [Next case studyRipples VelocityShowing whether training actually changes the way people work.](https://kalpana-srivastava.pages.dev/work/ripples-velocity)