Back to work
Case Study Web Design UI/UX E-Commerce

Botanikos

A premium ecommerce site for a botanical wellness brand. The design problem is positioning. A structured product grid and nature forward dark aesthetic that signals price tier before the first product page loads.

botanikos.com
Botanikos website, desktop view

Role

Web Designer

UI Design · E-Commerce · Development

Timeline

4 Weeks

Concept through delivery

Scope

E-commerce site

Design · Build · Deliver

Tools

Figma

HTML · CSS · JavaScript

The Challenge

Botanikos produces premium botanical teas and wellness products with genuine quality differentiation, but their online presence didn't communicate it. In a crowded wellness market, generic design was erasing what made the brand worth choosing.

The Gap

Most wellness brands use the same playbook: clean white space, generic product photography, and safe typography. Nothing signals why Botanikos is worth choosing over the shelf next to it. The brand story, nature-forward, artisanal, earned, was invisible online.

The Brief

Build a premium e-commerce site that communicates 'Where Nature Meets Excellence' on first load, structures the three product lines with clear hierarchy, and builds trust before the purchase decision through quality signals and brand storytelling.

Botanikos website full view

Research & Discovery

Competitive Analysis

I audited four wellness and botanical brand archetypes to map where the category consistently fails to communicate premium positioning, and where Botanikos could credibly stand apart.

Whittard of Chelsea

Heritage brand with strong retail presence. The website leans on legacy and volume, which communicates history but not artisanal quality. The visual language feels institutional rather than premium wellness.

TWG Tea

Genuine luxury positioning with gold accents and high-end photography. Strong visual language but positioned at a price point and formality level that would feel inaccessible to Botanikos's audience of informed but approachable wellness buyers.

David's Tea

Accessible and cheerful, built for volume and variety. But the bright, casual aesthetic actively signals the opposite of premium: it's a fun tea brand, not a serious wellness one. Quality claims get lost in the visual noise.

Generic WooCommerce

The default for small wellness brands: white background, grid of product thumbnails, a basic header, and a checkout. Functional but forgettable. When every small brand looks the same, price becomes the only differentiator.

Criteria TWG Tea David's Tea Generic WooCommerce Botanikos
Premium visual language Yes No No Yes
Approachable positioning No Yes Neutral Yes
Nature / brand storytelling Partial Partial None Central

Design

Premium, considered, and calm

botanikos.com
Botanikos desktop
Botanikos mobile

Nature Forward Aesthetic

Deep greens, earthy dark tones, and botanical imagery create an environment that feels like the brand: calm, considered, and premium. The palette communicates quality before a word is read.

Structured Product Grid

Three product lines (Botanikos for You, Botanikos for Big, and Standout Flavors), presented with clear hierarchy and consistent visual treatment. Customers can orient themselves and reach the right product category without friction.

Trust Before Purchase

A dedicated "Reasons why Botanikos is a good choice" section positioned between products and checkout, addressing hesitation with quality claims and brand values before the purchase decision is made.

Process

How it came together

01

Brand Positioning

Identifying what "premium botanical" means in a wellness market where every brand claims natural. The answer: restraint, depth, and a visual language that feels earned, not marketed.

02

Visual Design

Dark nature palette, refined typography, and botanical photography. An aesthetic that evokes the product experience: calm, intentional, and elevated above the noise of wellness category defaults.

03

UX Architecture

Hero → Products → Why Botanikos → Quality Stats → Blog. A sequence that builds desire first, addresses doubt second, and provides ongoing brand content through editorial. Every step moves toward purchase or return visit.

04

Build & Launch

Fully responsive e-commerce front end, fast-loading product imagery, smooth category navigation, and a blog architecture designed to grow organically over time.

Results

Impact

3

Product lines clearly categorised, each with its own audience and visual identity within the site

100%

Natural quality metrics surfaced as brand proof, communicating standards before purchase

Delivered

Completed and delivered, mobile-first, with an editorial blog driving organic reach

Botanikos now has a digital home that earns trust before a product is added to cart. The nature-forward aesthetic differentiates the brand in a saturated wellness market, and the structured product architecture makes discovery effortless, from first visit to repeat customer.

Next Project

Oblivium →

Brand Identity · Web Design · Development