Complete redesign and interactive prototype of an online store for garden and yard products.
Role: web design, UX/UI design, and interactive prototype. Key types of pages have been developed for both desktop and mobile versions.
Scope: main page, catalog page (category), product card — complete design system of the store.
Main page
– Conversion-focused structure: hero banner/slider, promotions, new arrivals, top categories, product collections
– Advantage blocks, trust triggers, entry points to the catalog
– Logic of the first screen for quick navigation
Catalog page (category)
– Product grid with cards (image, name, price, rating, purchase button)
– Filter and sorting panel, convenient for a large assortment
– SEO block for category description, breadcrumbs, pagination
– Logic for displaying subcategories and tags
Product card
– Image gallery, key information, price, variations, expressive CTA
– Structured descriptions, specifications, reviews, related/similar products
– Prioritization of blocks for conversion
Mobile version (mobile-first)
– Separate processing of all types of pages for smartphones (where the main share of traffic comes from)
– Adaptive menu, mobile filters, convenient CTAs, and touch-friendly gallery
– Optimization of page length and block order for mobile scenarios
Implementation
– Interactive prototype in layout (HTML/CSS/JS): clickable elements, gallery, variation switching, mobile navigation
– Unified design system: typography, grid, palette, element states
– Layout as a basis for further integration into CMS
Directions: web design, UX/UI, prototyping, mobile-first, e-commerce, design system, redesign.
#webdesign #ux #ui #prototype #website design #ecommerce #mobilefirst #redesign #designsystem
Role: web design, UX/UI design, and interactive prototype. Key types of pages have been developed for both desktop and mobile versions.
Scope: main page, catalog page (category), product card — complete design system of the store.
Main page
– Conversion-focused structure: hero banner/slider, promotions, new arrivals, top categories, product collections
– Advantage blocks, trust triggers, entry points to the catalog
– Logic of the first screen for quick navigation
Catalog page (category)
– Product grid with cards (image, name, price, rating, purchase button)
– Filter and sorting panel, convenient for a large assortment
– SEO block for category description, breadcrumbs, pagination
– Logic for displaying subcategories and tags
Product card
– Image gallery, key information, price, variations, expressive CTA
– Structured descriptions, specifications, reviews, related/similar products
– Prioritization of blocks for conversion
Mobile version (mobile-first)
– Separate processing of all types of pages for smartphones (where the main share of traffic comes from)
– Adaptive menu, mobile filters, convenient CTAs, and touch-friendly gallery
– Optimization of page length and block order for mobile scenarios
Implementation
– Interactive prototype in layout (HTML/CSS/JS): clickable elements, gallery, variation switching, mobile navigation
– Unified design system: typography, grid, palette, element states
– Layout as a basis for further integration into CMS
Directions: web design, UX/UI, prototyping, mobile-first, e-commerce, design system, redesign.
#webdesign #ux #ui #prototype #website design #ecommerce #mobilefirst #redesign #designsystem