Logistics Company
Web Development
End-to-end design, development, and content creation
for a fully responsive, multilingual website
💻 Custom JS Implementation
📄 50+ Responsive Pages
Context
ForePax Fulfillment: a logistics and fulfillment company specializing in cross-border e-commerce, offering shipping, warehousing, and packaging solutions. It also provides branded merchandise and printing services, supporting small to mid-sized businesses with scalable and transparent supply chain solutions.
Project Summary
My Role: UX/UI Designer & Web Developer
Tools: Figma, Wix, HTML/CSS, JavaScript, Canva, Midjourney
Final Deliverables
✦ 50+ fully responsive pages designed and developed for desktop, tablet, and mobile
✦ Custom shipping fee calculator built with advanced JavaScript for real-time cost estimates
✦ 200+ AI-generated visuals created for consistent, scalable visual storytelling
✦ Multilingual support integrated to serve a global user base
Highlights
Scroll Animation
To make the site feel dynamic and engaging, I implemented smooth scroll-based animations throughout key sections of the site. These animations guide users’ attention, enhance storytelling, and add a layer of polish that elevates the overall brand experience.
AI Generative Content
Since the company didn’t have existing product images available, I leveraged Midjourney and Canva to generate a cohesive suite of visuals for the website. This approach allowed me to maintain visual consistency across over 50 product pages, while also showcasing the company’s services in a polished, professional way.
Shipping Fee Calculator
The shipping fee calculator was one of the most important and complex features on the site. To help users easily estimate international shipping costs, I designed and built a custom shipping fee calculator that outputs seven different service plan quotes based on basic product inputs.
My Process:
• Competitive Analysis – Researched industry standards and compared similar tools across logistics platforms
• Wireframes – Sketched initial layouts to define structure and flow
• Interactive Prototype – Built a clickable prototype to test interaction patterns and logic
• User Testing – Collected feedback to validate usability and identify areas for refinement
• High-Fidelity Design – Polished the UI with visual consistency and clear input/output fields
• Implementation – Developed the final feature using JavaScript for real-time plan comparison and responsiveness
Multilingual Content Management
Given ForePax’s international user base, supporting multiple languages was a core requirement of the project. I designed and implemented a multilingual content system that ensured seamless user experience across different regions and languages.
To manage this efficiently, I structured the site’s content architecture to allow easy translation and updates, without duplicating design effort. Special attention was paid to layout flexibility and text length variations, especially when switching between English and Chinese. This ensured all pages remained visually consistent and accessible regardless of language.
.svg)
