Do you know that feeling when you see a picture of a model, and you want to buy exactly what they are wearing? Or bumping into an especially tasty looking recipe served in that exact dish that you always dreamed of for your kitchen? Hot Spot Is an interface designed exactly for that purpose.
The flexible plug-in that we have developed connects with the Mako website and allows the editors to add clickable areas to any image and provides additional information about the objects appearing in the image.
With this project we had a huge challenge – creating an interface and developing the component for an existing content site, without requiring the additional development of the website itself. Each component that we developed allowed the product to be embedded with a short JS code without damaging the rest of the site's components, which was added as a complementary content layer, with no sense of separation for the user.
On the desktop version - when moving the mouse over the image (mouse-over) icons appear over the objects that contain additional information. With one click on the desired Hot Spot - a pop-up appears displaying any information that the user would like to know about the product.
On the Mobile version - the icons appear on the image, and when tapped, a pop-up appears with additional product information.
Additionally, users can share information about products that they like with their friends, or products that they think that their friends would like too - which increases the interaction with the written content, and increases its exposure to additional users.
The interface that we created provides content editors with a lot of flexibility: they can implement unlimited points of interest to one single image, control their locations on the actual image, and even change their appearance. These parameters have advertising and marketing values - that allow different advertisers promote their products, as an integrated and complementary part of the mako content and browsing experience.