Welcome to the new, improved, and completely redesigned Coconuts!
We have combined our local city website satellites Coconuts Bangkok and Coconuts Manila under one URL (coconuts.co) and unveiled the following sweet new features:
1.) Adaptive optimization for mobile, tablet, and desktop
2.) An easy Contribute function for readers to submit user-generated content
3.) A Coconuts gamification system that awards readers who actively participate with the site’s content
4.) An Instagram map
We’ll also be launching our third local satellite in Singapore soon, where we will endeavor to cover the dizzying amount of cool things that are happening in the Lion City.
Navigating the new Coconuts
Every piece of content created by Coconuts goes into the Story Stream, an infinite scroll of boxes representing stories that can be opened up and read. Rather than divide content into category sub-pages, Coconuts allows users to filter the Story Stream by tags which appear in the dynamic TagRoll above the Story Stream on all screens. What tags appear in the TagRoll at any given time is determined by our editors – some important tags like News and Features will remain there nearly all the time while others may be very topical and temporary, like Bangkok Governor Election 2013 or Manila Holy Week.
The Story Stream alone is the homepage view of the mobile site, and appears on the lefthand sidebar of the tablet site. On the homepage, the Hero Image – a large photo and headline representing the top story that will be changed multiple times per day – sits above the Story Stream. We’ve also interspersed the Story Stream on the desktop homepage with modules including The Wire (a feed of most recent headlines on Coconuts), an Instagram Map that displays photos on the social network in a realtime city map, and a module showcasing our latest Feature story.
Adaptive re-design
The most important aspect of the Coconuts re-design was making the website adaptive, i.e. optimized for mobile, tablet, and desktop.
Three different versions of Coconuts have been built for each of these screen sizes. When a user visits the site, the device he or she is using will be recognized and supplied the corresponding design, making for a beautiful and seamless reading experience across all screens.
Contribute, Community, Coconuts
Coconuts.co features a brand new Contribute page that that prompts users to submit content with the call to action, “What’s happening in your city?”
Users can then submit any combination of text, photos, and video embeds to create a simple post that is submitted to our back-end to be screened and posted to our Community section. We’ve also enabled users to connect to the Facebook and Instagram APIs and submit photos from those social media accounts.
Coconuts.co also features a simple gamification system, where user-generated content can be awarded “coconuts” from users, which will be recorded in a “coconut count” that appears on each post. Later, users who accumulate the most “coconuts” will be eligible for prizes and special promotions.
Instagram Map
We’ve tapped into the Instagram API to create an almost realtime map of geo-located photos as they are being uploaded on the social network in your city. Log in with your Instagram account to see photos of people you follow, celebrities, and the Coconuts Instagram account.
