UI/UX Redesign of e-Commerce Flower Delivery
Project Overview and Main Goal:
This project is a comprehensive rethinking of an online flower shop. The main goal was a total modernization of the visual design (transition to an aesthetic, minimalist, and premium look), as well as addressing critical UX issues of the platform. The outdated and overloaded interface distracted attention from the product, so I focused on creating a clean space where the beauty of the bouquets is the main highlight. Additionally, the task was to optimize the sales funnel: to make the user journey from search to payment as seamless as possible and to increase the average check through integrated marketing tools.
Key Solutions and Implemented Functionality:
• Development of a Scalable Design System: A complete library of UI components was built from scratch using the Atomic Design methodology. The use of modern Figma capabilities (Variables, Auto Layout, Variants) ensured perfect visual consistency across all screens and prepared a reliable foundation for rapid development and future scaling of the site.
• Optimization and Simplification of Checkout: The biggest pain point for users – the cumbersome order form – was transformed into a logical 3-step accordion (Your Data -> Delivery -> Payment). A smart toggle "For Yourself / For Another Person" was implemented, which adapts the form fields, significantly reducing cognitive load and lowering the risk of abandoned carts.
• Strategy for Increasing Average Check (Cross-sell & Upsell): Blocks of additional services were organically and unobtrusively integrated. The "Cheaper Together" sections and the ability to quickly add a card or candies were implemented directly in the product card and in the sliding cart (Drawer), encouraging the customer to make spontaneous add-ons right before payment.
• Smart Catalog Navigation: Instead of complex multi-level menus, a system of quick horizontal filters ("tags") was implemented. This allows visitors to find the desired flowers by occasion, variety, or status ("Best Sellers") with just one click.
• Mobile-First Adaptation: Since buying flowers is often a quick and emotional action, the mobile version was designed with the highest priority. The interface received large touch zones for easy finger navigation, smooth sliders, and a fixed bottom menu (Bottom Navigation Bar) for instant access to the cart or favorite products.
This project is a comprehensive rethinking of an online flower shop. The main goal was a total modernization of the visual design (transition to an aesthetic, minimalist, and premium look), as well as addressing critical UX issues of the platform. The outdated and overloaded interface distracted attention from the product, so I focused on creating a clean space where the beauty of the bouquets is the main highlight. Additionally, the task was to optimize the sales funnel: to make the user journey from search to payment as seamless as possible and to increase the average check through integrated marketing tools.
Key Solutions and Implemented Functionality:
• Development of a Scalable Design System: A complete library of UI components was built from scratch using the Atomic Design methodology. The use of modern Figma capabilities (Variables, Auto Layout, Variants) ensured perfect visual consistency across all screens and prepared a reliable foundation for rapid development and future scaling of the site.
• Optimization and Simplification of Checkout: The biggest pain point for users – the cumbersome order form – was transformed into a logical 3-step accordion (Your Data -> Delivery -> Payment). A smart toggle "For Yourself / For Another Person" was implemented, which adapts the form fields, significantly reducing cognitive load and lowering the risk of abandoned carts.
• Strategy for Increasing Average Check (Cross-sell & Upsell): Blocks of additional services were organically and unobtrusively integrated. The "Cheaper Together" sections and the ability to quickly add a card or candies were implemented directly in the product card and in the sliding cart (Drawer), encouraging the customer to make spontaneous add-ons right before payment.
• Smart Catalog Navigation: Instead of complex multi-level menus, a system of quick horizontal filters ("tags") was implemented. This allows visitors to find the desired flowers by occasion, variety, or status ("Best Sellers") with just one click.
• Mobile-First Adaptation: Since buying flowers is often a quick and emotional action, the mobile version was designed with the highest priority. The interface received large touch zones for easy finger navigation, smooth sliders, and a fixed bottom menu (Bottom Navigation Bar) for instant access to the cart or favorite products.