Croma My Dream Home
An interactive product catalogue for India's biggest chain of electronics stores
“An interactive website experience that inspires you to explore the Product catalogue from India's biggest chain of Consumer Electronics!”
Creating Responsive HTML5 Catalogue App using PSD mockups provided by Yellow Slice Team. There were 4 rooms that had to be created: Living Room, Bed-Room, Kitchen and Study-Room. Each room had respective links to the product category pop-up. For instance, Clicking on Air-Conditioner will open up the pop-up containing necessary information on all the Air-conditioners available in stores.
WORKFLOW & COMMUNICATION
I have been working with Yellow Slice on many freelance projects for over 4 years and this facilitated a great design-code integration. We involved our tech partner, Fafadia Tech to help us with Python code and hosting the website.
Liquid, Responsive and optimised
The UI is liquid and responsive and so are the pop-up screens.
Shareable URLs & Auto-logins
All the page states, including popups, are saved using a custom URL. One can open up any page, popup and his/her offer using the custom URL. During the offer period, Croma sent the URL of this site (along with customer's email added as a parameter) to emails that were eligible for an offer. The Offer for each user was then dynamically requested from the server and added to local storage. Thus, enabling sharable-autologin URLs.
User's offers and preferences were saved using Local Storage API.
Each Product has a unique URL so that the same can be shared across platforms and devices.
Magic Of Handlebars(Templating Engine)
We used Handlebars extensively for popups. There were about 80 products when this website was launched. Using a template engine is one of the best ways to handle content for websites that have dynamic content having more or less same markup.
The panorama feature was developed using DDPanaroma plugin.
Ease of modifications
The client brief mentioned that the website/App UI should be developed in a way that products can be added or removed, rooms could be modified and the metadata can be added or removed easily by designers and junior developers. So, I developed the architecture in a way that the UI can be modified by changing the background image and modifying the underneath JSON file.
A highly interactive single-page HTML5 Website for an Event company based in Istanbul, Turkey. Read More
My Portfolio Website
From Critical Rendering Path to Responsive Images, this website was created to achieve the best possible rendering and perfomance. Read More
A dedicated Desktop and Mobile website experiance for an Ice-cream brand. Case Study