40+ Page SaaS Website Designed, Built, and Shipped in Under 12 Weeks
Portless's old website couldn't sell their story. We designed and shipped a 40+ page Webflow SaaS site in under 12 weeks. Here's how it came together.
The Problem
Portless has a fast-growing business, but a website that was very out-of-date. The old site was thin on structure, not directly aligned to the value propositions of the company which is shipping DTC orders directly from Asia to 75+ countries so brands don't have to pre-stock inventory abroad.
A few things were breaking because of it:
• The value propositions were not updated. Visitors couldn't tell in 10 seconds why Portless was different from a traditional 3PL.
• The site was missing entire page types most SaaS buyers expect, like solutions, service breakdowns, how-it-works, and calculators.
• The visual language felt dated and didn't reflect the sophistication of the operation behind it.
• Marketing was doing the heavy lifting to make up for it. Trust, education, and conversion were all leaking at the website layer.
The business was ready. The website wasn't.
Our Approach
We kicked things off with Chris de Jong (VP of Marketing) and the Portless team for a deep knowledge transfer. Competitive landscape, ICP segments, service architecture, and how their China fulfilment center actually operates day to day. That context shaped everything that came next.
What does a Webflow website design project for a SaaS company involve?
A SaaS website design project on Webflow usually covers information architecture, content direction, UX wireframes, UI design, custom development in Webflow with reusable components, animations, and SEO-ready page structures. All of it built so the marketing team can scale pages later without needing a developer for every change.
Our process ran in four tight phases:
1. IA & Content Direction. We reworked the sitemap with Chris, mapped each page to a specific buyer intent, and solved the classic "design first or content first" dilemma with a questionnaire-per-page framework.
2. Wireframes. Structural wireframes built directly from the questionnaire answers, so content and layout got locked in together.
3. UI Design. A system-driven UI with custom illustrations and motion cues to make abstract logistics concepts feel tangible.
4. Webflow Development. The entire site built on Webflow using unified components, custom-coded calculators, and scroll-based animations. All of it optimized for speed and SEO.
Key Design Decisions
1. Questionnaire-first content framework (solving the design vs content deadlock)
Problem: Portless didn't have finalized copy, and we didn't have finalized designs. That's the classic chicken-and-egg problem that stalls most website projects for months.
Solution: We built a short, targeted questionnaire for every single page. Each one pulled out the audience, the intent, the objections, and the proof needed. Portless filled these in, and we translated them straight into wireframes with content direction baked in.
Why it worked: It gave both sides something concrete to react to instead of a blank page. Content and structure evolved together, which cut out most of the back-and-forth that usually eats project timelines.
2. Unified component system in Webflow (built for marketing autonomy)
Problem: With 30+ pages and an active marketing team running experiments, the site couldn't be a static one-time build. Every new landing page or SEO experiment would otherwise turn into a dev ticket.
Solution: We built the entire site on Webflow's latest unified components. Every hero, feature block, comparison table, testimonial layout, and CTA is a reusable component the marketing team can drop into any new page.
Why it worked: Portless can now spin up campaign pages, product landers, and SEO pages without help from engineering. The design system holds visual consistency on its own.
3. Custom-coded calculators inside Webflow's native GUI
Problem: Portless needed interactive calculators (savings, shipping, timeline) as core conversion tools. But they also needed the marketing team to edit copy, styling, and inputs later without touching code.
Solution: We implemented custom React-style logic directly through Webflow's native GUI and attribute-based scripting. The calculators run smoothly, look native to the site, and stay fully editable through the Webflow editor.
Why it worked: No third-party embed dragging down page speed, no separate app to maintain, and marketing can update every field, label, and formula input themselves.
4. Custom illustrations and scroll animations for abstract logistics concepts
Cross-border fulfilment is invisible work. Pallets, customs, last-mile handoffs. We built a custom illustration set and scroll-triggered animations (especially on the How It Works page and the Operations tour) that make the invisible visible. This wasn't decoration. It was the fastest way to shorten "what does Portless actually do" from a paragraph into a glance.
The Outcome
A faster launch, a stronger website, and a marketing team that can now move on its own.
40+ pages designed, developed, and launched in ~10 to 12 weeks. A scope that typically runs 20 to 24 weeks.
Fully responsive and SEO-ready. Technical foundations set up so the marketing team can compound organic growth over time.
Marketing autonomy unlocked. The team can now build new pages and run experiments without waiting on developers.
The part we can't say about ourselves
Massive congratulations and thanks to you and the team for helping us launch the new site. We are thrilled with the results so far and the team is very excited by the launch and how good everything looks.
Chris de Jong
VP of Marketing, Portless
Running a SaaS or e-commerce business where your website isn't pulling the weight your product deserves?
Explore more
From Google Insider to Market Leader. Branding and Web Design for ScalixAI
ScalixAI needed a brand and website that matched the weight of its founder's expertise. We designed the logo, built the brand identity, and developed the full site in Framer. Creating something bold, credible, and impossible to scroll past.
B2B website redesign that made a complex industrial product click
RAYHAWK builds autonomous railcar loading for grain terminals. Machine learning and a robotic gantry open, seal, and inspect the railcars, so no one has to climb on top.