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.
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…
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.
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.
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.
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.
Want to see the live site? Visit sicc.coffee.
Running design sprints with the Institute of Physics
Designing a game for Fondation Louis Vuitton