Shon J.

Projects Designed and shipped with AI

Shriram Credit

A lending website that explains loans against mutual funds and shares.

Role
UI, UX and front end, built with AI
Years
2026
Status
Live
Platform
Web

Web · 2026

Shriram Credit's design refresh set a new visual standard across the Shriram ecosystem.

What every page answers

  1. What you pledge

    Mutual funds or shares, in plain words

  2. What you keep

    What stays yours while the loan runs

  3. What it costs

    A calculator that explains its answer

  4. If markets move

    What happens when the pledged value falls

The problem

Most visitors had never taken this kind of loan, so they needed to know what you pledge, what you keep, what it costs and what happens if markets fall. And the source documents disagreed.

  1. Before: A loan product most visitors have never taken

    After: Pages that explain what you pledge, keep and risk

  2. Before: Content and product teams' figures disagreed

    After: Every disagreement routed back to the team that owns it

  3. Before: Two dozen pages to keep consistent

    After: One design system, so every page stays in step

Decisions

  1. Decision 1

    Lead with motion, imagery and type

    I led the refresh with rich motion, strong layouts, imagery and a clear type hierarchy, responsive on phone and desktop.

  2. Decision 2

    A system the build enforces

    Every colour, size and motion comes from one shared system, checked on every build, so no page drifts.

    Considered A style guide written beside the site

  3. Decision 3

    Rank content by reader cost

    We kept one open content list, ranked by what each item costs a reader.

How it was made

A complete design refresh, and a real step up in my craft since SFS. I built the UI, UX and front end with Claude Code inside a lean product team, going back to Figma for anything AI could not work out.

  1. 1

    Built with Claude Code

    I built every page with Claude Code, with a design check inside every build.

  2. 2

    Back to Figma

    Where AI could not get a layout or detail right on its own, I refined it in Figma and carried it back into the build.

  3. 3

    Phone and desktop

    I tuned the motion, imagery and type to work as well on a phone as on a desktop.

  4. 4

    Reviewed in place

    ProofKit runs across the whole site, so any reviewer can raise a finding right from the page with one key.

Made with: Astro and TypeScript on Cloudflare Workers, D1 and Durable Objects, built with Claude Code.

Get in touch