The main goal of the project was to create a user-friendly graphical interface for online store with the huge showcase with products. After analise the popular online stores of a similar type, I deduced a certain pattern that they don’t differ from other e-shops that sell, for example, equipments, appliances and household goods.

I got the idea to repeat the online store and add some new functionality to it, which will correspond to the user’s behaviour during making a purchase in a real supermarket.

When I started creating the prototype of the e-shop, I put all the necessary functionality that every product should have, regardless of product category. Thus, it was possible to determine the percentage of diversity in cards of goods in height with the same width.

I added blocks of information about products, recipes and promotions to the unlimited field of goods, regardless the technical side of making a purchase. Below I give you more details about how did I manage to achieve a direct association with the actual purchase in a real  supermarket.

And now some words about the behaviour of a customer in a supermarket. When a person comes for a products, he or she sees them are arranged on showcases by specific types and properties. Therefore, this rule is interesting for us and we take away it for our online store. Further, a customer needs a specific product, but with certain properties. For example, a customer can choose a canned beans of a certain size, or a customer can choose a red or white beans in a real supermarket. Also a customer can go to a showcase with fruits and vegetables and choose some cucumbers of a certain weight, either from a particular country, or even take packaged ones. This is the second rule that I designed for Cucushop.

Thus, a user sees a reduced amount of information on the page, while a particular card of product contains all available properties of a product: weight, difference in a content type, quantity, firm or country of a manufacturer. Also a user can see a short description of products and the approximate quantity of products in a warehouse.

 

Below you can see on the preview the information blocks with the examples of positioning. This kind of information feed allows you to design the page with beautiful streamlined elements. Information blocks have no restrictions in height, as in blocks with product cards, this feature allows you to vary information in any quantity.

The properties of design are very important for me as a set of functional skills. These aren’t just available skills for my work, they are constantly updated knowledge with the course of style and the development of industry. For me it is important to create a resource with ergonomic precision based on real behaviours, and even physical objects, with a modern coverage.

Credits

Cucushop / Customized project

Other interesting works

E-shop of the high quality food / Cucushop
The UX design for the big Moscow construction company
Brand design for Russian professional windows awards
GalaxyMoney — Swipe & Decide Manager
Video surveillance e-shop / B2B / B2C
Logotype and brand design for the motivational program
UX Design for the multinational company AxxonSoft
Oriflame Anniversary app design
Grandma's book of recipes