A complete redesign of the existing online store ROBO is needed: https://robo.org.ua/
The site is already operational, with products and basic functionality available. It is necessary not to create a new site from scratch, but to completely overhaul its design, page structure, and user journey to purchase.
The main goal of the redesign is to make the site modern, user-friendly, clear, and maximally sales-oriented. The primary traffic will come from Meta advertising — Facebook and Instagram. Most buyers view the site from smartphones, so special attention should be paid to the mobile version.
A person visiting the site for the first time from an ad should immediately understand:
— what the product is;
— what its main advantages are;
— how much it costs;
— what is included in the package;
— how delivery and payment are handled;
— whether the store can be trusted;
— how quickly to place an order.
It is necessary to analyze the existing site, identify the main problems in design, structure, and usability, and then propose a new UI/UX design in Figma.
Full computer and mobile versions of the site need to be developed.
What needs to be developed:
Header of the site.
The header of the site needs to be completely redesigned for both computer and mobile versions.
The header should include:
— store logo;
— "Product Catalog" button;
— main category menu;
— site search;
— phone number;
— quick contact button;
— working hours;
— favorites;
— personal account, if used;
— cart with the number of products;
— mobile burger menu;
— information about delivery, payment, or current promotions.
The header should be compact, clear, and not take up too much space.
When scrolling the page, a fixed shortened header with the main elements: logo, catalog, search, and cart should be provided.
Mobile menu.
A convenient mobile menu needs to be developed separately, which will include:
— product catalog;
— categories;
— search;
— contacts;
— delivery and payment;
— warranty and returns;
— reviews;
— favorites;
— cart;
— contact buttons via phone or messengers.
Homepage.
The homepage needs to be developed with:
— a main banner with a clear offer;
— promotional products;
— popular categories;
— bestsellers;
— new arrivals;
— discounted products;
— advantages of the store;
— information about delivery and payment;
— customer reviews;
— trust block for the store;
— recommended products;
— answers to frequently asked questions;
— subscription or call to view the catalog;
— footer of the site.
The homepage should not be overloaded. Its main task is to quickly direct the user to the desired product or category.
Product category page.
It is necessary to develop:
— category name;
— short description;
— subcategories;
— filters;
— sorting;
— product cards;
— labels "Hit", "New", "Discount";
— current and old price;
— rating;
— number of reviews;
— add to cart button;
— option to add to favorites;
— pagination or "Show more" button;
— mobile version of filters.
Product cards should be modern, clear, and not overloaded with unnecessary information.
Product page.
The product page is the most important part of the site. It should combine the functionality of an online store and the structure of a selling landing page.
It is necessary to develop the correct sequence of blocks that will help the user quickly make a purchase decision.
In the first screen of the product page, there should be:
— product name;
— article number;
— rating;
— number of reviews;
— photo gallery;
— product video;
— current price;
— old price;
— discount size;
— availability information;
— color or configuration options;
— quantity of products;
— main "Buy" button;
— quick order button;
— short main advantages;
— delivery information;
— payment information;
— warranty and returns;
— package information.
After the first screen, the following should be placed:
— short block of main advantages;
— demonstration of the product in real use;
— problem that the product solves;
— detailed description;
— photos and videos;
— main characteristics;
— what is included in the package;
— usage instructions;
— comparison with other products or regular analogs;
— who the product is suitable for;
— delivery and payment block;
— warranty and return conditions;
— customer reviews;
— reviews with photos and videos;
— questions and answers;
— recommended products;
— related products;
— products that are often bought together;
— repeated call to place an order.
In the mobile version, a fixed bottom panel with the price and "Buy" button should be created.
It is also necessary to provide convenient switching between sections:
— description;
— characteristics;
— reviews;
— questions;
— delivery and payment.
Delivery and payment block.
A separate clear block needs to be developed, which will specify:
— delivery by Nova Poshta;
— estimated delivery time;
— option to pay upon receipt;
— online payment;
— payment to the account;
— delivery cost;
— conditions for free delivery, if applicable;
— exchange and returns;
— warranty.
This information should be visible near the "Buy" button and also duplicated lower on the page.
Reviews.
A modern review block needs to be developed:
— overall product rating;
— number of reviews;
— distribution of ratings;
— buyer's name;
— review date;
— "Verified Purchase" label;
— review text;
— photos;
— videos;
— product rating;
— store response;
— "Leave a review" button;
— review sorting.
Reviews should inspire trust and be easy to view from a smartphone.
Product characteristics.
A separate clear block of characteristics needs to be created.
Characteristics should be displayed in the form of a structured list or table that looks good on both computer and smartphone.
Questions and answers.
A block needs to be developed where buyers can:
— view popular questions;
— open and close answers;
— ask their own question;
— see the store's response;
— view the date of the response.
Cart.
A full and mini version of the cart needs to be developed.
The cart should include:
— product photo;
— name;
— selected configuration or color;
— price;
— old price;
— quantity;
— option to remove the product;
— promo code;
— order total;
— delivery cost or information about it;
— recommended products;
— "Place Order" button;
— "Continue Shopping" button.
Order placement.
The order placement should be as simple as possible without unnecessary fields.
Main fields:
— name;
— phone number;
— locality;
— Nova Poshta branch or parcel terminal;
— delivery method;
— payment method;
— order comment;
— promo code;
— order composition;
— total amount;
— order confirmation button.
It is also necessary to provide a message about successful order placement.
Site search.
It is necessary to develop:
— search bar;
— suggestions while typing;
— popular search queries;
— products in results;
— categories in results;
— search results page;
— message if nothing is found.
Favorites.
A page of selected products needs to be developed with the ability to:
— view saved products;
— remove products;
— add products to the cart;
— continue shopping.
Information pages.
Design needs to be developed for the following pages:
— delivery and payment;
— warranty;
— exchange and returns;
— about the store;
— contacts;
— privacy policy;
— public offer;
— frequently asked questions.
Contact page.
It is necessary to provide:
— phone number;
— email;
— working hours;
— messengers;
— social networks;
— feedback form;
— legal information about the store.
Footer of the site.
The footer of the site needs to be completely developed.
The footer should include:
— logo;
— brief information about the store;
— catalog;
— popular categories;
— information for buyers;
— delivery and payment;
— exchange and returns;
— contacts;
— working hours;
— social networks;
— payment methods;
— legal information;
— privacy policy;
— public offer.
System pages and messages.
Design for the following states needs to be provided:
— product added to cart;
— product added to favorites;
— form filling error;
— product out of stock;
— empty cart;
— empty favorites;
— nothing found;
— 404 page;
— successful order placement;
— payment error;
— page loading;
— cookie usage message.
Design system.
A unified design system needs to be created, which will include:
— colors;
— fonts;
— headings;
— buttons;
— input fields;
— product cards;
— icons;
— spacing;
— modal windows;
— messages;
— active and inactive states;
— hover states;
— mobile components.
All elements should be designed as components in Figma.
Target audience:
Buyers from Ukraine looking for products for home, cars, children, electronics, gifts, and useful gadgets.
A significant portion of users come to the site from Facebook and Instagram ads. They primarily use smartphones and may be seeing the ROBO brand for the first time.
Therefore, the site should:
— load quickly;
— inspire trust;
— clearly show product advantages;
— not overload the user;
— simplify order placement;
— look good on different screen sizes;
— motivate the user to buy the product.
Designer requirements:
— experience in designing online stores;
— experience in creating selling product pages;
— understanding of UI/UX;
— understanding of mobile adaptation;
— ability to work in Figma;
— understanding of user behavior coming from ads;
— portfolio with similar works;
— readiness to justify proposed solutions;
— ability to make adjustments after the design presentation.
Expected result:
— complete design of the online store in Figma;
— computer version;
— mobile version;
— design of all main pages;
— design of main system states;
— components and design system;
— clickable prototype of main pages;
— clear file structure;
— preparation of layouts for handover to the programmer;
— specified sizes, spacing, fonts, colors, and states of elements.
Programming and layout are not required at this stage. A complete UI/UX design in Figma is needed.
In response to the project
Behance
