Redesigning Shiv PG House: From Loud to Trustworthy
title: "Redesigning Shiv PG House: From Loud to Trustworthy" description: "The original site was bold, dark, and aggressive. It looked like a nightclub, not a home. Here's how I rebuilt it from scratch with warmth, clarity, and a CTA that actually converts." date: "2025-08-23" category: "ENGINEERING" readTime: "3 min read" tags: ["Web Design", "Client Work", "HTML/CSS", "Conversion Design"]
Shiv PG House needed a website that could do one job well: convince a student or working professional, scrolling on their phone, that this was a safe place to live — and get them to call.
The old site didn't do that job. It did the opposite.
The problem
The original design was dark-background, high-contrast, neon-accented — a visual language borrowed from nightlife and gaming, not housing. For a PG that's selling safety, routine, and home-cooked meals, that mismatch mattered. Nobody scrolling for a place to live reads "loud and aggressive" as "trustworthy."
Beyond the tone problem, the structure worked against the actual goal:
- No clear pricing hierarchy. Numbers were present but not organized as a decision — a visitor had to hunt for what they'd actually pay.
- Weak path to contact. Calling or messaging wasn't the obvious next step at every scroll depth.
- Visual noise over trust signals. The site spent its energy on style, not on the things that actually reduce a renter's uncertainty — real photos, a real location, a straightforward way to ask a question.
The rebuild
I stripped the aesthetic down to what a PG actually needs to communicate: warmth, clarity, and proof.
Palette shift. Out went the dark, high-contrast scheme. In came a warm off-white background, soft ink-black text, and a single terracotta-brick accent color — a palette that reads as "home," not "venue."
Pricing as a decision, not a wall of numbers. The two accommodation options (with and without food) are now laid out side by side as a direct comparison, with the food-plan option visually marked as the recommended choice. A visitor should be able to decide in five seconds, not decode a paragraph.
Contact, always one tap away. A sticky call-and-WhatsApp bar sits at the top of the screen on every scroll position — the single biggest structural change. Getting in touch is never more than a thumb-reach away, on any device, at any point in the page.
Trust before persuasion. Instead of leaning on style to convince, the redesign leans on legibility: a clean facilities grid, an honest availability note, real landmarks, and a map — the things that actually lower the risk of a decision like this, rather than dressing up the page to feel more convincing.
What changed, concretely
| Before | After | |
|---|---|---|
| Background | Dark, high-contrast | Warm off-white |
| Accent | Neon, multi-color | Single terracotta accent |
| Pricing | Unstructured | Side-by-side comparison cards |
| Contact | Buried in scroll | Persistent sticky call/WhatsApp bar |
| Tone | Loud, aggressive | Calm, direct |
The takeaway
A landing page's visual identity has to match what it's actually selling. A nightclub aesthetic might work for an actual nightclub — it works against a PG house, where the entire pitch is "this is a safe, well-run place to live." Matching tone to trust was the real fix here; the color palette was just the visible part of it.
Stack: HTML, CSS, vanilla JS · Role: Design + Development, solo · Client: Shiv PG House, Dankaur