Module

🌐 Website Design Checklist | Story99

Story99.com is a Branding & Storytelling Consultancy for B2B, Tech & Deeptech

Navigability

  • Does the navigation bar avoid overwhelming the visitor with too many choices?

  • Homepage

    • Does it quickly guide visitors to deeper, more specific interior pages?

    • Does the homepage act as a good “front door” to the rest of the site?

  • Is the navigation bar simple and focused, with only 2-4 links plus a call to action (CTA)?

    • Does the CTA copy represent the actionable next step that fulfills the claim made in the header?

    • Is there a clear visual emphasis on the key action you want visitors to take?

Brand Alignment

  • Does the homepage consistently reflect brand messaging?

  • Is the brand vibe evoked via content (and presentation style) on the page (DNA / personality / values)?

Clarity & Engagement

  • What is the primary end-action expected of the viewer and is the design enabling that?

  • What does the page make the viewer feel like (based on what’s there on the page and how it’s presented / the aesthetics / flow etc.)?

  • Does the Above the Fold (ATF) section clearly communicate what the website offers?

  • If someone remembers just one thing on this page, what would we like that to be ?

  • Functional + Emotional + Social offering made clear?

  • Is the overall copy concise and effective in communicating the core message?

    • Does the design avoid Content Blindness by using varied and engaging content?

  • Does the header include a “hook” that captures the magical or exciting aspect of the offering? This could be a bold claim or a response to likely skepticism.

    • Interesting?

    • Memorable?

    • Knowledge-gap activated?

  • Does the header speak directly to the target customer persona?

    • Is it clear who the page is targeting, and is the copy written as if speaking directly to them?

    • Does the ATF section make it clear whether the website is a good fit for the visitor?

    • Does the page use language and a tone that the target audience will connect with?

  • Does the header avoid sounding too good to be true, which could cheapen the brand?

  • Does the ATF section start a narrative that provides visitors with the specificity, magic, and clarity to take the next action?

  • Does the subheader explain how the claim in the header is achieved or provide additional details about the product?

    • Is the subheader concise, ideally one or two sentences?

  • Does the site create an Aha! Moment to clarify the value of the product?

  • Is the title specific, using concrete details or numbers to enhance recall value?

  • Is the messaging in the ATF section specific rather than vague?

    • Does the website copy avoid Fuzzy Context by providing sufficient context?

  • Is the title action-focused, guiding the visitor towards a desired action?

  • Does the title address potential objections that the visitor might have?

    • Top 3 objections why viewer may not want to try / buy - taken care of?

  • What are all the reasons, a viewer should trust the claims being made on this page (reason to believe)?

    • Who else has it worked for?

    • Any other credibility element?

    • halo effect activated?

  • Use-case

  • How much would it cost?

  • Wherever numbers have been used

    • when is currency icon being used and when it is being avoided - thought through?

    • when are precise numbers being used / when numbers are rounded off - thought through?

  • Is it clear what happens if the customer doesn’t like it?

  • Is it clear what the viewer should do if they have more questions on some points?

  • If the viewer is not going to be the buyer - is it clear to them how they should convince the buyer to buy this product?

  • What does it take to get started?

    • How much should we be selling “desirability” and how much should we focus on “feasibility”?

Subscribe to https://learnstory99.substack.com/subscribe where we notify you when we update our existing frameworks and insights around storytelling, marketing and brand-building.

Product / features

  • To the visitor, is the purpose of the product or service

    • clear?

    • interesting?

    • relevant?

  • Does the overall features / solutions copy focus on what the customer can do (“you can do XXX”) rather than what the company does (“we do XXX”)?

  • Feature→Benefit→Value

    • What have we done to make sure the viewer can see / imagine the benefit vividly?

    • What have we done to ensure that the loss of ignoring the page is communicated clearly (tapping on “loss aversion”)

  • Is there a “visible lifeboat” equivalent feature that needs to be highlighted?

Visual language

  • Aligned to the brand visual identity?

  • Is the design professional, up-to-date and visually appealing?

  • Are the images visually appealing, modern, and clear?

  • Do the images demonstrate the value of the product or service, ideally by showing it in action?

  • Is there sufficient negative space between elements to prevent the copy and visuals from blending together?

  • Does the design consider Familiarity Bias by using familiar design patterns?

Behavioral Science

  • Have we been able to avoid:

    • the Overjustification Effect by not over-incentivizing?

    • Reactance - by not forcing adoption of a behavior?

    • Pain of paying

  • Scope to make use of

    • Fresh Start Effect?

    • the Goal Gradient Effect?

    • Variable Rewards to keep users engaged?

    • scarcity effect?

    • Default Bias ?

    • Endowment effect?

    • Pygmalion Effect?

    • Labour illusion?

    • Foot in the door (FITD) effect?

    • Moderate synctactic surprise?

  • Scope for creating User Delight through small, impactful moments?

  • Scope to minimize Cognitive Load by simplifying tasks?

  • Nudges and choice architecture thoughtfully planted?

  • Series of small steps utilized?

  • “Reciprocity bias” being tapped? (give them something valuable right away so that they feel like returning the favour)?

  • Sense of urgency created (if possible)?

  • IKEA effect / endowment effect activated?

  • Conformity bias leveraged? (people like to be consistent to the behaviour they have already exhibited)

  • “Empowered progress effect” activated?

  • Does the design follow the Law of Minimal Effort by offering the path of least resistance?

  • Does the design employ Progressive Disclosure to gradually reveal complexity?

  • Does the design adhere to Hick’s Law by limiting the number of choices?

  • Does the design account for Confirmation Bias by presenting information objectively?

  • Does the design mitigate the effects of Loss Aversion?

  • Does the design utilize Social Proof effectively?

  • Does the design utilize User-Initiated Triggers?

  • Does the design incorporate Framing to influence understanding?

    • Does the design account for the Anchor Effect by carefully choosing initial information?

    • Scope to make use of the Decoy Effect strategically?

    • Does the design leverage the Serial Position Effect by strategically placing items?

  • Scope to make use of hyperbolic discounting?

SEO

  • Does the homepage have elements that help it rank in search results for the relevant business category?

Technical

  • Does the homepage load quickly?

  • Is the homepage mobile-friendly?

  • Is the homepage integrated with analytics and other relevant tools?

  • Does the homepage comply with privacy laws and accessibility requirements?

  • Is the homepage easily updated

Subscribe to https://learnstory99.substack.com/subscribe where we notify you when we update our existing frameworks and insights around storytelling, marketing and brand-building.

Annexure 1 - Some Behavioural Science terms explained

THE FRESH START EFFECT

The fresh start effect is a psychological phenomenon where people are more motivated to pursue their goals and make positive changes in their life following temporal landmarks or natural transition points. These landmarks can include:

New Year’s Day Birthdays The start of a new week or month The beginning of a new semester Moving to a new place Starting a new job

The effect occurs because these temporal boundaries create a mental separation between our past and present selves. People tend to view their past failures or shortcomings as belonging to their “old self,” while seeing their present/future self as having a clean slate. This mental accounting helps people feel more capable of change and less weighed down by past setbacks.

The fresh start effect was formally studied by researchers Katherine Milkman and Jason Riis, who found that people are more likely to engage in aspirational behaviors (like going to the gym or starting a diet) following these temporal landmarks. They also discovered that Google searches for terms related to goals and self-improvement spike significantly around these transition points.

HYPERBOLIC DISCOUNTING

Hyperbolic discounting is a cognitive bias in how we value rewards over time. It describes how people tend to prefer smaller, immediate payoffs rather than larger, future ones - but in a mathematically inconsistent way that can lead to preference reversals.

Here’s a concrete example:

  • If offered $100 today or $120 tomorrow, many people choose $100 today

  • But if offered $100 in a year or $120 in a year and a day, most people choose $120

This is inconsistent because the time difference (1 day) and the reward difference ($20) are identical in both scenarios. The only thing that changes is how far in the future the choices are. Our brains discount the value of future rewards more steeply when they’re close to the present.

This bias explains many real-world behaviors:

  • Procrastinating on important tasks in favor of immediate gratification

  • Failing to save enough for retirement

  • Having trouble sticking to diets or exercise plans

  • Making impulse purchases instead of saving for bigger items

The name “hyperbolic” comes from the mathematical shape of how we discount future values - it follows a hyperbolic curve rather than the exponential curve that would represent rational economic decision-making.

Understanding this bias can help us make better decisions by:

  1. Creating commitment devices that lock in future choices

  2. Making decisions in advance when we can think more rationally about tradeoffs

  3. Setting up automatic systems for things like savings and investments

  4. Breaking down long-term goals into shorter-term rewards

OVERJUSTIFICATION EFFECT

If users are being incentivised to complete a task, especially with money or ‘rewards’, they can be less motivated than they otherwise would be.

LOSS AVERSION

People are hardwired to avoid losses. This is partly because the feeling of losing is 2x more powerful than that of winning.

Also, the feeling of incurring a loss by taking a wrong decision >> feeling of incurring loss by inaction (which is why sometimes people don’t take action even if they have understood the benefit - because they are not sure if what has been promised will actually take place).

SERIAL POSITION EFFECT

When presented with a list of things, people are better at remembering the first and last items, than those in the middle.

ENDOWMENT EFFECT

People overvalue something if they own it or feel like they own it (why test-drives lead to more sales).

THE PYGMALION EFFECT

The Pygmalion Effect (also known as the Rosenthal Effect) is a psychological phenomenon where higher expectations placed on an individual lead to improved performance. It’s essentially a form of self-fulfilling prophecy where people tend to live up to what is expected of them.

The effect was first demonstrated in educational research by Robert Rosenthal and Lenore Jacobson in 1968. In their landmark study, they told teachers that certain students (randomly selected) were likely to be “intellectual bloomers” that year. Even though these students were chosen at random, they showed significantly greater improvement in IQ scores compared to other students.

LABOUR ILLUSION

When a buyer believes a lot of effort was put into something, they value the product / service more.

SYNTACTIC SURPRISE

Syntactic surprise refers to the unexpected arrangement of words in a sentence, creating a sense of novelty and intrigue that captures attention. Messages with moderate syntactic surprise perform better than those with low or high surprise.

Annexure 2 - Framing types & devices

Framing effects occur when a change in language or how it is presented has an impact on the receiver’s thoughts, feelings, or actions. In other words, different ways of framing an issue can lead to different responses.

Cognitive Frame

Semantic or Linguistic Frame

Communicative Frame

When you say / write “university” - it will evoke ideas about campuses, buildings, professors, and degrees - in the listener / reader’s mind.
Use-case: to quickly set the context based on existing constructs

When you use different words like “bride,” “groom,” and “honeymoon” - but in a way that together, they evoke a common theme / idea / concept (“marriage” here).

This influences how you want the listener / reader to interpret a situation / event / point.
For example, news coverage can frame the same event in a positive or negative light.

FRAMING DEVICES

Equivalency framing

When the same information is presented in two different forms that have the same literal meaning - often involves contrasting positive and negative frames (valence framing)

  • Eg: framing ground beef as “75% lean” or “25% fat” are logically equivalent but may elicit different responses.

  • Valence framing can be further categorized based on what is being framed and how the effect is measured:

    • Attribute framing focuses on presenting an item or situation in terms of either a positive or negative attribute (e.g., survival rate vs. mortality rate).

    • Risky-choice framing involves presenting a choice in terms of either gains or losses.

    • Goal framing focuses on either the positive consequences of performing an action or the negative consequences of not performing it.

    • Comparison framing focuses on presenting one item as better than another, or one item as worse than another.

Nonvalenced equivalency framing

When positive / negative valences are not used.

  • Subject-complement framing - looks at how the order of groups in a sentence can perpetuate stereotypes.

    • For instance, the statement “girls are just as skilled as boys” can still suggest that boys are more skilled because it places them in the subject position.

  • Unit framing describes the practice of presenting a quantitative value using different units, often presenting a smaller number than a larger one to influence people’s choices.

    • For example, framing a donation as “35 cents a day” rather than “$127.75 a year” can be more effective.

  • Order framing is about how the order in which items are presented can impact choice.

    • For example, presenting positive characteristics before negative ones can result in a more favorable overall impression.

  • Emphasis framing - emphasize one interpretation over others.

  • Figurative framing - use figurative language like metaphors to guide reasoning, especially for complex, abstract issues.

    • For example, framing cancer as a “battle” can evoke different thoughts and feelings compared to framing it as a “journey.”

  • Psychological distance framing - play with the level of abstraction in a message, through:

    • Narrative framing - use stories to engage audiences and evoke specific emotions.

      • For instance, narratively framing the dangers of smoking may be more effective than presenting dry statistics.

    • Pronoun framing - use pronouns like “I”, “we”, and “you” to subtly communicate levels of psychological and social distance.

    • Lexical framing - choose labels or descriptions that carry specific connotations (frequently used in politics to sway public opinion).

      • “bonus” might trigger different reactions compared to the word “rebate,” even if the amount of money is the same.

    • Moral reframing - uses moral values to make an argument more appealing to a target audience, even if they wouldn’t normally support the issue.

      • For example, framing immigration in terms of compassion might sway liberal audiences, while framing it in terms of patriotism might be more effective for conservative audiences.

    • Grammatical framing - playing with grammatical elements - for example the use of the active or passive voice, or choosing to include or omit the agent of an action - all these can have subtle effects on how people interpret events.

    • Aspectual framing - decide whether an action is presented as completed or ongoing - this can impact judgments about someone’s behavior.

Note:

  • A single message can use multiple framing techniques at the same time.

  • Additionally, the effectiveness of framing can be influenced by factors such as the strength of the audience’s prior attitudes and beliefs, individual differences, and cultural background.

Annexure 3 - Abstract vs Specific language

Use abstract language for the following use-cases:

Use Case

Goal

Example

Signaling Potential

To make something seem like it has growth potential. To tap into a broader problem, suggesting a widespread market and a more promising investment.

Describing Uber as “a transportation solution that is convenient, reliable, and readily accessible to everyone”.

Signaling Leadership

To be viewed as a better leader and more powerful.

Use concrete language for the following:

Use Case

Example

Showing You’re Listening

Saying, “I’ll go search for that T-shirt in gray,” instead of, “I’ll go look for that”.

Deepening Engagement

Using concrete language in tech support pages such as “How to split and move the keyboard” rather than “About the security partial trust allow list”.

Making Ideas Easier to Understand

Talking about a phone rather than a device.

Generating Effective Apologies

Prisoners who give more concrete explanations for their transgressions are more likely to be granted parole.

Improving Customer Satisfaction

Increasing Sales

Talking about a “gray T-shirt” rather than a “top”.

Keep learning with Story99

Get new frameworks and updates in your inbox.