Development and design of the "Happy Bottle” online store interface

“Happy Bottle” is a wine showroom where you just can't buy aтy bad wine. The sommelier of the company personally travels to wineries in Europe and looks for interesting wines that are, first of all, unknown in Russia. Of course, the online store of such an enterprise should match this approach - interesting, seasoned, convenient. We started developing it.

To make buying wine on the Internet enjoyable and interesting.

Result:

We made the online store interface not only convenient and beautiful, but also provided it with a number of highlights, interactive mechanisms for informing about the peculiarities of wines and promoting sales. Our separate pride - the wine page – is laconic, at the same time being bright and informative.

Main page

Wine catalog

Wine page

Result

Process:

In the first version of the design concept, we followed the minimalistic style approach, but with bright splashes of pictograms of different types of goods and hand-drawn stickers in the corporate style that highlight the special wines and offers from the list. We built the product page completely around the main character of the site - a bottle of wine:

The second version of the concept has changed slightly, but the third version has become closer to the corporate identity. Textures were added, the fonts became more intricate, it was decided to photograph bottles on a transparent background and place them on the site without frames. Filters have been worked out, allowing the user to choose any combination of product parameters and watch on the fly how the assortment changes:

Having approved the concept in this form, we then worked out the options for the main page. We proposed to highlight the main block with characteristic patterns in different versions, or to use thematic images, on top of which there would be bottles clipped along the contour:

In the final version of the main page, together with the customer, we decided to get even closer to the corporate identity, moving away from additional colors and graphic elements. We used the corporate red bubble - one of the main style elements – way more. We decided on the content: the top block explains why all this is needed, then comes one of the main highlights: thematic sets, compiled by sommeliers, then the most interesting offers and promotions on wines, then unique samples from different countries.

Финальный вариант главной

In the final design of the catalog, we worked on the presentation of one of the main features of the site - wines specially selected by the sommelier. These wines have a bubble pictogram. When you hover over the bottle, the bubble is revealed along with additional information about the wine in it. The final stickers were drawn, including indications of a country of origin from a unique collection (in this case, Italy). A “surprise from HappyBottle” was created and shown: a bottle wrapped in a branded package appears in the catalog for random users. When you hover over it, you are prompted to receive a bottle of wine as a gift the next time you order by sharing information about the store on a social network.

Sophisticated catalog filter. With the help of the most advanced filter among competitors, you can choose everything: color, brand, price, year of harvest, rating, and even what dishes the wine is suitable for. All this - in any combination. For each of the filter attributes, you can see how many wines from the assortment are available for it.

Final wine page design. In the latest version, we came to the final composition of the blocks, prompting the buyer about related products, other wines of the manufacturer, and telling about the properties in an accessible way. Greater emphasis is placed on the "bubbles" with the sommelier's statements about wine. Two versions of the page are rendered: with full filling and one when there is still little information about wine.