WordPress / WooCommerce Developer & UX/UI Designer for Premium Restaurant, Catering & Events Website
Worldwide
We are looking for an experienced WordPress / WooCommerce developer, UX/UI designer, or small development team to refine, finalize and implement a premium hospitality website for Berg Blick Restaurant, Catering & Events. The goal is to build a refined, responsive and technically maintainable WordPress website with a premium visual frontend, modular backend structure, SEO-ready architecture and a practical catering order or inquiry workflow. The first phase should remain lean, practical and operationally realistic, using third-party integrations where appropriate. The project is based on an existing Figma file that already contains the core visual direction. This file should not be redesigned from scratch. Instead, it should be carefully reviewed, completed, polished and elevated into a consistent, responsive, prototype-linked and development-ready design system. Existing Figma file: https://www.figma.com/design/2SuHjkW9ELQRAtVeYYGLvo/BERG-BLICK-RESTAURANT?node-id=3706-61106&t=DZhnMaIBjKC6tHSs-1 Project Objective The final website should feel like a premium digital hospitality experience, not like a standard restaurant website. It should combine: Restaurant presentation Catering offers and catering order/inquiry flow Event inquiries Takeaway information or ordering integration Table reservation integration Help / Contact areas SEO landing pages Newsletter / community elements Multilingual-ready content structure The website should feel: premium modern warm animated structured fluid hospitality-focused mobile-first conversion-oriented easy to manage internally Important Application Requirement Before starting implementation, the contractor must provide an initial technical analysis. This technical analysis should include: recommended WordPress setup recommended plugin stack assessment of whether the catering flow should be built as WooCommerce order flow, inquiry flow or hybrid flow assessment of required third-party integrations assessment of payment and invoice setup performance and SEO considerations risks, limitations and recommended implementation approach Applicants must also provide relevant references. Relevant references should ideally include: premium WordPress websites restaurant or hospitality websites WooCommerce order flows catering, food ordering or booking systems Figma-to-WordPress projects websites with animations, GSAP or premium scrolling effects multilingual WordPress websites projects with payment, invoice or booking integrations Applications without a short technical assessment and relevant references will not be prioritized. Project Scope The project consists of two main work packages: Design refinement Technical WordPress implementation The existing design should be refined and elevated first. Only once the design direction, responsive layouts, animations and prototype logic are approved should the development phase begin. Design Scope The design phase is a key part of the project. The objective is not only to make the current Figma file responsive, but to turn it into a polished, premium and development-ready design system. The current design should be treated as a strong draft. It already contains elements that should be preserved where they work well, especially the overall visual direction, typography, header approach, selected images, small moving image elements and the premium atmosphere already visible in parts of the file. At the same time, some sections still need refinement. Several areas feel unresolved, too static, visually inconsistent or unfinished. These sections should be reworked and brought into a more cohesive, modern, elegant and fluid design language. The design should feel like an animated, informative visual story. It should feel more alive, more premium and more contemporary. Sections should become more dynamic, with a strong sense of storytelling, layout rhythm, modern composition and subtle interaction. Design Requirements The contractor should: review the existing Figma file in detail identify which sections should remain and which need refinement improve layout rhythm and visual hierarchy create a more polished and premium overall design language complete unfinished sections and subpages refine desktop layouts refine tablet layouts rethink the mobile experience prepare a clean, app-like mobile version create a consistent component logic improve spacing, typography and readability ensure the design feels coherent across all pages prepare the final Figma file for development handoff Color System The following color palette should be applied consistently: #E7E0D2 – Bone #BAB59E – Khaki Beige #FFE4DD – Soft Blush #FF8551 – Coral Glow #FF6529 – Tiger Flame The stronger orange tones should be used selectively for CTAs, highlights and important interactive moments. They should not dominate the entire website. The design should use calm background areas, reduced color blocks and clear visual distinction between base sections, highlighted sections, buttons and interactive elements. Mobile UX The mobile version is especially important. It should not simply be a compressed desktop version. Instead, the mobile experience should feel: clearer more reduced more app-like easier to navigate faster to understand more conversion-focused It is acceptable to simplify, shorten, rearrange or omit content on mobile if this improves usability. Animation, Interaction & Prototyping Requirements Animations are an important part of the desired premium experience, but they must support the user journey and not overload the website. The design phase should include a clear animation and interaction concept. Desired animation and interaction elements: subtle scroll-based storytelling smooth section transitions elegant fade-ins image movement or parallax where appropriate hover effects for buttons, cards and navigation elements micro-interactions for CTAs animated transitions between key sections premium but lightweight motion language mobile-friendly interaction behavior The contractor should define in Figma how these interactions should work and prepare them for developer handoff. The Figma prototype should clearly communicate: main user journey navigation logic catering entry points event inquiry flow mobile menu behavior button states hover states where relevant scrolling logic section transitions interactive elements handoff notes for animations Only after the static design has been resolved in a consistent and polished way should animations, transitions and prototype links be finalized. The final Figma file must be visually consistent, content-complete, responsive across relevant screen sizes, prototype-linked and ready for implementation. Catering Workflow Requirement A key part of the project is a simplified but professional catering order or inquiry workflow. The preferred logic is inspired by online grocery ordering systems such as REWE: customers should first browse products or catering offers, select items or packages, and only later choose delivery or pickup details. The catering flow should support the following customer journey: Customer browses catering categories such as breakfast, lunch, snacks, drinks or event catering. Customer selects products, packages or inquiry options. Customer adds items to the cart or structured inquiry form. Relevant upselling options are shown, for example smoothies with breakfast or desserts with lunch. The system checks whether the minimum order value is reached. Customer selects delivery or pickup. Customer selects a delivery or pickup date. The system enforces a minimum lead time of two days. Customer enters company, contact, delivery and invoice details. Customer adds allergies, dietary requirements and special instructions. Customer submits the order or inquiry. The internal team receives a structured request or order summary. If payment is included, the customer can pay online, for example via PayPal or credit card. If invoicing is enabled, an automatic invoice should be generated and sent to the customer. Catering Business Rules The catering workflow must support: minimum lead time: 2 days in advance minimum order value: €350 delivery or pickup slot selection structured customer and company data allergy and dietary request fields optional payment by PayPal, credit card or invoice automatic invoice generation internal order or inquiry notification possibility to generate production or packing information internally The exact setup may be implemented as: direct WooCommerce order flow inquiry-based process hybrid system The chosen solution must be intuitive for the customer and operationally practical for the Berg Blick team. Recommended Technical Foundation The website should be built with a clean, maintainable and performance-conscious WordPress setup. Recommended technical stack: WordPress Custom WordPress theme based on Figma ACF Pro for modular backend content management WooCommerce for catering order functionality, if a direct order flow is implemented Fluent Forms or Gravity Forms for inquiry-based workflows Rank Math SEO for SEO structure WPML or multilingual-ready setup GSAP or custom JavaScript for animations and transitions WP Rocket or LiteSpeed Cache for performance optimization Imagify or similar for WebP / image optimization Cloudflare for CDN and security WP Mail SMTP for reliable email delivery Google Analytics 4 and Google Search Console Mollie Payments for WooCommerce for payment processing, including PayPal Germanized for WooCommerce and/or PDF Invoices & Packing Slips for German checkout compliance and automatic invoice creation Existing third-party systems may be integrated where operationally useful: Lightspeed for menu / takeaway ordering CentralPlanner or another reservation system for table reservations ActiveCampaign for newsletter and CRM workflows The setup should avoid unnecessary technical complexity in the first phase and use connected third-party systems or iframe integrations where they are operationally more practical. Recommended WooCommerce Setup for Catering If WooCommerce is used for the catering flow, the recommended plugin stack would be: WooCommerce Order Delivery Date Pro for WooCommerce WooCommerce Product Add-Ons or Product Options and Fields WooCommerce Product Bundles Cart and Checkout Upsell Checkout Field Editor for WooCommerce Mollie Payments for WooCommerce Germanized for WooCommerce PDF Invoices & Packing Slips Custom development may be required for: €350 minimum order value rule 2-day advance order validation B2B checkout fields conditional invoice payment for approved business customers internal production or packing list formatting category-based product availability, for example breakfast only in the morning Development Requirements The developer should implement: custom WordPress theme based on the approved Figma design responsive frontend for desktop, tablet and mobile reusable content modules via ACF Pro clean navigation, header and footer structure restaurant pages catering pages event pages contact/help pages SEO-friendly page structure animations and transitions catering inquiry or order flow third-party integrations where required multilingual-ready structure performance optimization analytics and tracking setup testing and launch support The backend must remain easy to manage for the internal team. Texts, images, recurring sections, catering offers, event content and SEO fields should be editable without developer support. SEO Requirements The website must be built with strong technical SEO fundamentals from the beginning. Requirements include: clean URL structure editable meta titles and descriptions Rank Math SEO setup clear heading hierarchy structured and indexable content internal linking logic fast loading times mobile optimization image optimization XML sitemap multilingual SEO readiness Google Search Console setup Google Analytics 4 setup The structure should also support future SEO landing pages for catering, events, restaurant and local search topics. Payment and Invoice Requirements The recommended payment provider is Mollie Payments for WooCommerce, because it supports relevant German and European payment methods, including PayPal, credit card and Apple Pay. The system should support: PayPal credit card Apple Pay optional Klarna optional SEPA or bank transfer invoice payment for approved B2B customers prepayment or deposit logic for larger catering orders For invoices, the recommended setup is Germanized for WooCommerce Pro and/or PDF Invoices & Packing Slips. The system should be able to: automatically generate invoices attach invoice PDFs to order emails make invoices available in the customer account include company name, invoice address, VAT, cost center and PO number where relevant generate packing slips or internal order documents support manual invoice correction if an order changes Milestone Structure The project should be delivered in structured milestones. Milestone 1 – UX/UI Design Refinement & Design Finalization This first milestone replaces a generic kickoff milestone. The first real project output should be the refined, completed and development-ready design. Scope: full review of the existing Figma file UX/UI review and design direction alignment assessment of existing sections and visual logic layout, hierarchy and spacing refinement color system implementation completion of unresolved or missing sections Help and Contact page completion responsive desktop, tablet and mobile refinement mobile-first UX improvement animation concept definition prototype linking interaction logic developer handoff preparation Figma cleanup and component organization Expected result: a refined, complete, responsive, prototype-linked and development-ready Figma file. Milestone 2 – Technical Analysis & Architecture Planning Scope: technical analysis of the required WordPress setup recommendation of plugin stack assessment of WooCommerce vs. inquiry-based catering flow definition of catering workflow logic definition of 2-day lead-time logic definition of €350 minimum order value logic definition of payment and invoice setup third-party integration planning SEO structure review backend architecture planning performance and security concept staging/project environment preparation Expected result: a clear technical implementation plan before development starts. Milestone 3 – Frontend Development & Core WordPress Structure Scope: WordPress environment setup custom theme development global frontend structure header/footer/navigation development responsive page structure reusable component system homepage implementation restaurant pages event pages catering pages SEO-focused structural setup ACF-based backend content architecture Milestone 4 – Catering Flow, Animations & Integrations Scope: simplified catering inquiry or order flow 2-day lead-time logic €350 minimum order value logic WooCommerce or form-based implementation structured request/order handling upselling logic payment integration if applicable automatic invoice setup if applicable Lightspeed integration or embedding where applicable reservation system integration GSAP/custom interaction development scroll transitions and storytelling sections responsive interaction optimization multilingual-ready structure implementation Milestone 5 – SEO, Optimization, Testing & Go-Live Scope: technical SEO setup meta structure and SEO field setup performance optimization mobile optimization final content integration QA testing across devices checkout/order testing form testing payment testing invoice testing bug fixing and refinements analytics and tracking setup deployment and launch support final backend cleanup Ideal Candidate We are looking for someone who has experience with: custom WordPress development WooCommerce setup and customization ACF Pro responsive frontend development Figma-to-WordPress implementation GSAP or premium web animations technical SEO performance optimization multilingual WordPress setups payment provider integrations German WooCommerce compliance tools structured form or order workflows hospitality, restaurant, catering or booking websites Experience with the following tools is a plus: Mollie Germanized for WooCommerce PDF Invoices & Packing Slips Order Delivery Date Pro WooCommerce Product Add-Ons WooCommerce Product Bundles Fluent Forms or Gravity Forms WPML Rank Math ActiveCampaign Lightspeed CentralPlanner Cloudflare Kinsta Expected Result The final result should be a premium, responsive and technically stable WordPress website for Berg Blick Restaurant, Catering & Events. The website should: look and feel premium follow the approved Figma design work smoothly on desktop and mobile include a simple and user-friendly catering workflow enforce a 2-day catering lead time support a €350 minimum order value integrate relevant third-party tools allow online payment where required support automatic invoice creation remain easy to edit internally support multilingual and SEO-ready growth provide a solid base for future extensions The first phase should remain lean, practical and maintainable. The priority is to create a strong hospitality platform with a polished frontend, clear user journey and reliable operational workflows.
- Less than 30 hrs/weekHourly
- 1-3 monthsDuration
- ExpertExperience Level
- Remote Job
- One-time projectProject Type
Skills and Expertise
Activity on this job
- Proposals:10 to 15
- Last viewed by client:3 weeks ago
- Interviewing:1
- Invites sent:0
- Unanswered invites:0
About the client
- GermanyKochel Am See2:02 AM
- $10K total spent30 hires, 9 active
- 674 hours
- Individual client
Explore similar jobs on Upwork
How it works
Create your free profileHighlight your skills and experience, show your portfolio, and set your ideal pay rate.
Work the way you wantApply for jobs, create easy-to-by projects, or access exclusive opportunities that come to you.
Get paid securelyFrom contract to payment, we help you work safely and get paid securely.
About Upwork
- 4.9/5(Average rating of clients by professionals)
- G2 2021#1 freelance platform
- 49,000+Signed contract every week
- $2.3BFreelancers earned on Upwork in 2020
Find the best freelance jobs
Growing your career is as easy as creating a free profile and finding work like this that fits your skills.
Trusted by