Each big product category from an e-commerce should provide users with access to an organized way to break it in subcategories, featured product or even offers from that specific category. Kohl's was not an exception from this beneficial practice.
Normally, when the user enters the category "Women", there is a landing page that will provide more information about main interests for that category, for example "Women tops", "Women bottoms", "Swimwear", "Shop by range", "Shop by brand" and much more.
Here I was assigned the creation of the landing page for the "Innovative Home" category, which include products in the range of smart devices such as lighting, security systems, cameras, voice assistants, door locks, thermostats and much more.
The approach for this project was to implement designs based on CSS Grid. Most of the designs created were inspired by the Bootstrap design blocks, which will allow development teams to maintain consistency.
Probably the most challenging part of the project was creating stories that reflect the lifestyle and benefits from acquiring products that will help users to create their own customized smart home without the need of any changes in terms of electric or structure improvements.
All products listed will be reflecting practical uses for specific rooms. The message has to be clear and reflect that a lot of the gadgets available at the store are able for anyone to apply at home without any complication.
For this project I started creating the mobile versions using a grid of four columns:
After a couple of revisions I created the desktop adaptation using a twelve column grid.
A small prototype was delivered in order to explain the interaction for the desktop version of the Hero section. The idea was to show the rollover effect for each of the icons displayed in the different areas of the home. This specific experience was limited to desktop because it depends on the mouse interaction.
