An electronics store with filters and variants
Rajotech sells barcode scanners, label printers, terminals and accessories for businesses. We designed and launched a store in which customers quickly get to the right model, choose a variant and place an order without unnecessary steps.
- UX/UI
- Development
- Category
- E-commerce
- Industry and model
- E-commerce · B2C
- Technologies
- Figma, GraphQL, PHP
- Website
- rajotech.pl ↗
Challenge
In a store selling business hardware, products differ in the details: bundle, interface, color.
Rajotech customers usually know what they are looking for, but they need to compare several similar models and pick the right configuration. The store had to make that easier: fast category navigation, clear filters and a product page that shows every variant.
We combined the client’s vision with our e-commerce experience. We designed the entire store in Figma, from the homepage to the customer account, and built it in PHP and GraphQL.
From search to order confirmation
We designed every stage of the purchase so the customer never has to go back.
- 01
The customer finds a category
Search, a mega menu with subcategories and featured products, and sections on the homepage.
- 02
Narrows down the choice
Filters by manufacturer, price and print type, grid or list view, and sorting.
- 03
Picks a variant
On the product page: bundle configuration, technical specifications and a list of all variants with prices.
- 04
Places the order
Guest checkout or sign-in, a cart summary next to the form, and an order confirmation.
The whole store designed from scratch
From the homepage and navigation, through categories and the product page, to checkout and the customer account.
Navigation and homepage
The mega menu shows subcategories together with featured products and brands. The homepage has carousels of popular products, new arrivals and bestsellers, plus promotional banners.
Categories and filters
The category list and filters are always on the left. Customers narrow down by manufacturer, price and print type, and browse products in a grid or list, with the net price and a button to add to cart or ask about availability.
Product page
At the top: photos, availability, payment and delivery methods, and bundle configuration with net and gross prices. Below: technical specifications and all product variants, which the customer filters by clicking on parameters.
Checkout
The checkout form is split into four steps: details, addresses, delivery and payment. Customers can buy as a guest or sign in, and the cart summary stays visible alongside. After the purchase, they get a confirmation with the order details.
Customer account
In their account, customers have their details, addresses, orders and payment corrections. Order details show the status history, addresses, products, the carrier with a tracking number and a form for messaging the store.
Scope of work
UX/UI
Prototypes and design of the entire store in Figma: homepage, navigation, categories, product page, checkout and customer account.
Development
Building the store in PHP and GraphQL, including integrations.
Launch
Launching the store and the final layout in production.
Want a similar project?
Tell us about your idea and we will get back to you with specifics.
