From Overall Layout to Wireframe to final UI A landing page, for early-stage startups, is about capturing initial interest and validating demand as quickly as possible. When designed correctly, it helps you test the market while simultaneously acquiring your first users. Used incorrectly, it can damage your credibility even before the product is born.
From my observations, especially in early-stage startups, founders either design the landing page themselves or delegate it to interns. They move intuitively, prioritize “looking nice,” and adopt a product-obsessed storytelling full of technical jargon. All of these are fatal mistakes.
Before designing Tedaarik’s pre-launch waitlist landing page aimed at acquiring its first users, I started by researching the answer to a simple question: what makes a good landing page? To do this, I reviewed various SaaS landing page examples, conversion-focused design principles, and core UX resources.
In this article, you will quickly learn what an effective landing page should look like and see how these principles are applied by walking through the steps of a real design process.
- Early Research Notes Before jumping into design, there were a few things that had to be clearly defined.
Early research notes 1.1 What is the goal of the landing page? A landing page should promise a single thing and guide the user toward a single action. Should the user join a waitlist, try the product, or request a demo?
For Tedaarik, the goal was gaining early users.
1.2 Who are we talking to? We needed to decide who the landing page was for. Chefs, developers, or investors? A landing page should speak to a very specific person.
This requires clearly defining the customer persona and, more importantly, understanding how that person’s daily life is structured, what problems they face, and what kind of language resonates with them.
1.3 What action do we expect the user to take? At a high level, the goal was for users to land on the website, understand that the product solves a real pain point for them, and join the waitlist.
User behavior on landing pages is not reading-focused but scanning-focused. Most users scroll top to bottom and follow a Z-pattern layout. This behavior heavily influenced the structure of the page.
- Overall Approach: Layout and User Flow Based on these insights, the landing page followed this order:
-> Hero -> Benefits (Problem & Solution) -> ROI Calculator -> How It Works -> Pricing -> Last CTA -> Footer
I will explain the principles behind this structure in detail later, but at a high level:
In the Hero section, we need to clearly state the problem we solve and give the user a reason to explore further.
The next section is intentionally called Benefits, not Features or Product. The real value lives in the benefits. To do this well, you must deeply understand who your users are, what they struggle with, and what they care about.
In this case, the target audience is ROI-driven, non-technical users who are far from the software world. That is why we introduced an ROI calculator early, allowing users to estimate potential savings.
After that, the How It Works section explains the steps users will go through once they decide to use the product. This is designed to reduce uncertainty and help users feel familiar with the product before they even sign up.
Pricing comes next. Since this was a pre-launch waitlist page, only one pricing model was highlighted to reduce decision friction.
Finally, the Last CTA turns the decision into action. If the user has decided to join the waitlist, this is where it happens. The Footer contains secondary information such as socials and careers.
- Visual Language and Design Decisions A white-dominant background was used to reduce visual noise and keep the focus on what matters most. The primary goal here was to minimize cognitive load.
There was no wall of text. Copy was kept short, and a benefit-driven language was preferred throughout the page.
In some areas, a glassmorphic visual style was used, especially in the navbar. This helped create a modern feel without overshadowing the main content.
- Structuring the Landing Page From a very high-level perspective, the landing page can be divided into three main areas:
Above the Fold The Fold Below the Fold
4.1 Above the Fold Above the fold is the most critical part of a landing page. It is the only area that 100 percent of visitors see. Data shows that around 60 percent of users leave without scrolling if this area does not present a clear value proposition.
Within the first 3 to 5 seconds, users look for answers to three questions:
Is this product for me? What does it do for me? Should I continue? 4.2 The Fold Area The fold varies by device and screen size, so it was treated as a transition point rather than a fixed line.
The goal of this area was to send a clear message: if you keep scrolling, there is something valuable for you.
This was supported with a micro CTA, a subtle visual cue, and small trust signals. In Tedaarik’s case, this area directed users toward the ROI calculator, reinforced by a down-arrow animation signaling more content below.
4.3 Below the Fold This is where persuasion deepens.
The core principle:
People do not buy products for their features, they buy them for the benefits they receive.
Feature lists were intentionally avoided. Each feature was framed through a problem and the benefit it creates. Technical terminology was kept to a minimum.
The logic followed this structure:
Feature: what the product does Benefit: how my life changes if I use it This area also included additional social proof, an FAQ to address objections, and a strong final CTA.
- Hero Section The hero area is the most critical part of the landing page. Users decide within seconds whether to stay or leave. Based on those informations, the following principles were applied.
The structure included:
A clear and descriptive hero text A supporting subtext Two CTAs Three social proof items Web and mobile dashboard visuals
5.1 Title The title should not describe the product but the value it provides. It should clearly state who the product is for and what the user gains. Abstract, slogan-like statements were intentionally avoided.
A simple test question was used: can someone understand what the product does and how it benefits them by reading the title alone?
5.2 Subtext The role of the subtext is to make the promise in the title more concrete with a short explanation, without diving into technical details.
5.3 CTA Users should be explicitly told what to do. One or at most two CTAs.
For Tedaarik, these were:
Request Early Access Calculate Your Savings 5.4 Social Proof Social proof answers the question: why should I believe this? Setup time, free trial, and average savings were used to reduce perceived risk.
5.5 Visual Users learn visually. The hero image should immediately communicate what the product looks like and where it works. The goal is not aesthetics but the right first impression.
A common mistake in hero sections is writing the headline like a slogan. For unknown products, slogans are meaningless. The hero should communicate value, not company name or abstract ambition.
As a user, the idea of adding images that focus on knowing what we will likely encounter on different platforms (mobile, desktop) if we use the product was inspired by Stripe.
https://stripe.com Users are visual learners. The visuals on the right side immediately show whether the product works on web, mobile, or both. The goal was clarity, not decoration.
Two CTAs were used:
Request Early Access Calculate Your Savings Early access was visually prioritized, but since the ICP is highly ROI-driven, the savings calculator acted as a strong secondary trigger.
Social proof under the hero included:
5-minute setup 1-month free trial 20 percent average savings The goal was to immediately communicate low risk.
- Benefits Section (Problem and Solution) This section is where empathy is built.
The headline was chosen as: “Every month, we receive hundreds of invoices, but we do not benefit from the data.”
With this single sentence, the message was: we understand you.
Each problem followed the same structure:
The problem The concrete pain How Tedaarik solves it Time loss, painful procurement, and unused data were framed not as features but as outcomes users care about.
This section was intentionally kept away from becoming a feature list. People buy benefits, not features. As summarized by a principle I strongly believe in: your customer is the hero, not you.
- ROI Calculator This section speaks directly to the user: how much money do you lose?
For restaurants and F&B businesses, this is a powerful trigger since decisions are largely driven by cost and savings. Instead of abstract promises, users were encouraged to think using their own data.
- How It Works The goal here was to show users what they would experience after signing up.
Uncertainty kills conversion. That is why the flow was explained step by step in a non-technical way:
Upload your invoice Let the assistant handle the rest Automatically analyze costs Compare supplier prices Create purchase lists and order with one click The goal was to make users feel that they would not feel lost after signing up.
- Pricing At this early stage, only one special offer was intentionally highlighted. Other plans can be explored through a carousel, but when users interact with them, they see pricing sections marked as “coming soon.”
Instead of overwhelming users with options, the focus was on guiding them toward an easy and confident decision.
- Last CTA and Social Proof At the end of the page, a strong offer summarized all previous arguments.
Pre-launch users would get lifetime 50 percent discount and priority access to new features.
There was only one action: Request Early Access.
Additional trust signals were placed near the end, including active regions, upcoming cities, setup time, free trial, and average savings. This section targeted users who were still hesitating.
- Learnings The learnings below reflect a new perspective I gained from this process on what I truly learned. Throughout this journey, Batuhan Doğan was a great help in shaping my design and UX perspective.
The clearest takeaways from this process were:
A landing page is ineffective if marketing is wrong, no matter how well designed it is Correct target audience definition is the foundation of everything Simplicity increases conversion, complexity kills conversion Semi-filled placeholders create friction Users are visual learners Real and specific product visuals matter Industry-specific data is more persuasive than generic claims Simple or daily language beats corporate tone Benefits always outperform features Technical terminology reduces conversion for ROI-driven ICPs