Tawazon Redesign
Role
Sole UX Researcher & Designer
Client
Tawazon Chemical Co. LLC
Overview
Tawazon Chemical Co. LLC is a specialty chemical distributor headquartered in Dubai, UAE — part of the Ghobash Group with 35+ years of operations across 40+ countries. This case study documents the UX research and redesign of tawazon.com, taking it from a basic company brochure to a product-first, self-service platform that matches the standards set by global competitors.
Why the Redesign
A heuristic evaluation using Nielsen's 10 Usability Heuristics scored tawazon.com at 5.8 out of 10 — a full 3.1 points behind the industry best-in-class (IMCD Group at 8.9/10). The evaluation uncovered 2 critical issues, 4 major issues, and 4 minor issues that directly impact the site's ability to convert B2B chemical buyers.
5.8
UX Score
out of 10
2
Critical Issues
blocking conversion
4
Major Issues
limiting usability
−3.1
Gap vs Best
IMCD at 8.9/10
The two most critical failures are the complete absence of a product catalog and the lack of any technical documentation (TDS/SDS). These are baseline requirements for enterprise chemical procurement. Without them, the site cannot complete the evaluation phase of any B2B purchase cycle.
Competitive Research
A comprehensive competitive analysis was conducted across 9 competitors— 3 global giants and 6 regional players — spanning the Middle East, Africa, and Asia specialty chemical distribution market. The research mapped each competitor's industry coverage, geographic reach, capabilities, and threat level to Tawazon.
Brenntag SE
CriticalWorld's largest chemical distributor. 10,000+ product portfolio, CO₂Xplorer carbon tracking tool.
IMCD Group
Critical80 in-house technical labs globally. EcoVadis Platinum rating (top 1%). Formulation co-creation.
REDA Group
CriticalNear-identical geographic focus to Tawazon. Multi-brand structure across 9+ verticals.
Information Architecture
The proposed IA restructures tawazon.com from a brand-first brochure to a product-first, self-service platform. Every structural change traces directly to a heuristic finding, targeting an improvement from 5.8/10 to 8.3/10across Nielsen's 10 heuristics.
IA Design Principles
Buyers arrive with a product in mind, not a company in mind. The IA must be product-first and segment-specific — matching how B2B procurement actually works.
Documentation is the primary conversion blocker. TDS, SDS, and product specs must be top-level destinations, not buried in contact forms.
Self-service scales; manual contact does not. The redesign introduces product search, RFQ flows, and a customer portal to eliminate friction.
Key Structural Changes
Products
NEWH1, H6, H7Searchable chemical catalog with CAS number lookup, TDS/SDS downloads, and per-product RFQ.
Resources
NEWH5, H10TDS library, SDS library, application guides, and FAQ — closing the documentation gap.
Customer Portal
NEWH3, H7Login, RFQ submission & tracking, order history, document vault, account manager contact.
Sustainability
NEWH4, H10ISO certifications with explanations, ESG roadmap, EcoVadis progress, annual report.
Industries
ENHANCEDH4Uniform template across all 8 segments with segment-specific RFQ and principal cards.
Contact
ENHANCEDH3, H9Enquiry type selector, regional office directory, inline validation, success/error states.
Sitemap
The proposed site map restructures tawazon.com from 5 top-level sections to 10 — adding Products, Resources, Sustainability, and Customer Portal as entirely new destinations. The full map includes 90+ pages across 4 depth levels, with each new or enhanced section mapped to the specific heuristic it fixes.
tawazon.com (Homepage) │ ├── Industries (ENHANCED — H4) │ ├── Coatings ├── Plastics │ ├── Inks ├── Packaging │ ├── Construction ├── Fiberglass │ ├── Rubber └── Food Additives │ └── [Uniform template: Overview · Products · Principals · RFQ] │ ├── Products (NEW — H1, H6, H7) │ ├── Search & Filter (by name, CAS, segment, supplier) │ └── Product Detail (specs · TDS · SDS · CoA · RFQ) │ ├── Resources (NEW — H5, H10) │ ├── TDS Library ├── Application Guides │ ├── SDS Library └── FAQ │ ├── Suppliers (ENHANCED — H2, H6) │ ├── Filter by segment │ ├── Supplier cards (name · country · scope) │ └── Become a Supplier │ ├── About Us (ENHANCED) │ ├── Who we are ├── Ghobash Group │ ├── MD message ├── Global presence map │ └── Certifications (ISO 9001 · 14001 · 45001) │ ├── Sustainability (NEW — H4, H10) │ ├── ISO certifications ├── EcoVadis progress │ ├── ESG roadmap └── Annual report │ ├── Media (ENHANCED — H8, H10) │ ├── Technical Blog (formulation · regulatory · trends) │ └── News & Events │ ├── Careers · Contact (ENHANCED — H3, H9) │ └── Customer Portal (NEW — H3, H7) ├── Login / Register ├── Order history ├── RFQ submission ├── Document vault └── RFQ tracking └── Account manager
AI-Assisted Development
The redesign was built as a Next.js 15 app with Tailwind CSS and Shadcn/ui — using Cursor with Claude Sonnet as the development accelerant. Research and IA came first; components shipped once the design system and data models were locked.
Framework
Next.js 15 (App Router)
Styling
Tailwind CSS
Components
Shadcn/ui
AI-assisted dev
Cursor + Claude Sonnet
Design research
9-competitor analysis
IA methodology
Nielsen's 10 heuristics
How Cursor changed the build
Less like autocomplete — more like a senior dev who has also read all the documentation. Once the design system was established (Tailwind config, colour tokens, typography scale), plain-language prompts produced production-quality TSX that needed only light refinement.
Component generation at speed
IndustryPageWithHeader, KpiStatGrid, LocationsOffices, and WorldMapWithMarkers all started as Cursor prompts. Shadcn's unstyled-but-accessible components (Button, Dialog, Sheet, Badge, Field) extended cleanly — field.tsx became the workhorse across contact forms, RFQ inputs, and future portal screens.
App Router architecture
Next.js 15 file-system routing mapped directly to the IA — one dynamic [segment] template drives all 8 industry pages from shared data, eliminating copy-paste drift. Server Components for static pages; Client Components only where interactivity was needed (language switcher, contact form, mega-menu).
Cursor for refactoring
When page-modules.tsx started doing too much, describing the problem yielded a clean split into section-header.tsx, site-section-block.tsx, and section-highlight-list.tsx — a 90-minute refactor compressed to ~20 minutes.
Research → shipped features
Competitive findings didn't sit in a PDF — they became the site. CAS-searchable catalog, TDS/SDS library, sustainability hub, and customer portal each trace back to a specific gap spotted across Brenntag, IMCD, and regional peers.
App Router structure
app/ ├── industries/ │ └── [segment]/ │ └── page.tsx ← one template, 8 segments ├── about-us/ │ └── page.tsx ├── careers/ │ └── page.tsx ├── locations/ ← serves as Contact │ └── page.tsx └── products/ ← coming soon └── [slug]/ └── page.tsx
What's live vs. in the queue
Phase 1 — Foundation
Complete- →Homepage with KPI stats, testimonials, and ISO callout
- →All 8 industry pages with uniform template and product sub-categories
- →About Us with world map, Ghobash Group section, and team grid
- →Careers with live positions and application flow
- →Contact / Locations — all 9 offices across 7 countries
- →Language switcher UI (EN · AR · FR · SW · ID · HI)
Phase 2 — Discovery
Next- →Products catalog with CAS search
- →TDS/SDS resource library
- →Suppliers page with named, filterable cards
- →Sustainability hub (ESG · EcoVadis · ISO scope)
- →Arabic + French content
Phase 3 — Engagement
Future- →Customer portal (RFQ + document vault)
- →Swahili / Bahasa / Hindi content
- →Application guides per segment
- →CoA on-request automation
Foundation live at tawazonredesign.vercel.app — homepage, all 8 industry segments, about, careers, and all 9 office locations. Product catalog, resource library, sustainability hub, supplier directory, and customer portal are in the build queue.