Website Redesign
A strategic UX/UI redesign focused on improving information architecture, consistency, and development efficiency through a scalable design system.
The challenge
The existing website lacked structure, consistency and scalability. Its components were not standardized, leading to a slow and inconsistent experience across browsers and devices.
- No unified component system
- Inconsistent typography and spacing
- Weak hierarchy in content-heavy sections
- Absent design tokens for naming documentation
- Hard to maintain for non-technical teams
Solution
The objective was to redesign the website with a system-first approach that would:
- Improve content hierarchy and readability
- Establish a modular component system
- Reduce design-to-development gap and implementation cost
- Simplify future maintainability
Responsive layout · desktop, tablet and mobile breakpoints
UX Strategy
Information Architecture
Audited the existing site structure, mapping content to user goals and business objectives. Restructured responsible layout for the site instead of repeating it per page length.
Simplified Navigation
Simplified patterns navigation to reduce cognitive load and improve discoverability of key sections.
Design System & Technical Foundations
Audited the existing site structure, mapping content to user goals and business objectives. Restructured responsible layout for the site instead of repeating it per page length.
SiteMap
Mind Map
Design System
Design system overview · colour tokens, typography, button variants · 2026
Foundation
Established core foundations focusing on color tokens, typography scale, spacing system (8px grid), and responsive breakpoints.
Component Architecture
Developed 40+ reusable UI components (14+ shared, 20+ for UX library) with a clear hierarchy: atoms → molecules → organisms → groups.
Design tokens · colour, spacing and typography variables in Figma · 2026
Scalability & Figma Optimization
Key Improvements
The redesign improved user clarity by establishing a consistent visual system with a proper typographic hierarchy, allowing users to scan and navigate pages with ease.
Impact & Outcomes
The new system reduced design-to-development inconsistencies. The aligned design-to-code system made it easier to build new features across all the website.
Final design · 2026