Home

Swire Shipping

Roles:UI/UX Design, Product Design, Front-End Development, Brand Strategy, Site Architecture Design Tools:Figma, Whimsical
Development Tools: HTML, CSS, JavaScript, React.js, Node.js

Visit Website Here
(This version is currently live and reflects my full redesign and development work.)
Project Summary:
Swire Shipping is a global liner shipping company connecting the Asia-Pacific with tailored shipping solutions. I conducted a UX/UI audit and redesign strategy to improve content clarity, modernize visual hierarchy, and better showcase the company’s scale, services, and legacy.
The Challenge:
The original site had strong content but lacked a cohesive visual system and clear service hierarchy. Key offerings like regional route maps, service types, and inquiry CTAs were buried or inconsistent across screen sizes, affecting user engagement.
Key Improvements:
Navigation & Layout:
  • Implemented cleaner menus and sticky header for easier access to services, routes and contact.
  • Introduced responsive design to adapt seamless on mobile and tablet views.

Visual Design System:
  • Introduced consistent typography and color palette aligned with Swire’s maritime branding.
  • Clean card-based layout for shipping services and port information.
Service Showcase:
Redesigned the Services section into digestible sections:
  • Australia, NZ, Polynesia, Pacific-North Asia routes 
  • Enhanced interactive route maps with hover states and tooltips.
Route Maps & Port Info:
  • Migrated static maps to responsive infographic-style designs.
  • Created dynamic port schedule tablets, sortable by region.
Contact & Inquiry Flow:
  • Clean and accessible contact page with region-specific forms.
  • Added “Request a Quote” modals for better lead capture.

My Contributions:

UX Audit & Content Mapping:
Evaluated user flow from homepage to port schedule lookup and contact forms.

Wireframes & Interaction Flow:
Mapped flows for key tasks such as finding a port, contacting an agent, or requesting quotes.

Visual System Suggestions:
Proposed updated layout, spacing, and hierarchy inspired by Swire’s maritime heritage and industrial design sensibilities.

Componentized Layout System:
Broke down pages into a scalable design system using sections like “Header”, “Hero”, “Service Cards”, “CTA”, and “Footer”, ideal for clean React component structure.
Outcome:
This design strategy served as an exercise in modernizing a high-stakes corporate site with rich content and legacy branding. It allowed me to develop skills in auditing dense websites, building IA from scratch, and balancing corporate tone with user-centric design.

← Prev    Index    Next →