Visual Encoding & Graphical Perception

Coffee Board of IndiaWebsite Redesign

Mentored by Asst. Prof. Pratiksha Bankar, HOD- IDDV, MITID Pune

Course
Visual Encoding & Graphical Perception
Subject
coffeeboard.gov.in
Year
2026
The redesigned Coffee Board of India landing page on a laptop
13+7

navigation items

3 levels0 clicks

to reach live prices

PDFCharts

for market data

GreyGodna

a culturally rooted identity

01 / The problem

Government coffee data, trapped in 2015.

A public information hub serving millions, built like it was never meant to be used.

The original Coffee Board of India homepage
  1. 113+ top-level nav items with no grouping
  2. 2Social icons introduce foreign brand colours
  3. 3A hero carousel with nothing to act on
  4. 4Prices in two units and three date stamps, no trend
02 / UX audit

What was broken.

A visual encoding audit across navigation, design and data.

The original navigation bar

Navigation & IA

  • 13+ nav items, no grouping
  • Market Info buried 3 levels deep
  • News, Advisories and Tenders overlap
  • Trade Enquiry: a mystery item
Original homepage details: carousel, links and text

Visual design

  • Links look exactly like body text
  • No type scale, no hierarchy
  • Hero image, but nothing actionable
  • Social icons in foreign colours
Original market data: a PDF link, a price table and an archive of PDFs

Data & content

  • All prices locked behind a PDF
  • Two units, no conversion
  • Three date stamps on one page
  • No trend chart anywhere
03 / Design research

Rooted in craft, built for now.

Godna, the tribal tattoo art of Jharkhand and Bihar, as the visual foundation.

Godna tattoo patterns on hands and a face, Tribals of Madhya Pradesh
Godna: dots and short lines, repeated into symmetry
Godna-inspired infographic of Karnataka showing 2,42,300 metric tonnes
The interface: a Godna-inspired data map

Colour

  • #0D0A08Base
  • #FF6B00CTA and live data
  • #C8FF00Interactivity
  • #8A7A6ABody text
  • #F5F0E8Headings

Type

Aa

Literata SemiBold Italic
Display, hero headlines

Aa

Inter ExtraBold to Regular
Interface, data, body

04 / The redesign

From wireframe to live page.

Nine sections, one scroll. Drag the page to explore it.

Low-fidelity wireframe of the redesigned landing page
Lo-fi wireframe
The full redesigned Coffee Board of India landing page
Home

EST. 1942  ·  MINISTRY OF COMMERCE, GOI

India’s Coffee
Is A World
Story

From ancient shade forests in the Western Ghats to 60+ countries worldwide — every cup tells a story of sustainability, community, and craft.

Explore Coffees →Today’s Prices →
3.85L MT
$800M+
60+
3 Lakh+
The final landing page · scroll inside · click to open full view
05 / Key decisions

Five moves that changed everything.

From document warehouse to live, navigable experience.

The redesigned navigation bar
01

Nav simplification

20+ nested links collapsed to 7 clear items.

The live price ticker in orange
02

Live prices & stats

Arabica, Robusta and Plantation A at zero clicks.

Godna-patterned ring around the hero photograph
03

Godna art style

A distinctly Indian identity, not a generic portal.

The orange daily report band with Godna leaf patterns
04

Reports & charts

PDF reports replaced by inline price charts.

Grown under ancient shade, with the Godna Karnataka map
05

Infographics

Top coffee-producing states, drawn in the Godna style.

06 / Before & after

Same site. New decade.

Drag the handle to compare.

After: the redesigned landing page
Before: the original coffeeboard.gov.in
Before After
07 / Outcome

What it changed.

Less buried, more built, and honest about what comes next.

Changed

  • Depth-first became surface-first
  • PDF outputs became live charts and card grids
  • Institutional grey became a confident dark identity

Retained

  • The full breadth of content, reorganised, not removed
  • Official seals and government credibility signals

Next steps

  • Build and test a responsive mobile version
  • Validate terminology with farmers, exporters and researchers