Contents＋
‘Shaping tomorrow. Unlocking possibility.’ Lovely. What do you actually do?
01 / Direct answer
The first screen has one job: earn the next moment
The first screen does not close a sale; it classifies. It helps suitable buyers stay and allows unsuitable visitors to leave. Copy designed to include everyone may appear to enlarge the audience while making nobody feel specifically recognised.
02 / Decision order
Visitors first decide whether they entered the right door
Illustrative scenario, not a client case: A Hong Kong training firm leads with 'unlock potential, build the future'. HR leaders, parents and jobseekers may all assume it concerns them. A statement such as 'measurable management programmes for teams of 50–500, from needs interview to post-course follow-up' may repel some visitors while making corporate enquiries more specific.
The first screen should make the next screen worth reading
A training page saying “unlock team potential” leaves readers guessing whether it offers management classes, language tuition or outdoor activities. An illustrative alternative is “In-house training for new managers, using your team's situations to practise feedback and delegation.” It identifies the service, audience and method without promising a business result.
03 / Five-second question
Company history is not the five-second answer
Nielsen Norman Group describes the homepage as an elevator pitch that should quickly communicate what an organisation does and what users can accomplish.
A five-second test captures initial understanding. The point is not reading every word in five seconds; it is whether visual and verbal signals point to one answer.
The first screen must support four judgements: whom the company serves, which business problem it handles, what kind of outcome it provides, and what happens next. Metrics, logos and accreditation reduce risk only after the proposition is clear; otherwise proof decorates an ambiguous answer.
04 / Management error
More selling points can increase comprehension cost
Businesses often lead with what matters internally: founding year, mission, awards and a founder quote. The visitor's first question is whether this concerns them. Putting corporate history before buyer recognition asks a stranger to care about the company before learning whether it can help.
I’m not against an elegant line. The first screen is an expensive place to make readers solve a riddle.
05 / Four-part framework
Build a viable first screen with four statements
- After five seconds, can a tester name the intended buyer rather than only the industry?
- Can the headline state the problem and outcome in normal language?
- Does the supporting line add scope, method or limitation so the promise is believable?
- Does the primary action explain what follows rather than say only 'learn more'?
- Is the mobile first screen obscured by cookies, floating buttons, carousels or an oversized image?
Match proof to the promise. A technical repair service can show a comprehensible diagnostic and verification method. A practical course can explain how exercises reflect work situations. Awards and logos supplement this; they do not replace it. If a case must remain anonymous, disclose the limitation rather than imply an endorsement.
06 / Mobile execution
Rewrite from the narrowest mobile view
Write the audience, commercial problem, reason to believe and next step before relying on imagery or motion. When the words stand alone, visual design can amplify rather than rescue them.
- State who the service is for and which problem it resolves in one sentence.
- Add one concrete limit, outcome or method as a reason to believe.
- Keep one primary action and lower the visual weight of secondary actions.
- Test the complete first screen at 320px width and on a slower connection.
07 / Measurement
Measure comprehension and progress, not only bounce
| Layer | What to record | What it means for management |
|---|---|---|
| Comprehension | Can a five-second viewer name the service and audience? | Tests message clarity directly |
| Progress | Scrolls and visits to services or cases | Shows whether the first screen created useful interest |
| Action quality | Qualified conversations initiated there | Prevents accidental clicks being treated as conversion |
The fold has no fixed height. Small phones, larger text settings, browser controls and longer translations change what fits. Preserve the order of headline, concise explanation and sensible next step instead of shrinking text to force it inside a design mockup.
08 / FAQ
Three common first-screen questions
Should the logo be larger?
It must be recognisable, but should rarely overpower the customer problem. A new visitor first needs to know what the company does.
Can we use a carousel?
Carousels divide the primary message and many visitors never wait for slide two. Multiple services need one unifying value proposition.
Must pricing appear there?
Not always, but the service level or engagement type should help unsuitable visitors self-select out.
09 / Limits and conclusion
Clarity has more commercial value than cleverness
A known brand, member portal or transactional product may need less explanation because visitors arrive with a defined purpose. Even then, the primary task should not be buried under promotions, pop-ups or several equally weighted actions.
A good first screen does not make everyone continue. It lets the right person feel recognised and the wrong person avoid wasting time.
Understood first. Admired afterwards. An unglamorous order, but a useful one.
10 / Sources