category: E-COMMERCE / BRANDING
client: MEBELLI
project duration: 2022-2023
The practical part of my master’s thesis. Supervised by Elżbieta Dul-Ledwosińska, Prof. PhD, habil., 2023
The design assumptions for the introduction of the Mebelli brand to the market were meticulously developed and based on several key elements. The implementation of successive stages of these assumptions allowed the initiation of the brand introduction, and the ongoing execution of further stages will enable the continuous development of this brand.
The design process included the preparation of the brand’s visual identity, whose characteristics were intended to fully reflect the design assumptions. The use of modern typography maximized the recognizability of the logo – it became clear and, in some of its elements, somewhat brutalist. As part of the next stage, a modern online store was prepared.
HOMEPAGE
The overall visual design is based on the previously mentioned monochromatic theme with the only color distinction found in the form of images placed on the page. The grid of the entire page is emphasized by the use of gray lines to introduce order, rhythm, and hierarchy to the presented sections. The page is asymmetrical, with a larger left margin to ensure that the hamburger menu is always a part of the entire layout during scrolling.
In the section featuring the main product categories of the brand, each category will ultimately receive a dedicated 3D visualization showcasing the products within that category.
SEARCH RESULTS
The view begins with a brief message regarding the searched phrase and the quantity of displayed products that match the search criteria. Below, there are buttons allowing result filtering – through sorting (in the form of a dropdown list with checkboxes) or filtering by selecting specific features (in the form of a sidebar).
PRODUCT CARD
A large photograph showcasing the product, along with the product name and description, price, and the price in the last 30 days. It includes an option to select a variant (depending on the product, this could be color and size), buttons for choosing quantity, and an “Add to Cart” button. Further down the product card, there are buttons related to product specifications (presented in the form of a sidebar). Below, there is a section with images and detailed descriptions of the product.
SHOPPING CART
The layout is designed with a closed structure using gray lines. Products added to the cart are presented in list form, where each product includes: an image, name, wait time, unit price, and total price. Buttons for changing the quantity of a particular item and a button for removing a specific product are also provided. Below the list of cart items, there is a summary, a section for entering a discount code, and a button leading to order completion.
BLOG
The layout features wide tiles (in the case of a product list, there were 4 products in one line, while for the blog, there are 2 posts in one line). Each tile includes a post image, title, publication date, estimated reading time, summary, and a button.
BLOG POST
A narrow text column (enriched with images and headers) based on the overall page layout. The right part of the post includes links to other posts matched based on the similarity of their content.
MOBILE: HOMEPAGE
The mobile version of the homepage is a full replica of the desktop version. The login button has been moved from the menu bar to the active hamburger menu. All product lists have been narrowed down to 2 items in one line (compared to the desktop version, where there were 4 items in one line).
MOBILE: PRODUCT CARD
Fully analogous to the desktop version. The content has been narrowed down to a single column, and in the overall layout, some elements with a “side by side” hierarchy have been arranged alternately (one after the other).
BUSINESS CARDS
The set of corporate prints prepared for the Mebelli brand includes designs for business cards, letterheads, and offer cards. Each of the designs ties the brand’s overall design together, combining modernity with clarity – echoing the main principles of visual identity. The most attention is intended to be drawn to the clear logo and monochromatic stylistics.