Work
← all work

Case study

Deccan Produce

A mobile-first website for an Indian exporter of fresh fruit, fruit pulps and agri commodities.

Deccan Produce home page on desktop: the title with a painted grape vine over a blue sky, and a farm field with plot signs below
Deccan Produce home page on a phone

01 · The brief

Deccan Produce has exported fruit from India since 1997. Their site was hard to use on a phone, hard to update, and still listed expired certificates. Importers checking a supplier got a weak first impression.

The old Deccan Produce home page: a green menu bar, a mango pulp slider and event posters
The old site: a slider, event posters, and news that stops at 2023.

02 · Research

Who visits an exporter's website?

An importer in Europe, the CIS, the Middle East or the Far East, checking a supplier before asking for prices.

  1. 01Buyers check detailsRange, specs, seasons, certificates and packing. Then they ask for prices.
  2. 02Show the produceThe old site didn't show the fruit well.
  3. 03Their wordsKeep the site's own content and labels. No invented facts.
  4. 04Staff keep it currentDeccan's team must add events and update certificates without a developer.

03 · Design

A farm you can scroll: sky, field and plot signs.

Every product stands in the field as a plot sign, like a demonstration farm.

palette

  • #B9D4F8
  • #1F5BE6
  • #0A2FB8
  • #005F37
  • #DDF247
  • #F2F6F5

sky #0A2FB8 · #1F5BE6 · #B9D4F8 · green #005F37 · lime #DDF247

type

Deccan Produce

Plot 04 · Grapes

Fraunces for statements, Barlow Condensed for signs, Figtree for reading

tried vs. chose

framed photo hero

The chosen hero: blue sky over a farm field with a Welcome sign and plot signs

sky + field + signs

A cool, sky-first scene instead of a warm photo, so the products could live inside it.

04 · Build

From a field of signs to a product page.

Designed as HTML prototypes first, then built in Next.js. The hero is one scroll, and every sign opens into its product.

  1. step 1Scroll down
  2. step 2Field rises
  3. step 3Tap a sign
  4. step 4It grows into a card
  5. step 5Product page

Built with

05 · Final screens

The result

A grapes plot sign opened into a product card on a phone
sign card
The grapes product page on a phone, with painted grapes and the page title
product page
The dispatch board listing Europe, CIS, Middle East and Far East on a phone
dispatch board

A phone-first site where an importer goes from a field of signs to specs, seasons and certificates in a few taps.

11 products

one product template, filled from Deccan's own site

8 certificates

each linked to Deccan's own PDF

Status: live preview, kept out of search until launch. The CMS comes next, then the move to deccanproduce.com.

Keep exploring

next projectMr. Plastic Repairphone-first site for a Toronto bumper welding shopneed a site like this?Say hipatelvivek.v7@gmail.com