Świat Grilli — from branding to a WooCommerce online store

Project context

Świat Grilli: a new brand and a full e-commerce rollout

For Świat Grilli, we created a brand from scratch and a modern online store for the grill industry. The project combined two areas: the image that gives the store its own character, and the features needed to present the offer and handle orders. From the start, we treated them as parts of one project.

An offer covering products from different brands requires organization. A user may start with a specific manufacturer, look for a particular type of grill or only be comparing the options available. The store design should take these different entry points into account and help users move on to product information.

At the same time, the industry has a strong visual context. Fire, preparing food and cooking outdoors create a recognizable brand world. We wanted to use this character while keeping the offer clear. Hence the modern, product-focused style, in which the brand's visual setting accompanies the presentation of the range.

The project covered the path from the logo, through the UX/UI of the home page and subpages, to configuring sales and online payments. It's a scope in which the visual design has to take into account the store's real features: choosing a product, the cart and completing the order.

What we did

What did we prepare for the Świat Grilli online store?

The scope of work covered both design and the e-commerce build. We prepared the brand identity, the store layouts and the offer structure, and then configured the elements needed to handle purchases. The whole was completed by information about the physical store and the store's documents.

Such a broad scope lets you consider individual elements in their context. The product page is meant to lead to the cart, the cart to checkout, and the home page is meant to help discover the offer. Visual consistency is important along this whole path, as are clear names and the order of information.

The project in practice

Store branding: its own identity among many manufacturers

We prepared the logo and branding as the starting point for the whole e-commerce look. The store presents products from El Fuego, Landmann and Barbecook, but it also needs its own identity. Customers should recognize where they're buying regardless of which product brand they're looking at.

The visual direction refers to the world of grilling, fire and outdoor cooking. The project presentation shows a strong brand mark, darker accents and a cooking-related context. The store views themselves leave plenty of light background for products and information. As a result, the emotional setting and the catalog can perform different, complementary tasks.

The brand sets the tone, and the interface design organizes the action. This is an important distinction for a store with a wide offer. The audience may be drawn in by the atmosphere of the photography, but when choosing a specific product they need a clear layout. The design should allow a natural transition between these ways of viewing the store.

The project shows why it's worth combining logo and branding design with e-commerce design. A shared direction makes it easier to keep the brand's character on the home page, the subpages and around the offer.

You can read more about the applications of a mark in the guide how a logo for the web, print and sales is created. For a store brand, these applications are worth considering together with the catalog design and the offer's communication.

The project in practice

An extensive menu and categories: organizing the choice

We prepared an extensive menu and category structure. Their task is to organize the offer and create clear entry points into the catalog. In a multi-brand store, navigation is especially important: it helps establish where the products of interest are and how to move on to the next area.

In the project, we included a presentation of the El Fuego, Landmann and Barbecook brands. It's an additional context for choosing, for customers who know the manufacturers or want to get to know their offer. The brand presentation works together with the product categories, because it responds to a different way of looking for products.

In this layout, the home page acts as a guide to the store. It shows the brand's character and provides entry points to the offer. The subpages develop these topics, making it possible to move from general interest to viewing specific products. This hierarchy is the foundation of the UX/UI design.

The value of an organized structure also becomes apparent as the range grows. New products should have an understandable place in the catalog. Preparing the categories is therefore a decision concerning the store's current presentation and a starting point for its further expansion.

The project in practice

Product pages as an important stage of the purchase decision

As part of the project, we prepared the product pages and a system for presenting the offer. This is the area where the interest built on the home page meets a specific choice. The user needs to see the product, read the information and find the way to proceed to purchase.

The product-focused character of the design means that photos and offer data have a clear place in the layout. In the views shown, the catalog and the product page develop the same visual system. Repetition helps maintain order when moving between different models and brands.

The product page doesn't work in isolation from the rest of the store. Categories and the brand presentation lead to it, and the next step is the cart. That's why continuity between screens was important in the design. Each has a different task, but they all belong to one purchase path.

The project in practice

WooCommerce, the cart and imoje / ING payments

The visual layer was combined with the WooCommerce configuration. The scope included the cart and the full purchase process, as well as the integration of the imoje / ING payment gateway. As a result, the project covered both product presentation and the features needed to place and pay for an order.

The cart and checkout are separate stages of using the store. The first is for gathering the chosen products before the order. The second guides the user through the information needed to complete it. In an e-commerce project, these places require the same attention as the home page, because they concern a specific user action.

Configuring payments was part of the build, not an element added to the visualization alone. Connecting the design with the technical handling of transactions lets you treat the store as a whole: from presenting the offer to the end of the purchase path. When describing the project, we name the gateway that was implemented, without extending the scope to unconfirmed payment methods.

We carry out this kind of work as part of designing and building WooCommerce online stores. The scope of a specific project depends on the product range, the integrations required and the way the company operates. For Świat Grilli, it also included creating the brand from scratch.

Behind the project

The technologies and solutions in the project

WordPress

The website management environment and the back end for the WooCommerce store.

WooCommerce

The product offer, the cart and handling the purchase process.

imoje / ING

Integration of the payment gateway and payment configuration at checkout.

The store is built on WordPress with WooCommerce. WordPress provides the website management environment, and WooCommerce is responsible for the e-commerce layer. As part of the project, we configured the store, the cart and the purchase process. These elements connect the offer visible to the customer with order handling.

The imoje / ING integration completes this set with online payments. Its configuration was part of the described build scope. As a result, the product presentation, checkout and payment belong to one process, not to independent fragments of the project.

The project also included a full RWD version. Responsiveness concerns the relationships between elements on different screens: the navigation, the catalog, descriptions and the successive purchase steps. The e-commerce back end and the polished interface have different functions, but only together do they create the complete store experience. We present further development options in our WooCommerce online stores offer.

The project in practice

The physical store, documents and convenience on smaller screens

We complemented the project with trust-building sections and a presentation of the physical store with a map and contact details. As a result, online sales were set in the broader context of the company's business. Visitors can find information about the physical location and how to get in touch.

Such an element has practical significance in a product-based industry. Some customers want to get to know the seller before buying, others are looking for the chance to talk about the offer. Visible information about the physical store meets these needs and complements the online catalog.

The scope also included the terms and conditions, the privacy policy and cookies. They're part of the information that organizes the use of the store. Their presence was taken into account alongside the design, payments and contact, so the description of the project covers more than just the visual layer.

We prepared a full RWD version for phone and tablet. Adapting to smaller screens covers the experience of using the store: browsing the offer and going through the successive stages of the purchase. The content hierarchy has to stay clear even when a wide catalog is viewed on a narrow screen.

The mobile version develops the same brand character. This is important, because customers may return to the store from different devices. A consistent look and an organized offer help maintain continuity between visits.

Design decisions

How to combine the brand's atmosphere with the clarity of a large offer?

A grill store offers many opportunities to build a mood: food, fire, the garden and gatherings around the table. At the same time, it remains a place for making specific product decisions. The design should keep a balance between these two tasks. Photography can draw the audience in, but the catalog has to help them find the right part of the offer.

That's why different screens have different functions. The home page introduces the brand's world and presents the directions of choice. The categories organize the range. The product page focuses attention on a specific model, and the cart and checkout handle the purchase. An extensive UX/UI design covers the relationships between these places, not just how each of them looks separately.

At Świat Grilli, the common denominator is the product-focused character of the interface. The visual setting refers to the industry, and the offer remains the store's main subject. A custom design makes it possible to give this combination its own expression, consistent with the branding prepared.

We discuss the individual stages in more detail in the guide on creating an online store from idea to online sales. This project shows how the brand's look, the catalog structure and the technical build come together in one project.

The shared identity also has an organizing function here. The visitor views products from different manufacturers, but remains in the Świat Grilli store the whole time. The logo, the composition and consistent interface elements maintain this context. As a result, the diversity of the range can coexist with a clear identity for the seller — from the first screen to moving to the cart.

Planning e-commerce

What's worth establishing before a similar store project?

The starting point is the scope of the offer: the number of categories, the presence of many manufacturers and the type of information needed for products. These issues affect the store structure, the organization of the menu and the way the catalog is presented. It's also worth establishing what role information about the company and its physical store is to play.

A separate area is order handling. The chosen payment gateway, the data collected during purchase and the order of the checkout stages should be included in the build scope. For Świat Grilli, this scope covered WooCommerce, the cart, the full purchase process and the imoje / ING integration.

When setting the budget, our guide how much a WooCommerce online store costs will be helpful. It explains the topic of pricing more broadly; it's not a price list for the project described. A project prepared from the logo to a finished store has a different scope than simply changing the look of an existing website.

Before the start, it's also good to gather materials: product photos, information about the brands, contact details and expectations for further marketing. Context prepared in this way makes it easier to discuss priorities. You can pass it on via the Quote Studio, so we can tailor the scope of collaboration to your offer.

The result of the project

The complete Świat Grilli online store and a basis for further marketing

We prepared a structure for further SEO development and advertising campaigns. Organizing the categories, brands and products provides a starting point for expanding the content and directing audiences to the right parts of the offer. It's the foundation for further activities, the scope of which can be tailored to the store's sales priorities.

Before starting promotion, it's worth linking the campaign goal with a specific place in the store. We develop this topic in the guide when to launch Facebook Ads and how to prepare your website. If you're planning a similar stage, also see our Meta Ads campaigns offer.

Further development could include expanding the descriptions, materials that help choose a grill or campaigns focused on selected product groups. We point them out as possible next steps. They're not a declaration of a campaign carried out or a summary of results achieved.

The result of the described project is a combination of branding, custom design and e-commerce features. Świat Grilli received its own visual direction, an organized presentation of its multi-brand offer and a purchase process with online payments. Each of these layers supports a different task of the store.

It's a good example of a project in which the brand and the technology are created within one scope of collaboration. From the logo to the checkout, all the elements share a common context: a specific range, audience and way of presenting the offer. You can see the store at www.swiatgrili.pl.

Questions and answers

Questions about the Świat Grilli project

Read more

More about websites, stores and brands.

Also see other Zaprojektowani projects or talk to us about your project.