Better Cotton Initiative

The Better Cotten Initiative (BCI) is a global project to create a standard throughout the cotton production and manufacturing process right to the point of sale. Eventually the BCI will be redundant if the Initiative succeeds.

on-IDLE not only re-developed the website from a graphic design perspective, but analysed and provided the UX / information design to transform the way in which the BCI displays and interacts with Member Organisations.

We also continue provide technical support, illustration, design and maintenance as this is a WordPress development as well as advise and implement technical solutions to cater for unique local idiosyncrasies such as internet connectivity, media maturity and localisation internationally.

see more on


Special with- or without image view for countries with bandwidth issues. We created an auto-load low bandwidth view to China, Pakistan, Turkey, etc. by detecting the user's browser's language settings. Browser cookies saves the individual's user preference, with the user able to select with or without image view of the website. 


Hide/show image feature
(automated for low bandwidth regions)


For website pages with exceptionally long or detailed content, we created open- and close menus to allow the user to select which content they prefer to view in detail.

Interactive Map implemented reflecting the unique structure of BCI memberships. This is a Google Maps API integration incorporating multi-level filtering for categories and sub-categories. The unique aspect is that more detail become available as the user zooms into the map itself. 
A list view is also made available to cater for different user preferences.

Saving screen real estate to focus on key calls to action and communication points can alienate foreign language website users. Using intelligently designed overlay menus provides immediate information to the user without having had to first 'click'. A much more efficient and gratifying user experience.


A detail view of how predictive search can be implemented in an elegant an intuitive way. It is however just another way for the user to locate detail level website content concerning a particularly niche topic or name.


The navigation sub-menus rollover mimicks the unique shape in the logotype - difficult to programme, but it really personalises the design and emphasises the brand identity.


With a large number of logos needing to be displayed to satisfy organisational funding and partnership arrangements (as well as lending credibility), an animated footer 'levels the playing field' or exposure each organisation receives by animating and randomising which logos are displayed in the extended site footer.