Nativa — UX/UI Revamp: Audit, Wireframe & Design System

01 — UX Audit

Current site diagnostic

A review of nativa.co.za identifying usability issues, missed opportunities, and specific recommendations. Issues are ranked by severity.

Critical Issues

Warnings

Opportunities

Information Architecture & Navigation

Navigation Overload — 50+ Items

The main navigation simultaneously exposes 22+ brands and 30+ product categories. Users are presented with over 50 menu items before they've had a chance to orient themselves. This creates decision paralysis and increases bounce rates, especially on mobile where the full menu is overwhelming.

Users abandon navigation and resort to search (if they can find it), or leave the site entirely. Mobile users are worst affected.

Critical

Recommendation

Restructure navigation into two primary entry points: "Shop by Brand" and "Shop by Health Need." Implement a structured mega-menu with visual brand icons and grouped health categories. Let users self-select their browsing journey rather than listing everything at once.

No Clear User Journey Mapping

The site treats all visitors identically. There's no consideration for the different user types who visit: health-conscious consumers browsing by condition, existing customers looking for specific products, healthcare professionals researching ingredients, or retailers checking the portfolio. Each has a different intent, but the site funnels everyone into the same flat product grid.

Users who don't already know what they're looking for have no guided path to discovery. Conversion to "Where to Buy" suffers because the journey between landing and purchase intent has no structure.

Critical

Recommendation

Introduce dual-path homepage architecture: consumers enter via health categories ("What do you need help with?"), while brand-aware users enter via brand browsing. Consider a light "health concern" quiz or guided selector as an engagement tool. Each path should end at "Where to Buy."

⚠

Product Taxonomy Is Flat

Products are organised into categories, but the taxonomy is a single flat list with no hierarchy. "Allergies & Hayfever" sits alongside "CBD" alongside "Sports" — there's no grouping by body system, life stage, or concern type. With 30+ categories, users must scan the entire list to find relevance.

Discovery suffers. Related categories (e.g., "Joint, Bone & Muscle" and "Sports") aren't connected, meaning cross-sell opportunities are missed.

Warning

Recommendation

Introduce a two-level taxonomy. Group categories into 6-8 parent clusters (e.g., "Body & Movement" containing Joint Health, Sports, Bone Health). This reduces cognitive load and enables smarter cross-linking between related product areas.

UX & Interaction Design

"Where to Buy" Is Buried

This is the single most important conversion action on the site — every product should seamlessly route users to Clicks, Dis-Chem, or other retailers. Currently, the "Where to Buy" link is a standard navigation item with no visual priority. On individual product pages, retailer links are inconsistent and sometimes missing entirely. The path from "I want this" to "I can buy this" is broken.

The entire purpose of the catalogue is to drive purchase through retail partners. A weak "Where to Buy" experience means the site fails at its core objective.

Critical

Recommendation

Make "Where to Buy" the primary CTA across the entire site: persistent button in the navigation, prominent retailer strip on the homepage, and a sticky "Where to Buy" bar on every product page (especially mobile). Include direct deep-links to the product on each retailer's online store where possible.

Mobile Experience Is Scaled-Down Desktop

The mobile layout is a responsive squeeze of the desktop design rather than a mobile-first experience. Navigation is cramped, product browsing requires excessive scrolling, and touch targets are inconsistent. With an estimated 60%+ of traffic coming from mobile devices, this represents the majority user experience.

Mobile users are more likely to bounce. The "Where to Buy" conversion path is particularly poor on mobile, where it should be easiest (tap → open retailer app/site).

Critical

Recommendation

Rebuild mobile-first. Prioritise thumb-friendly navigation, collapsible category filters, swipe-friendly brand/product browsing, and a sticky "Where to Buy" CTA that persists on scroll. Consider bottom-sheet navigation pattern for mobile product filtering.

⚠

Search Is Unprioritised

With 200+ products across 22 brands, search should be a primary discovery tool. Currently, the search function is a standard WordPress search with no product-specific optimisation — no auto-suggest, no category filtering, no "did you mean" handling, and no results prioritisation by relevance.

Users who know what they want but can't navigate the menu have no reliable fallback. Search abandonment leads to site abandonment.

Warning

Recommendation

Implement a prominent search bar with auto-suggest that surfaces brands, products, and health categories as the user types. Include product imagery in search results and ensure "Where to Buy" links appear directly in search result cards.

Visual Design & Content

⚠

Outdated Visual Design

The homepage relies on RevSlider-based carousels with outdated content — a design pattern that has been widely abandoned due to poor engagement metrics. The overall visual language feels 2018-era: heavy plugin styling, inconsistent spacing, mixed typography, and generic stock photography. For a company with national retail presence, the site doesn't communicate the scale or credibility of the brand.

First impressions form in under 3 seconds. The current design undermines brand trust and signals a company that isn't investing in its digital presence.

Warning

Recommendation

Replace sliders with a purposeful, static hero section. Implement a consistent design system (see Section 03) across all templates. Prioritise clean typography, generous whitespace, and brand-consistent imagery over plugin-driven effects.

Blog / Content Authority Is Dormant

The health blog hasn't been updated since 2021. For a healthcare brand, content authority — educational articles, ingredient guides, condition explainers — is a significant trust signal and an SEO driver. An abandoned blog actively signals neglect and hurts search rankings for health-related queries that Nativa should own.

Missed SEO opportunity. Reduced topical authority in Google's health/wellness SERP. Lost engagement loop (content → product → retailer).

Opportunity

Recommendation

Redesign the blog as a "Health Hub" or "Wellness Centre" with category filtering by health concern. Integrate related products within editorial content. Content strategy to be handled separately, but the UX should invite and reward content investment.

No Brand Storytelling or Social Proof

Nativa has been in the market since 1999 — over 25 years. The site doesn't communicate this heritage. The "About" section is a single paragraph. There's no leadership visibility, no brand story arc, no trust signals (years in market, product count, retail partner logos), and no consumer testimonials or endorsements.

Visitors have no reason to trust Nativa over competitors. The brand's strongest differentiator — decades of experience and national retail presence — is invisible.

Opportunity

Recommendation

Add a trust strip on the homepage (25+ years, 22+ brands, 200+ products, X retail partners). Expand the About page with brand story, timeline, and team visibility. Integrate retailer partner logos prominently. Consider consumer reviews on product pages.

Performance & Technical Debt

The site loads multiple heavy plugins including RevSlider and WooCommerce storefront defaults that aren't needed for a catalogue-only experience. This adds unnecessary weight to page loads, increases render time, and creates potential security vulnerabilities through outdated plugin versions.

Slower page loads directly correlate with higher bounce rates. Google's Core Web Vitals impact search rankings. Every second of load time costs engagement.

Opportunity

Recommendation

Build a lightweight custom theme. Remove RevSlider and unnecessary plugins. Optimise images and implement lazy loading. Target a 90+ Lighthouse performance score. Retain WooCommerce backend for product data structure but strip front-end bloat.

02 — Homepage Wireframe

Proposed page structure

A low-fidelity wireframe of the revised homepage, showing the information hierarchy, content blocks, and user flow from landing through to "Where to Buy."

nativa.co.za

LOGO

Where to Buy

Hero Section

Explore Brands

Shop by Need

Trust Strip

25+

Years

22+

Brands

200+

Products

30+

Visual language & components

A modern, trustworthy design system that positions Nativa as South Africa's leading home of healthcare brands — clean, confident, and consumer-friendly.

Design Principles

Trust First

Every design decision should reinforce credibility. Clean layouts, consistent spacing, professional typography, and visible trust signals (years in market, retail partners, product count) build confidence in a healthcare brand.

Discovery Over Display

The site isn't a brochure — it's a discovery tool. Users should find what they need through intuitive browsing (by brand or health need), not by memorising a product catalogue. Every section earns its place by moving users closer to "Where to Buy."

Mobile-First, Always

Design starts at 375px and scales up. Touch targets, thumb zones, scroll behaviour, and content density are optimised for the hand, not the mouse. The majority of users will experience this site on a phone.

Content Over Chrome

Product imagery, brand identity, and clear copy do the heavy lifting. No decorative sliders, no gratuitous animations, no plugin-driven effects. Whitespace and hierarchy create the visual interest — not embellishment.

Colour Palette

Nativa Green

#0B6E4F

Primary — brand anchor, nav, headings

Leaf

#14A073

Secondary — hover states, active elements

Teal

#0A9396

Accent — brand labels, product tags

Coral

#E76F51

CTA — "Where to Buy", primary actions

Amber

#F4A261

Warm accent — badges, highlights

Navy

#1A2332

Headings, dark backgrounds

Slate

#636E72

Body copy, secondary text

Pale Green

#F4FAF7

Background — sections, cards

60% — Green

30% — Coral

10%

Tier 1: Green — Brand, structure, trust Tier 2: Coral — Action, conversion, CTAs Tier 3: Teal/Amber — Category differentiation

Typography

Display

Your Health, Our Purpose

Outfit 800
42px / 1.05

Heading 1

Explore Our Brands

Outfit 700
32px / 1.15

Heading 2

Joint, Bone & Muscle Health

Outfit 600
24px / 1.25

Heading 3

OsteoEze Gold Flex Active

Outfit 600
18px / 1.35

Body

Nativa has been developing and marketing quality nutritional and alternative health products since 1999, improving the quality of life for South African consumers across 30+ health categories.

DM Sans 400
16px / 1.7

Body Small

Available at Clicks, Dis-Chem, and leading pharmacies nationwide.

DM Sans 400
14px / 1.65

Editorial

Trusted by healthcare professionals and families for over two decades.

Source Serif 4
18px / 1.75

Overline

IMMUNE SUPPORT · 12 PRODUCTS

DM Sans 700
12px / Uppercase / 0.1em

Stat Number

25+

Outfit 800
48px / 1.0

UI Components

Buttons

Primary: Brand actions. Secondary: Supporting navigation.
CTA (Coral): Conversion — "Where to Buy" only.
Ghost: Tertiary, low-priority links.

Product Card

💊

OsteoEze

Gold Flex Active

Joint & Bone Health

Where to Buy →

Brand label (Teal overline) → Product name (Outfit 600) → Category tag (pill) → "Where to Buy" CTA (Coral text link). Product image dominates.

Brand Card

OsteoEze

Joint Health

Linctagon

Immune Support

Hover reveals green border. Brand icon uses first letters on coloured background. Links to brand landing page.

Category Tags

Immune Support Joint Health Energy Digestive Women's Health Sports Sleep

Pill-shaped, border-only at rest. Hover: green border + pale green fill. Used for category browsing, product tags, and filtering.

Navigation Bar

nativa

Our Brands Products Health Hub About 🔍 Where to Buy →

Wordmark logo in Outfit 800 (Nativa Green). Clean nav with 4-5 links max. Search icon for quick access. "Where to Buy" is the only coloured element — Coral CTA, always visible. Sticky on scroll. Mobile: hamburger + persistent "Where to Buy" button.

Spacing Scale

--space-xs

4px — tight gaps

--space-sm

8px — inline spacing

--space-md

16px — component padding

--space-lg

24px — card padding, gaps

--space-xl

32px — section internal padding

--space-2xl

48px — section gaps

--space-3xl

64px — major section breaks

--space-4xl

80px — page section padding

Border Radius & Shadows

4px — sm

8px — md

12px — lg

20px — pill

50% — circle

shadow-sm

shadow-md

shadow-lift

shadow-lg

UX Audit, Wireframe& Design System

Current site diagnostic

Navigation Overload — 50+ Items

No Clear User Journey Mapping

Product Taxonomy Is Flat

"Where to Buy" Is Buried

Mobile Experience Is Scaled-Down Desktop

Search Is Unprioritised

Outdated Visual Design

Blog / Content Authority Is Dormant

No Brand Storytelling or Social Proof

Performance & Technical Debt

Proposed page structure

Visual language & components

Trust First

Discovery Over Display

Mobile-First, Always

Content Over Chrome

UX Audit, Wireframe
& Design System