Case Study
Case Study
SYNTHESIS – Redefining the Botanical E-Commerce Experience
SYNTHESIS – Redefining the Botanical E-Commerce Experience
SYNTHESIS – Redefining the Botanical E-Commerce Experience
Role
Product UX Designer
Product UX Designer
What
Website
Website
Timeline
2 Weeks
2 Weeks
Project Overview
Project Overview
The current online plant market is saturated with functional, utilitarian, or overly rustic designs. While practical, many competitors fail to capture the emotional and aesthetic connection users have with indoor gardening as a form of interior design.
The current online plant market is saturated with functional, utilitarian, or overly rustic designs. While practical, many competitors fail to capture the emotional and aesthetic connection users have with indoor gardening as a form of interior design.
Goal
Goal
To design a visually immersive, polished e-commerce interface for "Synthesis". A brand that positions plants as high-end design objects. The goal was to balance operational clarity (shopping) with an editorial aesthetic (inspiration)
To design a visually immersive, polished e-commerce interface for "Synthesis". A brand that positions plants as high-end design objects. The goal was to balance operational clarity (shopping) with an editorial aesthetic (inspiration)
Brand Identity & Concept
Brand Identity & Concept
The Name: "Synthesis" represents the convergence of science (photosynthesis) and design (creating a whole). The concept brings light, nature, and design into one "living idea."
The Name: "Synthesis" represents the convergence of science (photosynthesis) and design (creating a whole). The concept brings light, nature, and design into one "living idea."
Visual Language
Visual Language
Typography: I paired Cinzel (Serif) for headlines to evoke elegance and tradition, with Poppins (Sans-Serif) for body text to ensure modern readability and clean UI scaling.
Color Theory:
Deep Forest Green (#1E3F20): Used as a primary anchor to ground the design in nature without being cliché.
Accent Green (#73A532): Used for primary actions and highlights to guide the user's eye.
Black/Dark Backgrounds: To create a "Dark Mode" native feel, allowing the vibrant greens of the product photography to pop.
Hover over & see the action
Click on it & see the action
Hover over & see the action
Click on it & see the action
The Solution
The Solution
I utilized a dramatic, low-light photography style with high contrast. The hero section features a minimal headline ("Let your space bloom with Happiness") and clear navigation, prioritizing mood over clutter.
I utilized a dramatic, low-light photography style with high contrast. The hero section features a minimal headline ("Let your space bloom with Happiness") and clear navigation, prioritizing mood over clutter.
Product Display Strategy: Instead of standard white-background catalog shots, I opted for
Product Display Strategy: Instead of standard white-background catalog shots, I opted for
Dramatic Lighting
Dramatic Lighting
Plants are showcased like sculptures.
Floating Cards
Floating Cards
Floating Cards
The "Best Sellers" and "New Arrivals" sections use subtle containment to separate products without rigid grid lines, maintaining an airy flow.
The "Best Sellers" and "New Arrivals" sections use subtle containment to separate products without rigid grid lines, maintaining an airy flow.
Information Hierarchy
Information Hierarchy
" Price " and "Add to Cart" buttons are distinct but not intrusive, maintaining the luxury feel.
" Price " and "Add to Cart" buttons are distinct but not intrusive, maintaining the luxury feel.
" Price " and "Add to Cart" buttons are distinct but not intrusive, maintaining the luxury feel.
Brand & Style Guide
Brand & Style Guide
Logo Theory
Wordmark Logo
In science
Combining ideas, substances, or parts
(e.g., photosynthesis = plants making food by combining sunlight, water, CO₂
In Design
Bringing together research, insights, and ideas to create a complete solution.
Photo
( light/visuals )
Syn
( together )
Thesis
( an idea/concept )
Bringing light, nature, and design together into one living idea.
A
a
Poppins
Primary Font
A
CINZEL
Secondary Font
Color Theory
Color Theory
Color Theory
#75AC27 ( Primary Colour )
#2D6632 ( Tertiary Colour )
#FFFFF ( Secondary Colour )
