Click To Skip To Main Content

frontend , ux/ui , static

Floriquora

Floriquora is a boutique flower shop that needed an elegant, minimalist website to reflect its delicate, curated offerings. The goal was to create a romantic, modern space where customers could browse beautiful bouquets, read floral tips on a blog, and get in touch — without overwhelming them with the complexities of a full eCommerce system.

The brand identity was rooted in grace, softness, and personal touch, targeting a mostly female audience seeking unique floral arrangements for intimate moments.

Key Features

  • Grid-based, soft design with romantic floral visuals
  • Handwritten script accents and serif/sans-serif font pairing
  • Static bouquet "favorites" feature via localStorage
  • Smart contact form autofills based on selected bouquet
  • Decap CMS for bouquet entries, categories, and blog content
  • Mailchimp-integrated newsletter signup
  • Blog-ready structure (non-wired in demo)
  • Fully responsive, WebP-optimized, and accessible

Role/Services

frontend , ux/ui , static

Date

Dec 7, 2023

View Project
Floriquora - cover image

I was hired on a freelance contract to design and develop the website from scratch, including layout, CMS configuration, styling, and interaction logic. While the site mimics the behavior of an eCommerce platform, it’s actually a static build — optimized for speed, elegance, and easy content management via CMS.


The project was built using 11ty (Eleventy) with Nunjucks, styled using Tailwind CSS and daisyUI, and powered by Decap CMS for content management. The design system prioritized white space, modular symmetry, floral illustration accents, and emotional UX flows.

floriquora - desktop layout

Key contributions included:

Complete Page Design & Development: Built homepage, flower category pages, bouquet listings, contact form, and newsletter signup. Carefully structured sections to allow white space to balance image-heavy areas.

Soft UI Styling: Applied a muted pastel color palette with blush pinks, soft grays, and deep burgundy accents. Fonts included elegant serifs for headings, modern sans-serifs for body, and a handwritten script for logo and hero text to create a personal, emotional impression.

Favorites Functionality (Static Simulation): Implemented a front-end-only system to "favorite" bouquets, mimicking the behavior of an eCommerce wishlist using JavaScript and local storage — no backend required.

Contact Form with Pre-Filled Intent: Replaced traditional “Buy Now” functionality with a smart contact form trigger — the CTA autofills the form with a subject and message like: Subject: Lilies Message: Hello, I'm interested in the "Lilies". Could you provide some details on the features, pricing, and availability? This lowers friction and makes the customer journey feel more guided and human.

CMS & Newsletter Integration: Connected Decap CMS for managing products, categories, and blog content. Newsletter signup was wired to Mailchimp, but built flexibly for future provider swaps.

Performance & Accessibility: Optimized images with sharp, converted to WebP, lazy-loaded visuals, used semantic HTML5, and ensured screen reader support.

The site also includes a blog section (disabled on the demo version), intended for floral tips, seasonal guides, and care instructions.

While currently hosted as a demo version, Floriquora functions as a full-featured boutique florist site. The design has received praise from collaborators for its elegance, soft animations, and emotionally intelligent UX — including the non-intimidating inquiry form and wishlist simulation.