- Role: Freelance Full-Stack Web Designer & Developer
- Agency Partner: OBS Technologies
- Project Type: E-Commerce Platform (WordPress / WooCommerce)
- Timeline: Launched in 2017 (Maintained & optimized iteratively)
Check my work in the link: https://www.behance.net/gallery/117518273/FoodWelove-Design/modules/669747751
Executive Summary
The Challenge
Food We Love is a premier Greek e-tailer dedicated to organic products, healthy living, bio-foods, and specific dietary needs (e.g., vegan, gluten-free, keto). The primary challenge was to translate a extensive, high-SKU catalog of specialized health foods into a seamless, high-converting digital storefront. Working in collaboration with OBS Technologies as a freelance web designer and developer, I was responsible for taking the project from initial design ideation to complete technical implementation.
The Solution
By fusing UX design methodologies with robust WooCommerce engineering, I built a highly intuitive, multi-lingual e-commerce platform. The project demanded a fine balance between clean aesthetic presentation—communicating health and wellness—and highly complex backend logistics, including custom API integrations, real-time shipping syncing, and seamless multi-channel checkout systems.
UX/UI Design Architecture
A Note on Design Context: This platform’s design foundations were established in 2017. The visual strategy focused on introducing long-term modularity and clean, accessible information hierarchy that could scale alongside their rapidly expanding organic inventory.
I approached the user experience by prioritizing rapid product discovery, ensuring that customers with strict dietary limitations could filter through thousands of items effortlessly.
- Visual Asset Engineering (Photoshop & Illustrator): I utilized Adobe Illustrator to draft responsive vector UI elements, custom iconography for product dietary attributes (e.g., Gluten-Free, Vegan badges), and crisp marketing banners. Photoshop was used to establish high-fidelity mockups, balance the earthy/organic color palette, and optimize heavy imagery for fast web rendering.
- Interaction Design (Figma): High-fidelity wireframes and interactive user flows were mapped out in Figma. I focused heavily on designing an intuitive “Sticky/Mini Cart” behavior, creating frictionless user flows for registering/logging in, and mapping an optimized checkout funnel designed to reduce cart abandonment on mobile devices.
- Information Hierarchy: Given the vast menu (ranging from baby bio-foods to organic cellar wines), I designed a mega-menu navigation system that allows users to drill down by category or shop directly by diet type in under three clicks.
Development Deliverables & Engineering
The development phase transformed design mockups into a high-performance WordPress and WooCommerce ecosystem. Because a standard out-of-the-box theme could not accommodate the complex integrations required by the client, I engineered custom PHP code snippets and advanced plugin configurations to ensure stability, speed, and tailored functionality.
Core Plugin Infrastructure & Enhancements
- Advanced Data & Performance Optimization (WP-Rocket): To provide a smooth user experience without long wait times during catalog loads, I integrated and customized WP-Rocket plugins. This achieved seamless AJAX-based product filtering, letting users instantly filter by attributes (price, brand, diet) without frustrating page refreshes.
- Multi-lingual Architecture (WPML): Designed for an international audience, I implemented a robust WPML setup for complete language translation, building a fully localized, multi-lingual shopping experience across all pages, taxonomies, and transaction emails.
- Dynamic Visual Storytelling (Revolution Slider): Customized high-performance hero sections on the homepage to highlight seasonal campaigns and promotions without compromising mobile responsiveness.
- Structured Content (Custom HTML Blocks): Created reusable HTML blocks to give the client flexible, modular control over promotional sections and banners across the site without breaking core code layouts.
- SEO Excellence (Yoast SEO): Configured deep technical SEO routing, schema markup for products, and XML sitemaps to maximize search visibility for highly competitive organic food keywords in Greece.
Logistics, Payments & API Implementations
- Skroutz Smart Cart Integration: Configured and synced the platform with Greece’s leading marketplace engine, allowing native automated synchronization of products, pricing, and orders through the Skroutz Smart Cart ecosystem.
- Automated Shipping Architecture (Speedex): Integrated custom courier APIs via Speedex to automate the shipping lifecycle. The system dynamically calculates shipping rates based on order volume/weight, handles automatic voucher (Voucher/AWB) creation, and updates live tracking numbers for incoming and outgoing packages.
- Bulk Data Management (WP All Import): To facilitate rapid data entry for thousands of inventory items, I built custom import scripts using WP All Import. This allows the client to map complex CSV/XML vendor feeds directly into WooCommerce product variations, images, and prices within minutes.
Key Takeaways & Project Impact
- Cross-Functional Synergy: Successfully balanced creative freedom with structural boundaries by acting as a bridge between OBS Technologies’ strategic milestones and the client’s concrete operational goals.
- Enduring Scalability: Built a robust infrastructure in 2017 that effectively scales to handle thousands of distinct SKUs, massive daily traffic, and multi-channel order management without core system degradation.
- Full-Stack Ownership: Demonstrated the value of a true hybrid professional by successfully steering the project from the first pixel drawn in Figma to complex custom PHP functions on the live server.
Mobile-First Responsiveness & Touch Target Optimization
Adapting a Heavy Catalog for the Small Screen
Given that mobile traffic in organic grocery and retail sectors is exceptionally high, translating an extensive, high-SKU catalog—often with complex product descriptions, ingredients, and varying package sizes—required a strict, mobile-first design philosophy. My approach went beyond simply reflowing content; I re-engineered the product discovery journey from the ground up, prioritizing the instant accessibility of critical data like dietary certifications and allergen warnings.
This strategy extended deep into the cart architecture, implementing sticky interactive elements that ensured users could monitor their total and proceed to checkout at any point. By recognizing that a mobile-optimized experience is not just a responsive layout but a conversion-critical requirement, every touchpoint was designed to minimize mobile friction, lower cognitive load, and turn passive mobile browsers into active buyers.
Ergonomic Efficiency for Business Impact
To attract stakeholders, HR managers, and CTOs looking for measurable product design logic, the mobile interface replaces aesthetic guesswork with strict ergonomic data. The architecture focuses on reducing physical strain and accelerating user checkout velocity through two primary implementations:
- Thumb-Zone Layouts: Core interactive components—such as multi-lingual toggles and variable quantity selectors—are intentionally mapped within the natural sweep of a user’s thumb. This eliminates awkward hand repositioning, creating an effortless single-handed navigation flow that directly lowers interaction friction.
- Touch Target Minimums: Every link, filter tab, and checkout button enforces a strict, padded pixel boundary designed to eliminate frustrating misclicks. By providing clear, isolated hit areas, the interface accommodates rapid mobile browsing and minimizes user error during high-intent conversion moments.
Web Performance as a UX Metric (Speed Psychology)
Overcoming the “Performance Tax” of E-Commerce
In digital retail, loading speed is directly tied to user trust and conversion rates. A slow website acts as a psychological barrier, causing users to abandon their carts out of frustration. Because Food We Love relies on an array of powerful tools—such as WPML for multi-lingual routing and dynamic marketplace syncing—preventing “plugin bloat” from degrading the user experience was a major technical priority.
| Optimization Vector | Technical Execution | UX Impact |
|---|---|---|
| Asynchronous Loading | B-Rocket AJAX Engine Integration | Users filter and sort products instantly without jarring page refreshes. |
| Asset Optimization | Batch Compression via Photoshop & Custom Asset Pipeline | High-resolution food imagery renders instantly without draining mobile data. |
| Database Lean Management | Strict caching scripts and asset-loading conditions | Prevents database lag during peak traffic hours, keeping the checkout snappy. |
Perceived vs. Actual Performance
To manage the psychological experience of waiting, I focused heavily on Perceived Performance:
- Using clean, CSS-based skeleton loaders and subtle transition animations provided immediate visual feedback when a user applied a filter.
- Even if the server was processing complex queries behind the scenes, the interface felt instant, continuous, and responsive, keeping the user engaged rather than staring at a frozen screen.
6. Accessibility (a11y) & Inclusivity in Food Retail
Universal Access to Digital Nutrition
An organic and health-focused grocery store naturally attracts a diverse user demographic, including elderly shoppers, individuals looking for specific allergen warnings under cognitive fatigue, and users utilizing assistive technologies. Ensuring that product information was legible, clear, and easy to navigate was treated as a fundamental requirement rather than an optional feature.
UX Principle: Accessible design isn’t just about code compliance; it’s about making sure an allergic customer can confidently verify a product’s safety without frustration.
- High Contrast & Readability: I established a color palette using deep, earthy tones contrasted against clean backgrounds, ensuring all text surpassed standard contrast ratios for seamless readability. Type scales were designed using relative units (
rem), allowing users to scale text size through their browser settings without breaking the structural layout of the theme. - Explicit Error States: During the WooCommerce checkout or registration process, standard form errors can be confusing. I designed clear, colorblind-safe visual indicators (combining explicit text alerts, icons, and red borders) so that if an input field like a billing address or phone number is missing, the user is immediately and clearly guided to the exact spot requiring correction.
- Intuitive Visual Labeling: Dietary restrictions were given prominent visual hierarchy. Badges for Vegan, Gluten-Free, or Bio certifications were accompanied by text labels, ensuring that users scanning at high speeds could filter out unsafe products effortlessly.