Developing the South India Coffee Company website

Goal

Develop a responsive website to connect coffee roasters with the South India Coffee Company


Products

The Henle Library icon

Roles on the project

  • Front-end Development
  • UI Design
  • Technical SEO

Interesting in working together?

For enquiries about design or engineering work or if you would just like chat, get in touch via email or phone!

Email
Call
Developing the South India Coffee Company website

The South India Coffee Company are 5th generation coffee planters from Coorg in India. Recently they have started trying to import coffee into the UK and European markets and needed a website to showcase their various crops to European coffee roasters. Founder Akshay Dashrath asked me to develop a responsive website from the initial desktop designs they already had.

The coffee plantation in Coorg

Finalising the designs

First, I went through the desktop designs and identified elements that would be problematic on small devices. One of the biggest problems was the navigation bar.

For mobile devices I designed a taller navigation bar that could fit all of the links, avoiding the dreaded hamburger menu. To avoid obscuring a large chunk of the viewport I engineered the nav bar to disappear when the user scrolled down but animate back in if the user scroll upwards to allow easy access to the navigation.

Another issue was that the designs intended the ‘Order Samples’ call-to-action (CTA) to bring up an email prefilled with order details. Unfortunately this would cause frustration for many users who don’t use the default mail client, leading to this familar sight…

The Apple Mail welcome screen

To solve this I instead added copy above the button instructing the user to get in touch if they wanted samples and all the CTA’s to link to the contact page where they are given multiple ways to get in touch.

New order samples section

Developing the website

The initial designs featured some nice editorial-style image arrangements. In order to recreate them I used a modified version of the Webflow Responsive Flexbox Grid which made building these awkward layouts a breeze.

Example of the image grids

Another requirement of the site was that it should be easy for Akshay (a developer by trade) to add new crops to the site.

To help with this I wrote the CSS in the style known as functional CSS. This style favours composition of classes over writing a class per element. This means that when Akshay comes to add a new coffee crop page and needs to change the colour of the navigation bar, all he needs to do is remove the class g_blueBG and add the class g_redBG.

This approach also means that developers who are new to the codebase can understand the layout from reading the classes in the HTML instead of having to dig through an over-sized CSS file.

Comparing CSS classes

The designs for the crop pages featured large background imagery showcasing the taste of the coffee. To avoid Akshay having to go hunting for new images everytime he adds a new crop, I built up a free image library representing various flavours the coffee could have.

Example of the tasting notes imagery




Want to see the live site? Visit sicc.coffee.

Next

Redesigning the Henle Library for Android

Previous

Rebranding from Touchpress to Amphio

Interesting in working together?

For enquiries about design or engineering work or if you would just like chat, get in touch via email or phone!

Email
Call

© 2018 Samuel Holyhead. All rights reserved.

This website has been build according to the principles of Progressive Enchancement. It collects no personal information, nor does it pass on your personal information to any third party services.

Typeset in Merriweather and Noto Sans.