Design Guide for AI

The accessibility foundation of a design system including the standards, tooling, and shared conventions that ensure every component and pattern is built inclusively from the start.

Source: https://www.checklist.design/design-system/accessibility

Target conformance level

The WCAG conformance target the team has committed to documented and referenced in contribution guidelines. AA as a baseline for most products, with AAA achievable for specific criteria such as text contrast.

Tip: WCAG AA is a typical baseline for most products, with AAA achievable for specific criteria such as text contrast

Colour contrast standards

The contrast ratios verified across all text and interactive element colour combinations (4.5:1 for normal text, 3:1 for large text and UI components)

Tip: Show these ratios in existing UI

Focus indicator design

A visible, high-contrast focus indicator designed for every interactive component

Tip: Show clear examples for most common interactive components like button and input field

Keyboard navigation patterns

Standard keyboard interaction patterns documented and applied consistently e.g. arrow keys for menus and listboxes, Enter and Space for activation, Escape for dismissal

ARIA pattern library

Attributes that make web content accessible to those who use assistive technologies with roles, states, and properties defined for every interactive component pattern

Screen reader testing

Components tested with at least VoiceOver on Safari and NVDA on Chrome before shipping

Accessibility annotations in design

A shared annotation kit used in design files to specify ARIA labels, roles, reading order, and focus behaviour

Accessibility in contribution guidelines

Ensuring accessibility requirements are part of the component contribution checklist

An accordion is a vertically stacked list of items that reveal or hide associated content sections when clicked. They help organize information hierarchically and saves screen space by showing only relevant content.

Source: https://www.checklist.design/design-system/accordion

Header

The clickable area that triggers expanding and collapsing and has a title

Tip: The header text should clearly convey the content that is inside

Expand/collapse icon

Visual indicator of the current state — typically a plus/minus, or a caret/chevron that rotates between states

Content area

The content that shows or hides when toggled, containing detailed information associated with the header

Tip: While headers should be text only, content can be anything that is suited to help answer or elaborate on the header (text, image, video, etc)

States

Default (collapsed), expanded, hover, focused, and disabled

Expanding logic

Decide if users can open multiple sections at once, or one at a time

Tip: Can be determined by whether you think information from other items are related and should be seen together

Source: https://www.checklist.design/design-system/alert

Descriptive message

Alert copy that explains what happened and what the user needs to do, rather than generic labels like 'Error' or 'Success'

Placement and stacking

Where alerts appear in the layout, inline near relevant content, at the top of a form, or in a fixed notification area, and how multiple simultaneous alerts are ordered

Dismissible option

A close button on alerts that are informational and don't require action, letting the user clear them when they're done

Icon reinforcement

An icon alongside the message that reinforces the alert type, not as a substitute for colour but as a signal for colour-blind users

Semantic variants

Distinct visual treatments for informational, success, warning, and error states, using colour, iconography, or both

Inline action (if applicable)

An optional link or button inside the alert for the most relevant next action, avoiding the need to navigate elsewhere to resolve it

An avatar is a visual representation of a user. It helps identify individuals across a digital interface, commonly used in user profiles, comment sections, and chat applications.

Source: https://www.checklist.design/design-system/avatar

Visualiser

Show what the avatar looks like before posting or updating

Link to upload or select avatar

Accessible link for a user to select

Tip: If you want the avatar visual itself to be clickable to change, add an indicator on it to show it's editable from that source e.g. a pencil icon

Placeholder image

If a user hasn't uploaded or added an avatar yet there should be a placeholder e.g. a default icon, or the user's initials

Acceptable file types

Tell the user what file types are allowed (JPEG, PNG, SVG)

Status change updating avatar

This doesn't have to be apart of the avatar component (it can be a banner or toast for example), but it is possible to incorporate it

Alternatives

If a user doesn't want to upload an image, offer an illustrative alternative, as it's better than nothing and can still convey their personality

Editing uploaded avatar

Allow a user to crop and resize their avatar before saving it

A badge is a small visual indicator that displays short, dynamic information like counts or status. It typically appears as a colored circle or pill shape, often overlaid on other elements.

Source: https://www.checklist.design/design-system/badge

Detail

A badge can have a numeric value, or a basic shape

Tip: A basic shape like a small circle is effective in conveying one update, while numeric value represents the amount of updates

Color

Badges can represent your standard states - error, success, warning

Tip: Be consistent in the details - outlines, shadows, perspective, corners and colours

Offset position

A badge should sit outside it's relevant element to gain attention easier

A banner is a prominent notification item that displays important messages to users. It communicates things like errors, success confirmations, warnings, or general information using distinct colors and placement to stand out from regular page content and grab attention.

Source: https://www.checklist.design/design-system/banner

Style

How the banner types look (fill, text colour, border radius etc)

Tip: Ensure the banner stands out enough on your default UI as it’s usage typically means it should not be missed

Content

A title is a must but you can consider a description if you feel a title does not convey enough information

Types

Banners typically appear as 5 options: information, success, warning, error, neutral. This helps visually establish context and level of importance.

Call to action button

A banner may call for the user to do something, like fix the error it is calling out, or viewing the successful outcome of an event.

Tip: Only have a button if it feels needed, banners typically work best to inform

Placement

Where the banner sits on the page, dependent on context and importance

Tip: Consider the impact the banner contents has on the user experience to determine where it’s placed best e.g. information affecting the entire application should have a banner at the top on every page. Information only affecting a small feature may be within a relevant section.

Dismissable

Whether the banner can be dismissed. Positive/neutral banners (info and success) would suit this, but not warning/error banners as they are too critical.

A breadcrumb is a secondary navigation element that shows users their current location within a specific hierarchy of a website or app.

Source: https://www.checklist.design/design-system/breadcrumb

Current location

The current page shown as the final item in the trail, visually distinct from the preceding levels, typically not a link

Level links

All preceding levels rendered as active links, each one navigating directly to that level rather than requiring back-button presses

Separator character

A consistent visual separator between levels (a slash, chevron, or arrow) distinguishing hierarchy from a list of links

Truncation for long paths

Deep hierarchies collapsed with an ellipsis, preserving the root and current page while hiding intermediate levels behind a toggle

Tip: Breadcrumbs that wrap onto multiple lines disrupt page layouts significantly more than a collapsible ellipsis. Truncation at three to four visible levels is a consistent point of balance

A button is an interactive element that triggers an action when clicked or tapped. It clearly communicates its clickability through visual styling and provides feedback on user interaction, making it a fundamental component for enabling user actions in interfaces.

Source: https://www.checklist.design/design-system/button

Base style

Your default style, one of the following: fill, outline, underline

Shape

Visual properties of a button: padding, border, border radius, shadow

Variants

Each visual type to represent button structure e.g. primary and secondary buttons

Copy

Instructional text that details what will happen if you click the button

Tip: Users should understand what will happen before clicking a button. Buttons can have generic copy such as 'Okay' or 'Cancel', but only if there is context around that action, in the title or as a label for example.

States

How the button changes based on the interaction: hover, focused, disabled

A card is a contained, modular component that groups related information and actions. It displays content like text, images, and interactive elements within a distinct container, often with shadows or borders to create visual hierarchy and organization in layouts.

Source: https://www.checklist.design/design-system/card

Style

Consider default background, border, shadow

Consistency

Ensure you have one base style for all cards

Spacing

A framework to sort your padding levels by

Tip: Choose an easily divisible number as your padding difference, like divided by 4 or 5

Responsiveness

Consider the structure of the content in all various screen sizes

Tip: Adopt a 'top-down' approach on mobile to not overfill the rows

Content hierarchy

The primary action/s you want users to perform

Tip: Display links at the end of the card so the user is informed by the content in the card before making a decision

A carousel is a slideshow component that displays content one slide at a time. Users can alternate content through manual navigation or waiting for automatic transition.

Source: https://www.checklist.design/design-system/carousel

Ways of interaction

Defining whether the carousel transitions are auto-play, navigated by controls, or both

Visual progress indicator

Show dots, numbers, or a progress bar so users know how many slides there are and which one they're currently viewing.

Tip: Make the current slide's indicator look noticeably different so people can track their position at a glance.

Dimensions and alignment

The size of the items in the carousel, and their responsiveness across devices.

Tip: Decide how content sits inside the item container so that it is filling the required space without being stretched or not looking uniform.

Animation behaviour

The direction, speed and feeling of how the items transition between each other.

Focused item state

if your carousel shows one item a time, the one on focus should appear different to the items that are entering and exiting

Tip: Size, transparency and colour are typical properties to change on the non-focused items to allow the focused have more attention naturally

A checkbox is an interactive control that allows users to select or unselect items. They may be a single item to trigger other logic, or a list of multiple items to select amongst.

Source: https://www.checklist.design/design-system/checkbox

Label

Text paired with the checkbox to indicate what is enabled if selected

Default selection

Whether the checkbox is selected or not

Tip: An active checkbox by default depends on its purpose - it should come down to how much this conveniences the user

Style

Make sure checkbox is unique and stands out from other input options, and consider whether it's in a container, how it's grouped, and what colour it uses

States

Default, hover, focused, active and disabled (see documentation tab for examples)

The color layer of a design system — defining a palette that is purposeful, accessible, themeable, and expressed as tokens rather than raw values.

Source: https://www.checklist.design/design-system/color-system

Primitive palette

A base set of named color ramps (blue-100 through blue-900, neutral-0 through neutral-1000) that serves as the raw material for all semantic decisions

Tip: Systems where components reference primitive values directly are significantly harder to theme — a color change requires updating each component individually rather than a single token definition

Semantic color tokens

Named tokens that describe purpose rather than appearance so the system can be reskinned without touching components e.g. color-background-primary, color-text-danger, color-border-interactive

Tip: The semantic layer is what makes a design system actually themeable by defining purpose for colors

Interactive state colors

Defined color values for default, hover, pressed, focused, disabled, and selected states applied consistently across all interactive elements

Feedback colors

A consistent set of colors for success, warning, error, and informational states — used across alerts, form validation, badges, and status indicators.

Tip: Feedback colors that pass contrast in light mode frequently fail in dark mode — testing each token pair against every surface in both themes is where most gaps tend to surface.

Contrast ratios (accessibility)

A breakdown of text and interactive element color combinations verified to meet WCAG AA contrast minimums — 4.5:1 for normal text, 3:1 for large text and UI components

Tip: Not all colors will pair together nicely so defining this for all usage is helpful

Dark and light mode definition

A complete parallel set of semantic token values for the opposite mode

Tip: It is not as simple as inverting colors of one mode to the other, they require their own system (still using the same primitive colors though)

Brand color integration

Brand colors mapped into the semantic system in a way that maintains accessibility

Tip: Where brand values fall below contrast thresholds, they are restricted to decorative contexts, with accessible token values carrying the text and interactive roles.

Color blindness considerations

The palette tested against common color vision deficiencies for when color is used to convey state

Tip: It's worthwhile considering relative items to the color if vision is a concern, meaning an icon or text can help further convey a state incase the color is not successfully visible

Source: https://www.checklist.design/design-system/date-picker

Calendar grid

A month view with days arranged in a weekly grid, navigable forward and backward by month, as the primary date selection surface

Text input alongside

A free-text date field paired with the calendar, so users who know the date can type it rather than relying on clicking only

Tip: Suitable for when you know dates selected may be months or years away e.g. date of birth

Date range selection (if applicable)

The ability to select a start and end date, with the range highlighted across the calendar grid and both values independently editable

Disabled dates

Past dates, unavailable dates, or out-of-range dates visually distinct from selectable ones

Today shortcut

A clearly labelled button or link to jump to today's date

Locale and format

The calendar respecting regional conventions e.g. week starting on Monday or Sunday, date format in the text input matching the user's locale (DD/MM or MM/DD)

Time selection (if applicable)

When a time is also required, a time picker integrated with or accessible directly from the date picker (not a separate, disconnected control)

A drawer is a panel that slides in from the edge, overlaying content. It provides access to detailed information without completely navigating away from the current page.

Source: https://www.checklist.design/design-system/drawer

Placement

Which edge the drawer slides from - most commonly from left (navigation) or right (details/settings)

Dimensions

Typically full height, but width can vary. Should be wide enough for complex content to be shown, without taking over the entire page

Overlay

A semi-transparent background for the remaining screen area to bring focus to the drawer

Header

Top section with a title describing drawer contents or purpose, along with a close action (optional)

Tip: Can also include a description of drawer contents if header is too simple

Content area

Main section, which should be scrollable if content exceeds window height

Open and close trigger

How user activate the drawer — typically a button to open, while closing can have multiple ways: clicking overlay, a close button, or pressing Esc on keyboard should all be active options

Footer

Fixed area at the bottom for actions, usually a primary and secondary e.g. Save & Cancel

A dropdown triggered from a button or right-click target to reveal a menu of actions the user can proceed with

Source: https://www.checklist.design/design-system/dropdown-menu

Trigger affordance

The element that opens the menu: an overflow icon, chevron button, or right-click target

Menu item anatomy

The structure of each action: label, optional leading icon, optional trailing shortcut, optional destructive styling

Tip: Mixing icon and non-icon items in the same list throws off the scan

Section dividers and groups

Dividers and/or labels that break related actions into sections once the menu gets large

Destructive item styling

Visual differentiation — typically the danger colour — for actions that cannot be undone

Tip: Always place destructive actions at the end of the menu, after a divider to reduce misclicks

Nested submenu

A secondary menu triggered by a parent item, used for grouping related but distinct actions

Tip: Limit nesting to one level to be too layered and confusing

Disabled items

Menu items that are visible but cannot be triggered, indicating an unavailable action

Tip: A tooltip on that item that reveals the reason it is disabled is handy

Positioning and overflow

The menu's placement relative to its trigger, repositioning automatically to stay within the viewport

Keyboard shortcut display

Shortcut hints aligned to the trailing edge of the item label

An icon is a small, symbolic visual element that represents an action, feature, or concept. It's purpose is to communicate meaning quickly, save space, and enhance visual navigation across an interface.

Source: https://www.checklist.design/design-system/icon

Responsiveness

The flexibility in detail of the icons at varying sizes

Tip: Ensure your icon is recognisable in all possible sizes it's displayed at, and whether the detail needs to be simplified at a smaller size

Visual style consistency

All icons share the same stroke weight, corner radius, and optical sizing approach

Color

Black and white, flat colors or gradients

Tip: Incorporate your branding colours into the style

Naming

Name an icon by what it literally is so it can be used flexibly

Tip: Don't name an icon based on an action so it stays adaptable e.g. a pencil icon shouldn't be named "edit", as it could be used for another purpose elsewhere

An input field is an interactive area where users can enter and edit text or data. It provides a clear visual container for user input, often accompanied by labels and validation feedback, making it essential for forms and data collection interfaces.

Source: https://www.checklist.design/design-system/input-field

Input field

Interactive text field for user to enter their data into

Tip: Ensure text size is readable on all devices

Label

Stating what information the user is meant to provide

Tip: Avoid all caps for text labels to improve readability

Placeholder text

Text inside the input field acting as an example of what you want the user to enter

Tip: Text colour must be notably lighter than default text, so users don't assume its filled in Providing examples lets users understand how you would like them to enter the information

Data format

Set text fields to allow the relevant text values e.g. numeric only for phone number

Tip: Hint at preferred data format with placeholder text or hint

Illustration or icon

A visual cue can help break up a long list of text fields

Hint

Elaborate on the title of the text field incase a user struggles to know what to enter

A loading indicator is a visual element that communicates to users that content or an action is being processed. It provides feedback through animations like spinning wheels, progress bars, or skeleton screens to maintain user engagement during wait times.

Source: https://www.checklist.design/design-system/loading

Visual indicator

A clear representation that content is loading or in progress of change

Text

Explaining the loading state

Tip: Let the standard 'loading' text be a fallback, and try to be more specific e.g. 'adding your contacts, syncing your emails'

Time

Determine how long the time between two actions must be to require a loading component

Tip: Don't interrupt two actions that instantly transition, but if there's a known 5 second period between two actions then the component is appropriate

Accessibility

Ensure your loading state can be clearly seen

Tip: Place the loading indicator in a container to ensure accessibility, regardless of background If the loading indicator is on its own, create a version appropriate for light/dark backgrounds

Visuals

Entertain the user with an illustration during the loading state

A modal is a dialog box or popup window that appears on top of the main content, requiring user attention or interaction before returning to the main interface. It creates a focused experience by temporarily disabling the underlying page and dimming the background.

Source: https://www.checklist.design/design-system/modal

Title

Clear, simple text explaining the action of the modal

Tip: Ensure your icon is recognisable in all possible sizes it's displayed at, and whether the detail needs to be simplified at a smaller size

Actionable item

A button or link to continue or close the event

Tip: Users should always have an idea where they will be going to, or what event will happen before clicking a button If your button has generic copy such as 'Okay' or 'Cancel', include a label above it describing the event or purpose of the button

Close action

A way to exit the modal

Responsiveness

Consider the size of the modal on different device sizes, and whether a modal is suitable on all

Tip: On mobile, adapt the modal to full screen to gain more space

Background change behind modal

Darken, blur or lighten - change the background behind the modal to bring focus to it

Description

Incase they require more information to understand how to make their decision

A radio button is an interactive control that allows users to select exactly one option from a predefined set of mutually exclusive choices. Unlike checkboxes, when one radio button is selected, all others in the same group are automatically deselected.

Source: https://www.checklist.design/design-system/radio

Label

Text associated with the radio input

Grouping

There must be more than one radio option for the experience to work

Tip: Utilise radio to surface all inputs options, only being able to select one Radios with short labels can be align horizontally, but should usually be aligned vertically

Default selection

Start with a radio option selected

Tip: This doesn't always have to be the first option, it can be the more likely option based on previous research and experiences

Style

Make sure radio is unique and stands out from other input options

Clickability

Consider what is clickable to make the radio option active (text label, container)

States

Radio can be default, active and disabled (see examples below)

A search bar is an interactive input field that allows users to find specific content by entering keywords or phrases. It typically includes a text input area and a search icon/button, often enhanced with features like autocomplete suggestions to help users find information quickly.

Source: https://www.checklist.design/design-system/searchbar

Input field

A clear container for a user to start typing in

Label or placeholder text

Identify the purpose of the field is for them to search

Tip: Use your placeholder text to suggest examples of what to search for

Quick links, autocomplete and suggestions

As the user is typing, offer available links and phrases based on what they have entered so far

Tip: With enough data from the user, you can collect quick links and suggestions based on their previous searches to streamline their search

Submit search button

A visible link to submit search and view results

Tip: Include a loading icon or feature once search has been submitted incase there is a connection issue

Previous searches

Showing what a user has searched before can speed up their experience if they frequently search the same queries

Appropriate visibility

Search should be directly linked to what you are looking for, whether it's searching across the entire platform or in a specific area

A skeleton is a placeholder that mimics the structure of content while it loads. It provides visual feedback that content is coming and reduces perceived wait time.

Source: https://www.checklist.design/design-system/skeleton

Match content structure

Skeletons should mirror the size and layout of the content that will replace it, to reduce jumpiness on load.

Animation

Subtle motion to indicate loading without being too distracting. Can be a shimmer, pulse, or wave motion in the objects

Style

Flat shapes with no depth, can be rounded or sharp

Color scheme

Typically a neutral gray or very soft colour that does not call too much attention and contrasts just enough with its background.

Transition to real content

Should be a smooth, subtle movement like a fade out before the content loads.

A slider is an interactive control that allows users to select a value from a continuous range by dragging a handle along a track. It often provides intuitive visual feedback as it is interacted with.

Source: https://www.checklist.design/design-system/slider

Style

How the range and the handlers look visually (see documentation for inspiration)

Intervals

Whether the slider intervals has continuous (any value between 0-10000), or stepped (fixed values like a 0-5 rating)

Handles

The elements that users select to drag and change the slider value

Tip: Handles should clearly 'break' out from the slider container to be easily identified

Labelling

Text that conveys the spectrum of the slider, or if there are intervals between those ends too

Interaction states

What the handles and slider look like when the user is changing the value

The spatial layer of a design system, defining a consistent scale for spacing, a grid for layout, and the rules that make both feel deliberate and coherent across all surfaces.

Source: https://www.checklist.design/design-system/spacing-and-grid

Spacing scale

A defined set of spacing values (typically base-4 or base-8, covering 4, 8, 12, 16, 24, 32, 48, 64, 96) used for all margin, padding, and gap decisions

Tip: A base-8 scale is the most commonly adopted because it divides evenly across common device pixel ratios and helps avoid exceptions being made

Semantic spacing tokens

Named tokens for spacing that describe purpose (space-component-padding-sm, space-layout-section-gap) so spacing decisions are intentional, not arbitrary

Tip: Raw spacing values appearing as hardcoded numbers in components make global spacing changes significantly harder, since each instance requires a separate update rather than a single token edit

Column grid

A defined column grid for each major breakpoint (typically 4 columns mobile, 8 tablet, 12 desktop) with gutter and margin values specified

Breakpoints

A named set of breakpoints (sm, md, lg, xl) that are shared between design and code, so responsive behaviour is described in consistent terms across both disciplines

Tip: Breakpoint names tied to device types (phone, tablet, desktop) tend to age poorly as screen sizes shift. Content-based naming (narrow, mid, wide) describes viewport behaviour rather than hardware categories

Component vs layout spacing

A clear distinction between spacing used inside components and spacing used to compose layouts, since different scales often apply to each

Tip: Buttons that use the same spacing tokens as page-level section gaps, and vice versa, tend to produce compositions where internal padding and layout rhythm feel mismatched

Density variants

Where applicable, defined compact and comfortable density modes, common in data-heavy products where users need to choose between information density and breathing room

Baseline grid alignment

Text baselines and component heights designed to align to the base unit, so stacking elements produces predictable, harmonious vertical rhythm

A numeric input control with increment and decrement buttons — for adjusting a value by discrete steps, such as quantity, duration, or count.

Source: https://www.checklist.design/design-system/stepper

Increment and decrement controls

Buttons on either side of the numeric display for adjusting the value up or down by a fixed step

Direct text entry

The ability to type a value directly into the display field, in addition to using the buttons.

Tip: Suitable for use case where value change could have large jumps e.g. more than 10

Min and max bounds

Defined minimum and maximum values the stepper will not exceed, with the relevant button visually disabled when a boundary is reached

Tip: Disable the stepper at the minimum/maximum when reached, instead of hiding the controls

Step size

The amount by which the value changes per button press — typically 1, but configurable for units like 5, 10, or 0.5

Input validation

Handling of values entered directly that fall outside the min/max range or contain non-numeric characters

Size variants (if needed)

Small, medium, and large sizes for different contexts — a compact quantity selector in a product card vs. a settings input

Keyboard support

Arrow keys incrementing and decrementing the value when the input is focused

Source: https://www.checklist.design/design-system/table

Table header

The value of each column to provide structure for the row content

Tip: Fix your header on scroll to continue giving context to user

Row style

Borders and contrasting background colours can be explored to differentiate

Spacing

Define the consistent padding of each row and the header

Search

The ability to find a specific keyword or row

Tip: Ensure all of your possible data points can be searched and defined by text input

Actions

Performing a task based on the row and information seen e.g. view, edit, delete

Filter and sort

Allow users to customise what they want to see in the table and in which order

Responsiveness

Determine the structure on significantly smaller devices - whether the information collapses into an accordion for example

Tip: Horizontal scrolling is an alternative to rethinking a new layout

Pagination

Breakpoints in the table for digesting information in parts

Tabs are navigation elements that organize and separate content into different sections within the same view. They allow users to switch between related content, maintaining context while reducing clutter.

Source: https://www.checklist.design/design-system/tabs

Labels

Name of each tab

Tip: Label should be logical enough for the user to predict what's in the tab Keep it concise, ideally 1 word

Content area

Where the content for the active tab is displayed

Tip: Typically underneath a horizontal tab, or to the right of a vertical tab

Style

How the active tab and inactive tabs differentiate visually, as well as the tab container overall

Item order

Consider the arrangement of tabs to be ordered by popularity or familiarity

States

Default, active, hover are the key states

A toast is a brief, non-disruptive message that appears temporarily at the edge of the screen to provide feedback about an action or system status.

Source: https://www.checklist.design/design-system/toast

Copy

The text in the toast

Tip: Copy should be clear and concise, focusing on a status or action

Placement

Toast should appear on the corners of the viewport, not as the focus

Usage

Toasts are triggered to appear after an action or event

Variants

Dictated by colour usually, variants affects the emotion of a message

Tip: Example: A green toast informing success, red toast informing error. If informing a status, don't rely on just color and leverage icons or the copy.

Length of appearance

Toasts should be visible long enough to read but short enough to not obstruct other information for too long

Tip: Read the text out loud slowly to gauge how much time is needed

Dismissable

Depending on the amount of content, a toast can be closed by a user (it should fade away shortly after appearing if it cannot be manually dismissed)

A toggle is a switch-like control that allows users to quickly alternate between two opposing states (on/off) with a single click or tap.

Source: https://www.checklist.design/design-system/toggle

Context

Explaining what the toggle will do

Tip: A toggle should always be turning a function on or off, not between two opposing versions of a function e.g. hot or cold Consider toggles for straightforward decisions that have low risk implications

Transition

A clear visual change of the toggle switching between different states

State

How the button changes based on the interaction, examples below

Tip: Contrast active and inactive with brand colour for active and keeping the inactive muted

The layer of a design system where defined variables are outlined across the platform to enable consistency, theming and alignment with code.

Source: https://www.checklist.design/design-system/tokens

Three-tier token architecture

Tokens organised into primitive, semantic, and component tiers — primitives store raw values, semantic tokens describe purpose, component tokens scope decisions to a specific element

Tip: It's okay to start with just primitives and component tokens first, and only utilise semantic for theming

Naming convention

A consistent, predictable naming pattern so any token name communicates its purpose without needing documentation.

Tip: A token named blue-500 tells you the value, but a token named color-interactive-primary-default tells you when and where to use it, making that system the scalable one

Token documentation

Each semantic token documented with its intended use, example contexts, and what it can and cannot be used for

Token governance

A clear rule for what constitutes a token versus a hardcoded value, and a process for reviewing and approving new tokens before they are added to the system

Tip: New tokens should always be suggested, but have clear reasoning of purpose and scalable use to be genuinely considered

Design tool sync

Tokens maintained in your design tool of choice as variables

Tip: Aim to find a way to connect your tokens to what is in code — naming convention being 1:1 is ideal for ongoing maintenance

Versioning and changelog

Token changes versioned and communicated in a way that teams consuming the token system can know when values change and what the impact will be on their surfaces

A tooltip is a small informational popup that appears when users hover over or focus on an element, providing additional context or explanations. It disappears when the user moves away, making it ideal for offering brief, helpful hints without cluttering the interface.

Source: https://www.checklist.design/design-system/tooltip

Information

Keep content clear and concise

Tip: Information should be entirely relevant to what the tooltip is for, and elaborate on what is already visible

Contrast

The background should be different from the underlying content

Tip: An inverse colour works best for contrast - if behind the tooltip is dominantly light, make the tooltip background dark with light text

Visibility

How a tooltip looks and shows

Tip: A tooltip should activate on hover or select of an icon or text it is relevant to Only one tooltip should be visible at a time A tooltip should not cover the content it is relevant to

Dismiss action

Depending on how intrusive or extensive the tooltip is, a dismiss allows the user to feel more in control and allow the tooltip to feel more flexible and non-compulsory

The type layer of a design system that defines a scale, hierarchy, and set of text styles that is consistent, accessible, and expressive across the full range of product contexts

Source: https://www.checklist.design/design-system/typography

Type scale

A defined set of font sizes with a consistent ratio between them, covering everything from captions to display headings

Tip: A modular scale (1.25, 1.333, 1.5 ratio) produces a more harmonious hierarchy than arbitrary size choices

Semantic text styles

Named styles that describe role rather than size so usage is driven by meaning, not pixel values e.g. display-large, body-default, label-small, caption

Tip: Style names chosen by size — 24px, 18px, 14px — consistently result in designers selecting styles by measurement rather than role, which makes the system harder to evolve when the scale changes.

Typeface selection and loading

The chosen typefaces detailing style and weight e.g. Inclusive Sans Medium

Line height per style

Line height defined explicitly for every text style since tightly spaced headings and readable body text require different values

Tip: Similar style groups follow a consistent line height e.g. 1.5 for body text, 1.2 for heading and 1.1 for display

Letter spacing per style

Letter spacing defined per style where needed

Tip: Similar to line height, where style groups often following a consistent pattern

Responsive type behaviour

How text styles respond to viewport size, whether through fluid type scaling, breakpoint-based overrides, or fixed sizes with responsive layout compensation

Minimum readable size

The smallest text size in use across the system, and how readability at that size is validated in the actual rendering environment

Tip: Consider minimum size between desktop and mobile differently

Accessibility responsiveness

How text styles behave at 200% browser zoom, and whether any style communicates meaning through colour variation alone

A screen that guides users through setting up or completing two-factor authentication to add a second layer of security to their account

Source: https://www.checklist.design/web-app/2-factor-authentication

Method selection

Authenticator app, SMS, or email code

Tip: Offer at least 2 methods as some users potentially don't have access to one or the other

Setup instructions

Clear step-by-step guidance for completing setup, particularly for authenticator flows that require scanning a QR code

QR code or setup key

A scannable QR code or copyable key for linking an authenticator app to the account

Tip: Ensure QR code size large enough to be easy to scan

Verification step

A code entry step confirming the setup was successful before 2FA is enabled on the account

Tip: Enabling 2FA without this step risks a silent setup failure that locks the user out — a serious support burden

Recovery codes

A set of one-time backup codes the user can use if they lose access to their 2FA method

Tip: Make download or copying the code a required step before completing setup for the sake of the user

Setup confirmation

A clear success state confirming that 2FA is now active on the account

Disable or reset option

A way for users to turn off or reconfigure 2FA, accessible from account security settings

Tip: Re-authentication should be required before disabling 2FA

Where users view and manage their personal information, preferences, and account-level details

Source: https://www.checklist.design/web-app/account

Profile photo

A way for users to upload or change their profile image

Tip: Consider a sensible fallback like initials or a placeholder icon for users who haven't uploaded a photo so a profile image still exists

Display name

The name shown to other users or across the product interface e.g. username, email address, first and last name

Tip: Worth clarifying whether this is a public-facing name or an internal account label

Account details

Fields for email address, phone number, job title, or other relevant identifying information based on the product and information collected

Tip: If the information becomes extensive, it's suitable to group e.g. contact information, job history

Linked accounts (if applicable)

A view of which third-party accounts are connected for sign-in or data access, with ability to disconnect

Save confirmation

Clear feedback that changes have been saved, either inline or as a toast

Tip: Auto-save with a subtle confirmation is more pleasant than explicit save, but if you want an explicit save button, it should remain disabled until there are changes

Delete or deactivate account

Options to deactivate or permanently delete the account, clearly separated from other settings

Where administrators manage users, configure the product, and oversee activity across the organisation

Source: https://www.checklist.design/web-app/admin-panel

Role-based access

The admin panel visible and accessible only to users with the appropriate permissions

User management

A view of all users in the organisation with the ability to invite, edit roles, and remove members

Organisation settings

Controls for configuring the product at an account level — name, logo, SSO, domains

Usage overview

High-level metrics on how the product is being used across the organisation, with ability to export information for reporting

Billing and plan management

Access to subscription details, seat counts, and invoices at the account level

Audit log

A record of account related actions taken by users e.g. logins, permission changes, deletions

Danger zone

Destructive account-level actions e.g. deleting the workspace, transferring ownership

Tip: Establish friction by visually separated this from other settings and having typed confirmation for irreversible actions

A live dashboard that surfaces key metrics and trends, helping users understand what is happening right now.

Source: https://www.checklist.design/web-app/analytics

Date range selector

A date picker with shortcuts for today, last 7 days, last 30 days, this month, and custom range

Tip: Keyboard entry for custom date ranges is valued, to avoid extensive clicking through months and years

Headline metrics

The most important numbers displayed as prominent headline figures

Tip: These metrics are often described as 'snapshots', meaning by looking at them you get a snapshot of how the content the analytics is representing is performing

Charts with labels and axes

Visualisations with clearly labelled axes, a legend where needed, and readable tick marks

Period comparison

A percentage or absolute change indicator showing how each metric has moved relative to the prior period

Tip: A percentage is valuable for larger values, with absolute numbers suiting lower values

Segment breakdown

The ability to slice a metric by properties e.g. channel, device, geography, or another attribute

_Tip: Quick select breakdowns based on popular selections are a thoughtful shortcut _

Last updated indicator

A visible timestamp or refresh button showing when the data was last updated (if it is not automatically refreshing)

Loading and empty states

Skeleton loaders while data is fetching, and a contextual message when no data exists for the selected range

Tip: 'No data for this period' with a suggestion to adjust the range is more useful than a blank screen

A screen where users generate and manage API keys and other developer-facing credentials needed to integrate the product programmatically.

Source: https://www.checklist.design/web-app/api-keys

Key list

A table of all existing API keys showing name, creation date, last used date, and permissions

Tip: Only show the last few characters after creation for identification without risk of revealing entire key

Generate key

A clear way to create a new API key, with the option to give it a name and set its scope or permissions

Tip: Unnamed keys become impossible to manage as the list grows, so requiring a name before generation is useful

Copy key on creation

The full key revealed exactly once immediately after creation, with a prominent copy button

Tip: Users need to be explicitly told this is the only time the key will be shown in full, following this it will be impossible to copy again

Key permissions or scopes

The ability to limit what each key can access (read-only, specific resources, or full access)

Tip: Least-privilege access is a security best practice, and when fine-grained scopes are easier to set than full-access, more users choose them

Revoke key

A clear way to immediately invalidate a key, with a confirmation step before proceeding.

Tip: Revocation is instant and irreversible, so the confirmation message needs to communicate this clearly, since there is no undo

Documentation link

A direct link to API documentation so developers can get started without having to search for it

A screen that provides a chronological record of significant actions taken within a product, who did what, and when.

Source: https://www.checklist.design/web-app/audit-log

Event list

A table of logged events showing the action performed, the user who performed it, and a timestamp

Tip: Admins investigating an issue almost always start from the present and work backwards, so recent-first is the natural default

Actor identification

The name and identifier of the user who triggered each event, including system-generated actions

Tip: Display names change over time, so logging the user ID alongside the name keeps the record accurate when users update their profiles

Event type

A categorised label for what kind of action was taken (login, permission change, deletion, export)

Affected resource

The specific record, file, or setting that was changed and what had been changed

Tip: Linking to the affected resource from the log entry lets admins investigate in context rather than hunting for the record separately

Date range filter

The ability to narrow the log to a specific time period.

Search and filter

The ability to filter by user, event type, or affected resource to narrow down

Export

The ability to download the audit log as a CSV for compliance reporting or external review

Payment methods, invoices, and everything related to the financial side of the account

Source: https://www.checklist.design/web-app/billing

Payment method on file

The current card or payment method linked to the account, shown with masked details

Tip: Last 4 digits of card are enough for the user to identify which card is in use without exposing sensitive information

Add or update payment method action

A way to enter a new card or change the current one

Next billing date and amount

When the next payment will be taken and for how much

Tip: Including the plan name alongside the amount if applicable

Invoices and receipts

A list of past charges with the ability to download a PDF invoice for each.

Tip: Ensure invoices include company name, address, and VAT number — legally required in many countries and a frequent request from business users.

Tax and VAT (if applicable)

Applicable tax or VAT shown on invoices and billing history

Failed payment recovery

Clear messaging and recovery instructions when a payment attempt has failed

Tip: Surface this issue prominently in the app as it can eventually restrict access if not resolve in time

Billing contact email

The email address where invoices and billing notifications are sent

Tip: For larger teams, this is often different from the account owner's email

A screen for real-time or asynchronous messaging between users, either one-on-one or in a group context.

Source: https://www.checklist.design/web-app/chat

Message thread

A chronological display of messages in the conversation, with the most recent at the bottom

Tip: Auto-scrolling to the latest message on load is expected, but scrolling up to read history should never be interrupted by new messages arriving

Message input

A text field for composing and sending messages, with support for multi-line input

Tip: Multi-line input is often defined with Shift + Enter, with just Enter alone triggering the message to be sent

Sender identification

The sender's name and avatar displayed alongside each message, making the conversation easy to follow

Tip: Consecutive messages from the same sender typically don't need repeated name and avatar, so grouping them reduces visual clutter

Timestamps

When each message was sent, using relative time for recent messages and a full timestamp for older ones

Read receipts

An indicator showing whether the other participant has seen a message.

Tip: Not all users want this level of visibility into their activity — read receipts are worth making optional where the product allows.

File and media sharing

The ability to attach images, files, or links within the conversation, and show those attachments within the conversation

Reactions

Emoji reactions on individual messages as a lightweight way to respond without sending a full reply

The screen where users review their order and complete a purchase, one of the highest-stakes screens in any product with a transactional flow.

Source: https://www.checklist.design/web-app/checkout

Order summary

A clear breakdown of what the user is purchasing (item names, quantities, and prices)

Tip: The order summary visible throughout checkout, since users shouldn't have to navigate back to check what they're buying

Total cost

The final amount the user will be charged, including any taxes, fees, or discounts applied

Tip: Unexpected costs revealed at the last step are the leading cause of cart abandonment, so the total should be prominent and visible early

Payment method

Fields or options for entering payment details (card, PayPal, Apple Pay, or other available methods)

Tip: Express checkout options like Apple Pay and Google Pay offered prominently, since they significantly increase conversion

Billing and shipping address

Fields for the user to enter or confirm their billing and delivery address

Tip: Billing address defaulting to match shipping (with an option to uncheck if different) saves unnecessary typing

Promo code

A field to apply a discount code, positioned visibly within the order summary.

Security indicators

Visual signals that the transaction is secure e.g. lock icons, SSL badges, or recognised payment logos

Tip: Security indicators are suited to be near the payment fields

Confirmation step

A final review before the payment is submitted, giving users a chance to check before committing

Source: https://www.checklist.design/web-app/comments

Anchor to context

Comments attached to a specific piece of content (a paragraph, image, task, or row) rather than floating in a general thread

Reply threading

Replies nested under the comment they respond to, keeping related discussion together without flattening into a chronological list

Resolve and archive (if applicable)

A way to mark a comment thread as resolved, removing it from the active view while keeping it accessible in a history or resolved state

Reactions

Emoji reactions on individual comments as a lightweight way to acknowledge without adding a reply

@mention element

Mentioning a user by name notifying them directly, drawing them into the thread without requiring a separate message

Tip: Visually distinguish this so it's clear when a user is mentioned vs their name just being written in plain text

Edit action

The ability to edit a comment after posting, with a visible edited marker for transparency after saving edit

Delete action

Ability to delete a comment after posting, with a confirmation modal beforehand

Comment count indicator

A visible count or badge on the item being discussed, so collaborators can see where active threads exist without opening each one

The first screen a user sees after logging in, providing an at-a-glance overview of the most relevant data, actions, and recent activity.

Source: https://www.checklist.design/web-app/dashboard

Welcome state

A brief summary of what's happened since the last visit immediately re-orients returning users

Tip: A personalised greeting can be a nice touch but isn't ultimately necessary

Key metrics

The numbers most relevant to the user's goals, readable without leaving the home screen

Tip: Time period context (daily, weekly, monthly) gives numbers meaning at a glance

Recent activity

The most recently created or updated items, enabling users to resume work without hunting

Needs attention

Time-sensitive items requiring a decision, surfaced here instead of buried in another view

Tip: Alert fatigue can happen if this is overdone, so ensure what needs attention is critical and relevant

Quick actions

Shortcuts to the most common tasks, accessible without navigating away.

Tip: The action users take most frequently after landing is what belongs here

Empty state

The state shown when there is nothing to show yet, with a clear first action

Tip: A blank dashboard is one of the most common reasons new users churn

Layout control (if applicable)

Controls to show, hide, or reorder widgets so the home screen matches how the user works

A structured grid for dense datasets with sorting, filtering, bulk operations, and column control.

Source: https://www.checklist.design/web-app/data-table

Sortable columns

Column headers that sort rows by that value on click, toggling ascending and descending

Tip: A sort indicator in the header making the current sort direction always visible, since users lose track easily

Column visibility and order

Controls to show or hide individual columns and drag to reorder them

Tip: Persisting column preferences across sessions is expected by power users, since resetting on each visit is a consistent complaint

Row selection and bulk actions

Checkboxes on each row and a persistent action bar appearing when rows are selected

Tip: Showing the count of selected rows ('3 items selected') keeps the user oriented, especially when the selection spans a filtered result

Row actions on hover

Contextual actions (edit, delete, view) appearing when hovering over a row

Tip: Two to three hover actions maximum, since anything beyond belongs in an overflow menu. A row full of icons is hard to scan

Search and filter

A search input for quick lookup alongside filter controls for narrowing by specific attributes.

Tip: Active filters persisted visually as chips above the table — users need to know at a glance that results are being filtered.

Pagination

Controls to navigate between pages of results, with an option to choose how many rows show per page

Tip: Showing the total count ('1–50 of 1,240') gives users a sense of scale and progress

Frozen columns

The first column pinned so it remains visible when the user scrolls horizontally

Tip: Essential for wide tables that likely exceed window width so context can remain as the user scrolls

Export action

A way to download the visible or selected rows as CSV, spreadsheet, or another format

Tip: Show export reflecting the current filter and any other states so user understands exactly what is being exported

Empty and loading states

The states shown when the table has no rows or when data is being fetched

Tip: Skeleton rows during loading prevent layout shift and set expectations about how many rows will appear

A rich content view for reading, editing, and collaborating on structured documents.

Source: https://www.checklist.design/web-app/document-view

Document title and metadata

The document's name, owner, and last-modified details visible at the top.

Tip: An editable inline title is the expected pattern — requiring a separate settings screen to rename a document is a common frustration.

Table of contents

A navigable outline generated from the document's headings.

Tip: A table of contents that requires scrolling back to the top to access defeats its own purpose — sticky or floating placement is what makes it useful.

Rich text with inline media

Support for formatted text, images, embeds, and other content types within the body.

Tip: Most users bring content from Word or Google Docs — how gracefully paste handles those imports determines how much cleanup work they face.

View and edit mode distinction

A clear difference between reading a document and actively editing it.

Tip: Accidental edits are a major frustration in collaborative documents — a clear mode switch prevents content being changed unintentionally.

Version history or change tracking

A log of previous versions and the ability to restore or compare them.

Tip: Even basic 'last 10 versions' history is enormously valuable — it is one of the most-cited reasons users trust a platform with important documents.

Auto-save and last-saved indicator

Changes save automatically, with a visible timestamp of when the last save occurred.

Tip: 'Saving...' → 'Saved 3 seconds ago' is the gold standard — it reassures users without interrupting them.

Inline comments or annotations

The ability to add comments to specific sections or selections of text.

Tip: Flat unthreaded comments pile up quickly in a collaborative document — threading keeps conversations self-contained and the document readable.

Share and permission controls

A way to share the document and control whether recipients can view or edit.

Tip: A document shared with an entire organisation looks identical to a private one without a persistent sharing state indicator — that ambiguity causes accidental data exposure.

The state of a screen or component when there is no data to display, whether it's because a user is new, has cleared their content, or a search returned no results.

Source: https://www.checklist.design/web-app/empty-state

Illustration or icon

A visual that signals the empty state and gives the screen some personality, rather than feeling broken

Tip: Visual should be contextual e.g. empty inbox and a deleted account shouldn't be the same

Clear heading

A short, plain-language title naming what's missing

Tip: 'It's empty' isn't helpful while 'No projects yet' is clear

Supporting description

A brief explanation of what belongs in this space, most useful for first-time users

Primary action

A CTA pointing toward the next step: creating, importing, connecting etc

Tip: It should create the first item, not just link somewhere generic

Zero state vs. no-results state

A distinction between a screen that is empty because nothing has been created versus one that returned no search or filter results

Tip: A no-results state without a way to reset or broaden the search is a dead end — always provide an escape route

Error state variant

A separate variant for when content failed to load, as opposed to genuinely being empty

Tip: Showing an empty state when the real issue is a loading error causes users to assume they have lost their data

A stream of content, activity, or updates that users scroll through to stay informed.

Source: https://www.checklist.design/web-app/feed

Feed item preview

A preview of each feed item (title, excerpt, or thumbnail) sufficient to judge whether the item is worth opening

Tip: Variable-height items force the eye to re-adjust between each card whereas a consistent layout makes items harder to differentiate

Author

The name and avatar of the person who created or posted each item

Tip: Linking the author name to their profile is a natural interaction expectation in most social or collaborative contexts

Timestamps

When each item was published or last updated

Tip: Relative time works well for recent items, but eventually it should switch to the exact date and time

Engagement actions

Ways to interact with feed items (like, comment, share, save, or react)

Tip: Consider size of every interaction in terms of prominence and frequency of use

New content indicator

A banner or button that appears when new items have been posted since the user loaded the feed

Tip: Auto-injecting new posts while the user is reading pushes existing content down and makes scrolling janky

Filtering

Controls for narrowing the feed to a specific category, content type, or followed accounts

Tip: Always indicate when filters are active for users to understand why specific content may or may not be shown

Pagination or infinite scroll

A mechanism for loading more items as the user reaches the bottom of the feed

Tip: Pagination is suited well for work-related apps that have extensive databases

Empty state

The state shown when the feed has no items to display whether due to no connections, no activity, or an empty filter result

Tip: A first-use empty state can point towards a specific action e.g. follow people, create a post, invite a colleague

In-app prompts that collect user opinion — NPS surveys, CSAT ratings, and open text — surfaced at the right moment and at the right frequency.

Source: https://www.checklist.design/web-app/feedback

Prompt timing

The moment the feedback request appears, based on demonstrated engagement rather than a fixed page count or time-on-site.

Tip: The highest-signal feedback comes from users who have just completed a meaningful task — the experience is fresh and the sentiment is accurate. Asking on sign-in, on the pricing page, or after an error produces noise.

Contextual trigger

The specific page or action that initiates the request, relevant to the question being asked.

Tip: 'How easy was it to export this report?' asked after an export produces better insight than 'How are you finding the product?' asked on the dashboard.

Single-question entry

Starting with one question rather than a multi-step form, to lower the barrier to responding.

Tip: Drop-off between question one and question two in in-app surveys is steep. Capturing the primary signal — the rating — at a high response rate is more valuable than capturing a complete response from a fraction of users.

Rating scale

A numeric scale — typically 0–10 for NPS or 1–5 for CSAT — as the primary feedback signal.

Tip: Segment the follow-up question by score band. Promoters, passives, and detractors have different things to say — a single follow-up question for all three averages the responses into something less useful than any one segment alone.

Open text follow-up

An optional field for the user to elaborate on their rating in their own words.

Tip: Label it explicitly as optional. 'Tell us more (optional)' outperforms an unlabelled empty field — users need to know they can skip before they will commit to the rating step.

Dismissal option

A clearly visible way to close the prompt without responding.

Tip: Make dismissal low-friction and label it neutrally — 'Not now' rather than 'Skip' or 'No thanks'. A prompt that is difficult to close trains users to avoid the area of the screen where it appears.

Frequency cap

A limit on how often the same user sees a feedback prompt, regardless of how many eligible triggers are met.

Tip: Repeated prompts after dismissal erode trust faster than they improve response rate. A user who has dismissed twice is signalling disinterest — the third prompt is counterproductive.

Exit-intent prompt

A feedback request triggered when the user shows signs of leaving — cursor moving toward the browser chrome, or navigating away from a key screen.

Tip: Exit-intent detection is more reliable on web than on mobile — cursor position is a measurable signal. Limit it to one question; a full survey on the way out will not be completed.

Submission confirmation

A brief acknowledgement that the response was received, shown before returning the user to their context.

Tip: The confirmation should feel closing, not promotional. 'Thanks, we've got your feedback' is better than 'Thanks! We're always working to improve.' — the latter reads as a template rather than a genuine receipt.

A self-serve documentation hub where users can find answers without contacting support.

Source: https://www.checklist.design/web-app/help-center

Search with suggestions

A prominent search input that returns relevant articles as the user types

Tip: Autocomplete suggestions increase the chance of the user finding an answer quicker

Content categories

A hierarchy of topics that lets users browse when they are not sure what to search for

Tip: Categories that reflect how users think about the product, not internal team structure, are what make browsing work

Featured and popular content

The most-viewed or most-useful articles surfaced on the help center homepage

Tip: Popular articles shift as features change, so ensure featured content does not stay stale

Article formatting

Proper heading hierarchy, screenshots, and formatted code blocks in articles where relevant

Tip: Screenshots become outdated quickly after redesigns, so a regular review process is critical

Last updated date

The date each article was last reviewed or edited, shown at the top.

Tip: A recent date reaffirms the user that the content is up to date and valid to follow

Helpfulness feedback

A simple thumbs up/down or yes/no at the end of each article to help identify if content is not helpful and needs to be reconsidered

Related articles

Links to similar or adjacent articles that might answer follow-up questions

The personalised starting point of the app — a dashboard that orients the user and surfaces the most relevant next actions.

Source: https://www.checklist.design/web-app/home

Personalised greeting

A personalised greeting using the user's name, helping orient them as they return to the product.

Tip: Recent context makes the greeting functional rather than decorative — 'Welcome back, Sarah. You have 3 unread messages' is more useful than just the name.

Key metrics or activity summary

A headline view of the numbers that matter most to the user.

Tip: A fixed set of metrics becomes irrelevant as priorities vary — 3–5 with the option to customise covers the range without overwhelming.

Quick actions and shortcuts

The 3–5 most commonly performed tasks, accessible with a single click.

Tip: Guessed shortcuts often miss the mark — usage data is the reliable guide to what actually belongs here.

Recent items or activity

The most recently created or edited items so the user can jump straight back in.

Tip: Last-accessed order serves returning users better than last-created — they want to find what they were just doing, not what they started most recently.

Onboarding steps for new users

A checklist or progress indicator guiding new users through the most valuable setup tasks.

Tip: Persistent onboarding checklists that remain after completion create noise for established users — retiring the widget once complete is the standard pattern.

Notification or alert surface

A place to surface important items requiring the user's attention.

Tip: Treating 'requires action' and 'for your information' notifications the same trains users to ignore everything — the distinction is what gives the surface value.

Customisable layout

The ability to rearrange, add, or remove widgets on the home screen to match individual workflow preferences.

Tip: Most users never customise layouts — the defaults are the experience for the majority, and they are the product's statement about what matters.

A screen that shows the third-party tools and services a product can connect with, allowing users to link their existing workflows.

Source: https://www.checklist.design/web-app/integrations

Catalogue

A browsable list or grid of all available integrations with logos, names, and a brief description of each

Tip: Suggested to group later by installed and not installed after first integration is successfully connected

Categories or filtering

A way to browse integrations by category to narrow down a large catalogue (productivity, communication, analytics, CRM)

Search

A search field to find a specific integration by name without having to scroll through the full list

Connection status

A clear indicator on each integration showing whether it is connected, disconnected, or connected but is experiencing an issue

Tip: A dot is better paired with a label if you want to be explicitly clear

Connect and disconnect actions

A clear way to initiate or remove a connection, with a confirmation step before disconnecting

Tip: For disconnecting, include what will stop working in the confirmation step

Integration detail

A dedicated view for each integration showing what data it accesses, configuration options, and a sync or activity log.

Request an integration

A way for users to suggest tools they would like the product to support

Tip: This doubles as a lightweight research tool as the most-requested integrations tell you exactly where to invest next.

A visual board that organises items into columns representing stages or statuses, allowing users to track and move work through a workflow.

Source: https://www.checklist.design/web-app/kanban-board-view

Columns

Distinct vertical lanes representing each stage of the workflow (To Do, In Progress, Done, or custom stages)

Tip: Every team structures their workflow differently, so adding, renaming, and reordering columns should be available

Cards

Individual items displayed within each column, showing the title and key metadata at a glance

Tip: Title, assignee, and due date on the card face covers most use cases without cluttering

Drag and drop

The ability to move cards between columns and reorder them within a column by dragging

Tip: A visual drop target as the card is dragged to indicate whereWithout it, users are never sure where the card will land

Quick add card

A fast way to create a new card directly within a column without opening a full form

Card detail on click

Clicking a card opening its full detail — description, comments, attachments, history — without leaving the board.

Tip: Card detail in a side panel or modal rather than navigating away — losing the board context frustrates users.

Column item count

A count of how many cards are in each column, visible in the column header

Tip: A count is useful for conversations and to keep track of column amount without individually counting items

Filtering, sorting and grouping

The ability to re-organise cards by assignee, label, priority, or due date to focus on a subset of work, as an example

A simpler row or card layout for browsing collections where dense tabular structure is not needed.

Source: https://www.checklist.design/web-app/list-view

Primary info hierarchy

The primary identifier for each item prominent enough to scan without reading every detail.

Tip: Typographic hierarchy — larger or bolder text for the primary field — is what makes lists scannable at speed.

Secondary metadata without clutter

Supporting details — date, category, owner — present but visually subordinate.

Tip: More than 3–4 secondary fields makes rows dense and harder to scan — hiding the least important ones until hover is a reliable solution.

Item actions on hover

Actions like edit, delete, or open appear when the user hovers over a list item.

Tip: Right-aligned actions that fade in on hover keep the list clean at rest — always-visible action icons clutter each row.

Bulk selection mode

A way to select multiple items and act on them together.

Tip: A visible 'X items selected' bar makes it clear the user is in a different mode — without it, selection state is easy to forget.

Sort and filter controls

Controls for ordering the list and narrowing it to specific items.

Tip: Active sort and filter state visible at all times prevents users from losing their place — a filter applied and then navigated away from should persist on return.

Infinite scroll or load more

A way to see additional items beyond the initial load.

Tip: 'Load more' is generally preferable to infinite scroll for content users need to reference — it preserves scroll position and lets users find where they left off.

Group or section headers

Visual dividers and labels when items are organised into categories or time buckets.

Tip: Sticky group headers make it easier to navigate long lists — the user always knows which group they are in.

Empty and first-use states

Helpful messages and actions when there are no items to display.

Tip: A blank list with no guidance is a top drop-off point for new users — first-use empty states that link directly to creating the first item consistently improve activation.

A login page is a critical component of many web applications, serving as the gateway for users to access personalized features, secure content, and their own data

Source: https://www.checklist.design/web-app/login

Email and password fields

The two standard authentication inputs: an email address field and a password field.

Tip: Pre-filling the email field after a failed login so the user only has to re-enter the password is a small detail that reduces friction

Show/hide password toggle

A button alongside the password field that reveals or conceals what the user has typed

Forgot password

A link that begins the password reset flow for users who cannot remember their credentials

Remember me

A checkbox that persists the user's session across browser closures

SSO or social login

Alternative authentication via a third-party identity provider (Google, Microsoft, GitHub) that bypasses the email/password form.

Sign up link

A link to the account creation screen for users who do not yet have an account

Error messages

Feedback shown when authentication fails, indicating what the user should try next

A screen shown when the application is temporarily unavailable due to scheduled maintenance or an unexpected outage.

Source: https://www.checklist.design/web-app/maintenance

Clear status message

A plain-language explanation that the product is currently unavailable and why

Tip: Scheduled maintenance and unexpected outages call for different messaging, since users respond very differently to each, and conflating them feels evasive

Estimated return time

When the product is expected to be back online, as specifically as possible

Tip: Vague messages like 'back soon' frustrate users, since even a rough estimate like 'within 2 hours' is far more reassuring

Status page link

A link to a live status page where users can monitor progress and see real-time updates

Tip: A status page hosted on a separate domain remains accessible even when your main infrastructure is down

Contact or support link

A way to reach support for urgent issues that cannot wait for the maintenance window to end

Brand consistency

A maintenance page styled consistently with the product, even if the content is minimal

Tip: A well-designed maintenance page communicates professionalism and reduces user anxiety

A form split across multiple steps or screens to reduce cognitive load when collecting a large amount of information from the user.

Source: https://www.checklist.design/web-app/multi-step-form

Progress indicator

A clear visual showing how many steps exist and which one the user is currently on

Tip: Labels for each step help give context hint to future steps

Step heading and context

A clear title and brief context for each step, so users know what they are being asked to provide.

Field grouping

Each step containing only fields that belong together logically e.g. phone and email for contact details

Step-level validation

Validation happening at each step before the user proceeds, not surfaced all at once at the end

Back navigation

The ability to return to a previous step to review or change answers without losing subsequent progress

Save and resume

The ability to save progress and return to the form later

Tip: Particularly useful for forms that require information that connect to be instantly provided or sourced

Final review step

A summary of all entered information before final submission, giving the user a chance to review and edit

Tip: Offer a link to each section at this step for editing

Where users configure exactly which notifications they receive, through which channels, and how frequently.

Source: https://www.checklist.design/web-app/notification-settings

Categories

Notification types organised into logical groups e.g. product activity, mentions, billing, security, marketing

Channel selection

Controls for which channel each notification type comes through e.g. in-app, email, push, or SMS

Tip: Not all channels make sense for all notification types — a billing alert via push notification is rarely necessary

Frequency controls

Where applicable, controls for how often notifications arrive e.g. immediately, daily digest, or weekly summary.

Global mute

A way to temporarily silence all notifications without having to turn each one off individually

Save confirmation

A clear indication that preference changes have been saved.

Tip: Auto-save works well also, the key thing is ensuring the user is aware the changes are enabled as often they are customising due to preference or annoyance

An area that surfaces alerts, updates, and activity relevant to the user to help them stay informed

Source: https://www.checklist.design/web-app/notifications

Notification list

A chronological feed of alerts, messages, and activity updates for the user.

Tip: Date grouping (today, yesterday, this week) makes the list more scannable

Read and unread states

A clear visual distinction between notifications the user has and hasn't seen

Tip: An unread count can also appear on the icon/button that opens notifications

Notification type

A visual or label indicating type e.g. mention, system alert, billing event

Timestamp

A relative time for recent items e.g. 2 mins ago, a complete date and time for older ones e.g. May 14 7:08pm

Actions (if applicable)

An action related to the notification event e.g. a notification that involves a direct message could have a 'reply' button

Mark all as read

A single action to clear all unread indicators at once

Empty state

A clear message when there are no notifications

A guided experience that introduces new users to the product and gets them to their first moment of value as quickly as possible

Source: https://www.checklist.design/web-app/onboarding

Progress indicator

An indication of how many steps are involved and where the user currently is in the sequence

Tip: Every step beyond five is another opportunity to lose the user — 3 to 5 is the reliable range

Welcome message

A brief message acknowledging this is a new experience and orienting the user toward what the product does.

Account setup

The minimum information needed to personalise the experience, gathered at the start

Tip: Delay any fields not genuinely needed to start using the product

Product highlights

Key features introduced through short contextual tips or a visual walkthrough

Tip: Offer a skip route for user who has seen content before or prefers to learn by doing

First action prompt

A clear prompt directing the user to an action or feature

Tip: This should be the quickest step towards a user understanding the value of the product

Completion confirmation

A clear acknowledgement that setup is complete, transitioning the user into the main product

A pricing page breaks down costs, features and options for paying to access the product itself or a version of it.

Source: https://www.checklist.design/web-app/pricing

Plan names, prices and frequency

The name and cost of each available plan, with billing frequency clearly stated

Billing period toggle

A switch between monthly and annual billing, with the annual discount shown if applicable

Feature comparison (if price options)

A side-by-side breakdown of what each plan includes and excludes

Call to action

A button on each plan to start a trial, subscribe, or contact sales

Free tier or trial details

What's included, how long it lasts, and what happens when it ends

Tip: State clearly whether the account downgrades or charges automatically once the trial ends

FAQ section

Answers to the most common questions about billing, plan limits, cancellation, and payment

Enterprise option

A prompt for organisations that need a custom arrangement beyond the standard listed plans

The view of a user that other people in the product see, distinct from the account settings profile, which is private and editable.

Source: https://www.checklist.design/web-app/public-profile

Avatar and display name

The user's photo and name, shown prominently as the primary identifier on the profile

Tip: A fallback avatar using initials is better than a blank space

Role or title

The user's job title, team, or role within the product context, where relevant

Bio or description

A short free-text description the user has written about themselves

Activity or contributions

A summary of what the user has done in the product (posts, projects, comments, or other public actions)

Tip: Surfacing activity the user hasn't chosen to make public is a privacy violation, since public profiles should only reflect what the user has explicitly opted in to show

Contact or follow action

A way to initiate contact, follow, or connect with the user, depending on what the product supports

Joined date (optional)

When the user joined the product

Profile visibility controls

Which profile fields are visible according to the user's own privacy preferences

A read-only view of generated business data containing charts, tables, and summaries designed for review and sharing.

Source: https://www.checklist.design/web-app/report-view

Report metadata

The title, author, date range, and when it was generated, providing enough context to make sense of the data outside the platform

Summary or key findings section

A brief narrative or set of highlights at the top, before the detailed data

Data visualisations

Charts, tables, and graphs that make the data easier to interpret

Tip: Certain charts represent information in the clearest narrative e.g. line charts for trends, bar charts for comparisons

Filter capabilities

The ability to click into a chart or row to explore the underlying data in more detail

Tip: Even read-only reports benefit from basic filtering, since narrowing to a single segment without regenerating the whole report saves significant time

Export to PDF, CSV, or spreadsheet

Download options for sharing or further analysis outside the platform

Tip: PDF suits presentations, while CSV suits further analysis

Table of contents

Sections and headings laid out for readers to navigate to specific areas of the report if needed

Generated reports that can be exported, scheduled, and shared — structured summaries of data for stakeholders.

Source: https://www.checklist.design/web-app/reporting

Report selection and parameters

A way to choose the type of report and configure its inputs — date range, segments, filters.

Tip: Users who run the same report every week should not have to rebuild the configuration each time — saved presets remove significant recurring friction.

Scheduled or on-demand generation

The option to run a report immediately or schedule it to be generated and delivered automatically.

Tip: Email delivery is the most common use case for scheduled reports — format should be selectable per report rather than a global setting.

Export options

Download the report in PDF, CSV, or spreadsheet format.

Tip: PDFs work for sharing with stakeholders, CSVs are better for further analysis — when only one format is possible, CSV is more useful to more users.

Report title and generation date

Clear labelling of what the report covers and when it was created.

Tip: A report without its parameter context — date range, active segments — is difficult to interpret when shared outside the platform.

Summary or key findings section

A brief narrative or highlights section at the top of the report.

Tip: An auto-generated summary adds value for users who share reports with people who will not read the full data.

Historical archive of past reports

A list of previously generated reports that can be downloaded or re-opened.

Tip: Finding a quarterly report from six months ago should take one click — organising by report type and date is what makes that possible.

Share or distribute options

A way to send or share the report with colleagues or external stakeholders.

Tip: Shareable links with expiry work well for external recipients — requiring an account to view a shared report is a significant barrier.

Displaying and navigating results matching a user's query from within the product.

Source: https://www.checklist.design/web-app/search-results

Search input

A search field at the top of the results, pre-filled with the current query so it can be refined without starting over

Result count

How many results were found for the query

Tip: Show it even at zero as it tells the user the search ran, not that something broke

Result items

Each result shown with enough to identify it — title, type, image, and a snippet of the matching content

Tip: Highlighting the matched term in the snippet confirms

Result type indicators

A label or icon marking what kind of item each result is (document, person, project, message)

Filters

The ability to narrow results by category, date, status, or other relevant values

No results state

The state shown when a query returns no matches, ideally with suggestions for what to try instead

Tip: Offer alternatives instead of a blank space, whether it's a suggested query or spelling change

Recent searches

A list of the user's previous queries, shown when the search field is focused but empty

A screen that gives users control over their account, preferences, and application behaviour

Source: https://www.checklist.design/web-app/settings

Structure

Organising settings controls into logical categories e.g. account, notifications, security, billing.

Tip: Consider elevating the most commonly changed settings rather than the most important

Account details

The fields where users update their name, email address, and profile photo

Security details

The ability to change the password, two-factor authentication and other security information

Tip: These fields should require re-authentication to save changes

Notification preferences

Controls for which notifications the user receives and through which channel, grouped by type (product updates, reminders, billing)

Tip: Grouping by type and/or platform helps reduce the chances of a user disabling all notifications rather than some

Billing

Managing payment method, upgrading or cancelling a payment — this could also be a preview of this information with a link directly to the billing page if separate

Additional preferences (if applicable)

Language, timezone, date format, and appearance settings like dark mode

Danger zone

Destructive actions like account deletion, clearly separated from the rest of settings

Tip: Include a confirmation step for any destructive actions, with details on what will be lost if the user continues

A screen that displays the full details of a single record — a user, order, document, or any other entity — after selecting it from a list.

Source: https://www.checklist.design/web-app/single-item-detail

Clear title or identifier

The name, ID, or primary label of the item, shown prominently at the top of the screen

Status indicator (if applicable)

A clear signal of the item's current state (active, pending, completed, archived)

Tip: Colour-blind users can't distinguish status by colour alone, so include a text label alongside the colour indicator to ensure it's readable

Key details section

The most important attributes of the item surfaced prominently, with secondary details available below or in a sidebar

Tip: It’s critical to exercise hierarchy here and consider what details matter more than others, and how can they be effectively grouped

Edit action

A clear way to modify the item's details, either inline or via an edit mode

Related items or activity

Associated records, linked content, or a history of changes related to this item

Tip: An activity log showing who did what and when is highly valued in collaborative products

Breadcrumb or back navigation

A way to return to the list or parent context

Destructive actions

Delete or archive options, available on the detail screen but kept visually separate from the primary actions

A screen that displays tasks, milestones, or events along a horizontal time axis, commonly used in project management products to show schedules and dependencies.

Source: https://www.checklist.design/web-app/timeline-gantt-view

Time axis

A horizontal axis representing time, with clear date markers (days, weeks, or months depending on the zoom level)

Tip: A timeline locked to a single timescale rarely fits all project sizes, and zoom controls let users shift between day, week, and month views as needed

Task bars

Horizontal bars representing each task or milestone, positioned according to their start and end dates

Tip: A monochrome timeline becomes hard to parse at a glance — colouring bars by status, assignee, or category makes patterns visible immediately

Dependencies

Visual connectors between tasks that must be completed in sequence, showing which items are blocked by others

Tip: Dependency lines can visually overwhelm a busy timeline, so showing them on hover or when a task is selected keeps the default view readable

Today indicator

A vertical line marking the current date so users can immediately see what is on track and what is overdue

Milestones

Distinct markers for key dates or deliverables that are not duration-based tasks

Drag to reschedule

The ability to move or resize task bars by dragging to update dates directly on the timeline

Tip: A date tooltip while dragging gives users precise feedback on the new start and end dates

Row grouping

The ability to organise tasks by assignee, team, project phase, or another dimension

The dedicated page a user lands on when they have decided to subscribe or move to a higher plan.

Source: https://www.checklist.design/web-app/upgrade

Current vs. target plan

A comparison of the user's current plan and the target tier, making the difference in value explicit

Tip: A side-by-side comparison is more effective than listing only the new plan, since the contrast makes the value clearer

Feature highlights

The three to five most compelling features that come with the upgraded plan

Tip: Features most relevant to the user's existing usage convert better than a generic feature list

Billing period toggle

A toggle between monthly and annual billing, with the price updating accordingly

Tip: Defaulting to the annual price sets a lower monthly anchor, and users who prefer monthly can switch

Trust signals

Reassurances like 'cancel anytime', SSL badges, and accepted payment logos

Tip: 'Cancel anytime' near the primary CTA, not in the footer, since it's the most common objection and needs to be addressed at the moment of decision

Primary CTA

The main action — 'Upgrade now' or 'Start free trial' — visible without scrolling.

Tip: If a trial is available, it should be the primary CTA — it's lower commitment and converts better. One CTA is better than two.

Objection handling

Answers to the most common questions or hesitations about upgrading.

Tip: At minimum: what happens at the end of a trial, whether it auto-renews, and how to cancel.

Transparent pricing

The price shown on the upgrade page matching exactly what appears at checkout.

Tip: Any surprise discovered at the payment step causes significant abandonment — surface all costs before the user commits.

A screen that allows admins to view, invite, and manage the users who have access to a product or workspace.

Source: https://www.checklist.design/web-app/user-management

User list

A table of all users showing name, email, role, and account status

Tip: Activity information is also useful to show here to help spotlight inactive users

Invite user action

A clear way to add new members by email, with an option to set their role before sending

Tip: Depending on your average user team size, a bulk invite action is valuable to include and a common way for teams to transfer a company user base from another product

Roles and permissions

The ability to assign and change what each user can see and do within the product

Tip: Stick with universal terms like admin, member or viewer where possible, avoiding custom user titles

Pending invitation status

A view of invitations sent but not yet accepted, with the option to resend or revoke

Search and filter

The ability to find users quickly by name, email, role or other additional user information that applies

Remove or deactivate user

A clear way to revoke access, with a distinction between temporary deactivation and permanent removal

A screen outlining different versions of an item or experience that you can navigate between.

Source: https://www.checklist.design/web-app/version-history

Version timeline

A list of saved versions in reverse chronological order, each labelled with a timestamp and the user who saved it

Named versions

The ability to give a version a name (a milestone, a submission date, a phase label) so it is findable without scrolling through timestamps

Tip: Autosave versions are useful for recovery, but named versions are what users actually navigate by, so making both available covers both use cases

Version preview

A read-only preview of any past version, visible without committing to a restore

Diff or change summary

A visual indication of what changed between two versions (added, removed, or modified content)

Tip: A diff view reduces the time it takes to evaluate whether a version is the right one to restore

Restore action

A clear way to make a past version the current one, with a confirmation step that sets expectations about what will happen to the current content

Autosave indicator

A persistent, subtle indicator of when the document was last saved automatically, visible without being disruptive

Private account settings like credentials, linked accounts, notifications, and destructive actions.

Source: https://www.checklist.design/mobile/account

Email

The current email address displayed with an option to update it

Tip: Verifying the new address before completing the change is standard practice, where notifying the old address too adds a useful security signal.

Password change

A way for users to update their account password.

Tip: Requiring the current password before accepting a new one prevents unauthorised changes on an unlocked device

Linked accounts

A view of which third-party accounts are connected for sign-in or data access, with ability to disconnect

Save confirmation

Clear feedback that changes have been saved, either inline or as a toast

Tip: Auto-save with a subtle confirmation is more pleasant than explicit save, but if you want an explicit save button, it should remain disabled until there are changes

Delete or deactivate account

Options to deactivate or permanently delete the account, clearly separated from other settings

The sheet that slides up from the bottom of the screen to present options or confirmations — the mobile equivalent of a dropdown menu or modal dialog.

Source: https://www.checklist.design/mobile/action-sheet

Heading and actions

Similar to modals, there must be a clear heading outline the purpose of the action sheet, along with relevant actions the user can select to continue

Swipe or backdrop dismiss

The sheet is dismissible by dragging it down or tapping the dimmed area behind it, along with the expected close button

Destructive action styling

Any destructive option — delete, remove, block — styled in red and positioned last, separated from safe actions.

Tip: Users scan top-to-bottom and tap quickly — a destructive action buried at the bottom prevents accidental taps.

Cancel action

A clearly labelled cancel/close option that dismisses the sheet without taking any action

Tip: Typically the secondary action, similar to a desktop modal

Snap points (if expandable)

Defining where the action sheet expands or compresses to on resize, instead of it being free-form

Tip: A drag handle at the top of the sheet indicates the action sheet can be expanded (or dismissed)

Content scrollability

Consider what stickies as you scroll so the sheet remains contextual, and that the sheet stays fixed in position on scroll

Tip: Similar to modals, it's best to avoid scrollability here unless you cannot avoid it

Keyboard relation

Consider the action sheet size and responsiveness if keyboard needs to be triggered while it is active

Backdrop dimming

The screen behind darkened to draw focus to the action sheet

A chronological stream of actions taken by users and the system — a browsable record of what has happened, distinct from notifications that demand attention.

Source: https://www.checklist.design/mobile/activity-feed

Feed item anatomy

The consistent structure of each entry: who did what, to which object, and when

Tip: When actor, action, and object occupy the same position across all item types, users can scan the feed without reading every word

Relative timestamps

Times shown in human-readable relative format ('just now', '2 minutes ago', 'yesterday') for recent activity

Tip: Switch to absolute dates for items older than 7 days. '3 weeks ago' stops being useful when a user needs to pinpoint when something happened

Avatar and attribution

A visual identifier (avatar or icon) for the person or system responsible for each activity item

Tip: System-generated events need a distinct visual treatment so users can tell human activity from automated actions without reading the description

Object link

Each feed item linking directly to the resource it describes (the document, task, or message that was acted upon)

Tip: The feed is most useful when it doubles as a navigation shortcut. A user who taps an activity item should arrive at exactly the thing that changed, not a category view

Activity grouping

Related actions from the same actor or on the same object consolidated into a single item rather than listed individually.

Tip: 'Sarah edited 6 items' is far less noisy than six separate edit events. Group aggressively — uncollapsed feeds in active workspaces become unreadable quickly.

Filter controls

A way to narrow the feed by actor, action type, or time period.

Tip: When the feed spans a large team or a long period, filtering is the difference between a useful audit trail and a wall of noise.

Empty state

Helpful content when the feed has no items — for new users who have not yet generated activity, and for filtered views that return nothing.

Tip: A new user's empty feed is a prompt, not a gap — use it to suggest the first action that will generate activity.

Load more

A mechanism for viewing older activity beyond the initial page load.

Tip: Infinite scroll works against users who treat the feed as a reference — a 'Load more' button preserves scroll position so they can return to where they were.

Payment history, receipts, and everything related to how the user is charged.

Source: https://www.checklist.design/mobile/billing

Manage via App Store

A link or prompt directing users to the App Store or Play Store to manage their subscription

Tip: Apple and Google require subscription management to happen through their platform, so a buried path there is a consistent source of support contacts and poor reviews

Next billing date and amount

The next scheduled payment date and amount visible without needing to dig into billing history

Tip: Surfacing this proactively reduces cancellations driven by surprise charges

Billing history and receipts

A list of past charges with amounts and dates, with individual receipts accessible

Tip: Particularly important for users paying with a work card, who often need receipts for expense reporting

Restore purchases

A button to restore previously purchased subscriptions or in-app purchases after reinstalling or signing in on a new device

Tip: Required by Apple for apps with in-app purchases, since it solves the common case of reinstalling after a device change

Refund help link

Guidance on how to request a refund, typically via the platform's own process

Tip: Refunds are handled by Apple or Google, not the app directly, and making this clear reduces confusion and support volume

Tax display

Tax or VAT amounts displayed separately from the base price where legally required.

Capturing photos, video, or documents as well as reviewing and customising the capture experience for accessing the phone camera within an app.

Source: https://www.checklist.design/mobile/camera-media-capture

Permission request

Camera permission requested at the moment capture is triggered (not on app launch or during onboarding)

_Tip: Asking earlier without context of camera usage doesn't feel trustworthy _

Viewfinder and capture button

A full-screen viewfinder with a clearly positioned, large capture button

Tip: Button should be reachable by thumb at the bottom of the screen

Flash controls

Flash toggle accessible without leaving the capture screen, with auto, on, and off states clearly indicated

Camera flip

A clear camera flip button accessible during capture, positioned so it is not accidentally triggered during shooting

Post-capture preview

A preview shown after capturing, giving the user the chance to retake or confirm before the media is used

Gallery picker of captures

The option to open photo library containing only photos captured within that series until exit of camera

Source: https://www.checklist.design/mobile/cart

Item list

Each item in the cart shown with its image, name, selected variants, and quantity

Quantity stepper

Plus and minus controls for adjusting quantity inline that are large enough to tap accurately without zooming.

Swipe to remove

A swipe-left gesture on a cart item revealing a remove action to delete item

Price breakdown

Subtotal, any applied discounts, estimated tax, and total shown before the checkout action.

Tip: If prices will change after cart e.g. delivery fee, specify that it will be shown later

Empty cart state

The state shown when no items are in the cart, with a clear prompt to continue browsing

Promo code field

The ability to enter the code and see discount across items and total

Tip: Can also be visible at checkout, but users may want to see the discounts here first before proceeding

The one-to-one or group messaging screen, handling keyboard behaviour, message input, media sharing, and real-time updates in the constraints of a mobile screen.

Source: https://www.checklist.design/mobile/chat

Keyboard push-up

The message input bar rising with the keyboard when it opens, so the conversation history is not obscured

Tip: The behaviour differs between iOS and Android, so explicit handling on both platforms is what prevents the common bug of the keyboard obscuring the input bar

Input bar

A persistent input bar at the bottom of the screen containing a text field, send button, and media attachment option, thumb-reachable in all grip positions

Message bubbles

Sent messages on the right, received on the left, consistent with every messaging convention the user already knows

Tip: Breaking the sent-right received-left convention for a design reason is rarely worth the disorientation it causes

Swipe to reply

Swiping a message right revealing a reply-to action, threading the response to the specific message

Long press message actions

Long pressing a message opening a reaction picker and action menu e.g. react, reply, copy, delete

Read receipts

Sent message status shown as subtle indicators below or within the message bubble (sent, delivered, read)

Media and file sharing

Images, videos, and files shareable directly from the input bar, with inline previews in the conversation thread

Typing indicator

An animated indicator when the other party is composing

Scroll to latest

When new messages arrive while the user is scrolled up, a button to jump to the latest message

The payment flow on mobile optimised for native payment methods and the constraints of a small screen.

Source: https://www.checklist.design/mobile/checkout

Native payment methods

Apple Pay and Google Pay as the primary checkout options, to complete the purchase with a single biometric tap.

Tip: It is important to still offer manual card entry if you feel users will be concerned about 3rd part tool usage

Persistent order summary

The item list, quantities, and total available throughout the checkout flow — either persistently visible or accessible with a single tap

Minimal form fields

Only the fields genuinely required to complete the purchase e.g. card details, delivery address

Autofill capabilities

Shipping address fields that support iOS and Android autofill, removing the need to type a full address manually.

Keyboard types per field

Appropriate keyboard types throughout checkout e.g. numeric for card numbers and CVV, date or numeric pad for expiry.

Checkout progress

A clear step indicator for a multi-step experience e.g. having a Details, Payment and Checkout page separately

Error recovery

The experience after a payment failure, returning to the payment step with all previously entered data intact and a clear explanation of the reason

Order/payment confirmation

A clear confirmation screen with summary, payment method and amount, along with any other relevant information e.g. expected arrival date if it involves physical delivery

Tip: It's common to email the user an invoice or payment confirmation, which the user can be reminded of here so they know they don't have to keep this page open in the app

A glanceable summary of what matters most in an app experience, typically with leads that take the user to other specific areas of the app.

Source: https://www.checklist.design/mobile/dashboard

Thumb-zone layout

Primary actions and key content placed in the lower two-thirds of the screen where thumbs naturally reach

Tip: The top quarter of a phone screen is largely unreachable for one-handed use, so interactive elements placed there are routinely missed

Widget-based structure

Content organised into discrete, scannable cards or widgets rather than long scrolling sections

Tip: A dashboard that tries to answer ten questions at once answers none of them well, since each card works best when focused on a single thing

Pull to refresh

Dragging down refreshes the dashboard data, with a visible indicator and haptic on trigger

Glanceable metrics

The most important numbers or status indicators visible without any interaction

Quick actions

The most common tasks accessible directly from the dashboard, without navigating to another screen.

Tip: The action users take most frequently after opening the app is what the dashboard quick actions should surface — it is rarely the action the team assumed.

Personalised content

Where applicable, content and order reflecting the user's history, preferences, or role

Per-widget states

Each widget handling its own loading skeleton and empty state — the dashboard never partially loads in a confusing way.

Notification surface

Time-sensitive alerts or action items surfaced on the dashboard so users do not need to hunt for what requires attention

In-app prompts that ask users for their opinion — NPS surveys, rating scales, and open text — surfaced at the right moment and at the right frequency.

Source: https://www.checklist.design/mobile/feedback

Prompt timing

The moment at which the feedback request appears, chosen to follow a point of completed value rather than a fixed session count

Tip: The highest-quality feedback comes from users who have just done something successfully, since the experience is fresh and the sentiment is accurate. Asking after a failure, or on launch, produces noise

Contextual trigger

The specific in-app event or screen that initiates the feedback request, relevant to the question being asked

Tip: 'How easy was it to complete that payment?' asked immediately after checkout produces better signal than 'How do you feel about the app?' asked on the home screen

Single-question entry

Starting the feedback flow with one question rather than a form, to lower the barrier to responding

Tip: NPS surveys convert because they start with one question. Even if more follow, the initial commitment to a single answer gets users through the door, since the drop-off at step one is the most significant

Rating scale

A numeric scale (typically 0–10 for NPS or 1–5 for CSAT) as the primary feedback signal

Tip: Segment the follow-up question by score range. Promoters, passives, and detractors have different things to say, since a single follow-up question for all three produces averaged, less useful responses

Open text follow-up

An optional text field shown after the rating, inviting the user to expand on their score.

Tip: Mark it explicitly as optional and say so. 'Tell us more (optional)' outperforms an unlabelled empty field — users need to know they can skip before they will commit to the rating step.

Dismissal option

A clear way to close the prompt without responding.

Tip: Label the dismiss action neutrally — 'Not now' rather than 'No thanks'. The user who dismisses today is still worth asking again in three months.

Frequency cap

A limit on how often the same user sees a feedback request, regardless of how many trigger conditions are met.

Tip: Users who dismiss a prompt repeatedly are signalling disinterest — continued prompts push them toward frustration rather than response. Once per session is a reasonable maximum; once per month a reasonable minimum interval.

Submission confirmation

A brief acknowledgement that the feedback was received before returning the user to their previous context.

Tip: A one-line thank you that disappears after two seconds is enough. What matters is that the user knows it landed — without confirmation, some will submit again assuming the first attempt failed.

The touch-based interaction patterns that let users navigate and act without tapping buttons.

Source: https://www.checklist.design/mobile/gesture-navigation

Swipe to go back

The standard action to allow a user to go back without tapping a button

Tip: This can be disabled on screens where a horizontal swipe exists to not be a conflict

List item swipe actions

Revealing quick actions such as delete, archive, mark as read on an item without opening it

Tip: Suitable only if there are 2-3 actions available on the item, any more may be too significant space was

Pull to refresh

For scrollable content lists with a visible indicator and haptic confirmation when triggered

Long press menus

Triggered by long pressing, an item reveals actions relevant to that specific element

Tip: These are utilised for quick actions, and the action should exist elsewhere in a more accessible way in the app

Pinch to zoom

Image and map content supporting standard pinch-to-zoom, with zoom level reset logically on navigation away

Drag to reorder

Lists or cards that can be reordered supporting long-press-to-lift and drag, with clear visual feedback during the drag state

Gesture hints

A subtle animation or tooltip on first encounter with a key gesture, hinting at its existence

Tip: If it's a significant value to learn the gesture, the hint could persist until the user tries the action, so they understand it better

Haptic feedback

Beneficial for key gesture moments where your finger may cover the screen and therefore it's not clear whether you have engaged with the gesture e.g. the pull-to-refresh, long press or drag actions

A browser experience inside a mobile app, which is handy for opening web links or accessing web data via API.

Source: https://www.checklist.design/mobile/in-app-browser

URL bar visibility

The URL of the current page visible to the user, confirming the domain before they interact with any forms or enter credentials

Tip: Users who cannot see the URL in an in-app browser cannot verify they are on a legitimate domain, since URL visibility is a security baseline

Close action

A clear, persistent button for closing the browser and returning to the app (typically in a fixed toolbar rather than hidden behind a gesture)

Open in external default browser action

An option to open the URL in the user's default browser, while preserving the in-app browser experience still

Share action

Allowing the URL to be shared without opening the default browser

Loading feedback

A progress indicator while the page loads (either a top progress bar or an activity indicator) so the user knows the browser is working

The in-app feed of alerts, updates, and messages the user has received — distinct from system push notifications.

Source: https://www.checklist.design/mobile/in-app-notifications

Reverse chronological order

Newest notifications at the top means users don’t have to scroll for the latest

Unread indicators

Unread notifications visually distinct from read ones e.g. a dot, bolder text, or a background colour difference

Mark all as read

A single action to clear all unread indicators at once

_Tip: Essential for an app with many notifications, or where there is likelihood the user spends a long time away _

Notification grouping

Related notifications grouped together e.g. multiple comments on the same post shown as a single expandable item, not separate rows

Tip: Best applied to high-activity content

Swipe to dismiss action

Individual notifications dismissible by swiping left, revealing a delete action

Deep link on tap

Tapping a notification navigates the user directly to the relevant content

Empty state

For when there are no notifications, to indicate they haven’t received any… yet

Settings shortcut

A direct link from the notifications screen to notification preferences, for users who want to adjust what they receive

Notification content

Information relevant to triggering the notification e.g. the change, author and time it occurred

The flow for adding collaborators or members to a shared space with role assignment and pending invite management.

Source: https://www.checklist.design/mobile/invite

Email invite

The primary method of inviting someone by entering their email address directly

Role or permission selection

A control for setting what the invited person will be able to see and do once they accept

Tip: Show what each role can and cannot do before the invite is sent, since this prevents over-permissioning and the back-and-forth of revoking access later. Keep roles to three or fewer where possible

Contact picker

Access to the device's contacts list for finding people to invite without typing a full address

Tip: On iOS this requires explicit permission. Prime the user with a custom screen before the system prompt, since 'Find people you already know' performs better than asking cold

Bulk invite

A way to add multiple people at once, by entering several addresses or pasting a list

Tip: Support comma-separated and line-break-separated input, since users are likely to paste from spreadsheets or threads

Pending invites + actions

A list of sent invitations that have not yet been accepted, with the option to resend or revoke each one

Tip: Show when each invite was sent and when it expires for context on most recent invite sent

Shareable invite link

A link that grants access to anyone who opens it, with a configurable permission level

Tip: Include an expiry option and a usage limit on the link for security

Seat or member limit

A visible count of remaining available seats, surfaced before the user reaches the plan's member cap

Access scope summary

A clear statement of what the invited person will be able to see and do, shown to the sender before confirming

Everything a returning user needs to authenticate quickly and securely.

Source: https://www.checklist.design/mobile/login

Social sign-in

Sign-in options that connect to an existing Apple or Google account, bypassing manual credential entry.

Tip: On iOS, Apple Sign In is required by App Store guidelines if any other social provider is offered.

Email field

The input where users enter the email address associated with their account.

Password field

A masked text input for the account password, with the option to reveal what has been typed.

Biometric authentication

Face ID or fingerprint sign-in for returning users who have already authenticated once with a password

Tip: Encouraged to suggest after initial login so it’s a faster experience in the future

Credential autofill

System-level support for pre-filling saved email and password from the user's password manager.

Tip: textContentType on iOS and autoComplete on Android are the attributes that trigger native autofill.

Forgot password link

The link users reach for when they can't recall their password, leading into the reset flow.

Error states

Feedback shown when authentication fails, distinguishing between an unrecognised email address and an incorrect password.

Tip: Generic 'incorrect credentials' gives users no useful signal — knowing whether the email or password is wrong helps them recover without guessing.

Passwordless sign-in (magic link)

An alternative sign-in method that sends a one-time link to the user's email, requiring no password

Tip: Useful for infrequent-use apps where remembering a password between sessions is difficult

The native map screen showing location-based content, user position, and contextual overlays

Source: https://www.checklist.design/mobile/map-view

Pin and marker designs

Custom markers clearly distinguishable from each other and from the base map, sized for reliable tap accuracy on mobile

Tip: Ensure the marker design for current location is the most prominent, as all map view interactions are centred around it

Marker clustering (if applicable)

How markers are shown when a group of them are so close together they cannot be shown individually, and must be grouped

Native map components

Leverage either MapKit for iOS or Google Maps for Android to utilise existing foundations and layout that is time consuming to create from scratch

Location permission

The point in the flow at which location permission is requested, with context explaining the level of access needed and why

Tip: Consider the UI if permissions are denied, where you can provide instructions on how to change the permission in settings

Current location re-centre

A clearly visible button to re-centre the map to the user's current position without zooming or scrolling to it

Selected item bottom sheet

Tapping a marker expanding a bottom sheet with details about that location — not a full-screen navigation away from the map.

Search or filter actions

Search or filter controls accessible as a persistent overlay on the map or as a separate screen

Tip: Selecting filters can be on a separate screen, but when on map the applied filters should be visible for context

Offline handling

When offline, cached map tiles displayed where available, with a clear indicator that the map may not be current

The first-run experience that orients a new user, collects necessary setup information, and delivers an early sense of the app value

Source: https://www.checklist.design/mobile/onboarding

Steps

The number of steps in the onboarding flow, limited to what is genuinely required before the app can be used

Tip: Steps that can be deferred without preventing the app from functioning on day one consistently belong later, not in onboarding

Progress indicator

A clear indication of how many steps remain and where in the sequence the user currently is

Tip: Users who can see the end of onboarding are significantly less likely to abandon it than those who feel they are in a tunnel

Step navigation

A clear mechanism for advancing through steps e.g. a 'next' button or a horizontal swipe gesture

Contextual permissions

Permissions surfaced at their contextually relevant moment within onboarding, rather than grouped at the start

Tip: Grouping all permission requests at the beginning can lead to denials given lack of context

Skip option

A visible way to exit onboarding early and explore the app, with setup available to complete later

Tip: Users who skip and explore freely often complete setup voluntarily once they understand the value

Personalisation step

One or two choices that make the app feel tailored from the start e.g. your name, interests, a key piece of information that applies to the product

Keyboard handling

Views that adjust correctly when the keyboard appears, appropriate keyboard types per field, and Next advancing to the following input

The in-app progress checklist that guides a new user through key setup steps to learn how the product works by completing actions.

Source: https://www.checklist.design/mobile/onboarding-checklist

Card or sheet presentation

The checklist presented as a dismissible bottom sheet or a persistent card on the home screen, not a full-screen overlay

Task count and progress

A visible count of completed versus total tasks and a progress bar or ring that updates as steps are completed

Tap to start each task

Each checklist item tappable, navigating directly to the relevant screen or feature not just informational

Completion celebration

When all tasks are complete, show a brief celebratory moment before the checklist disappears (animation, confetti, congratulatory message)

Dismissible action

The checklist is dismissible for users who do not want it not a forced guided path.

Tip: Making the checklist dismissible is fair because sometimes users don't want or need guidance

Persistent but unobtrusive

The checklist is accessible from a consistent location (dashboard, profile, home)

Personalised to user type (if applicable)

If there are different user types or ways to use the app, include onboarding questions that direct to tailored steps in this checklist so it feels more personal

A hard gate that blocks access to locked content and offers a path to subscribe.

Source: https://www.checklist.design/mobile/paywall

Locked feature context and breakdown

A clear statement or short list of which specific feature/s the user is being blocked from accessing

Upgrade CTA

The primary action to start a subscription or free trial, positioned prominently on the paywall screen

Tip: Be specific with what is unlocked e.g. "Unlock unlimited projects" or "Access full library"

Free trial offer

A clear statement of any trial period available before subscription billing begins.

Tip: 'Try free for 7 days' framed as low-commitment is consistently one of the highest-converting messages on a paywall.

Dismiss action

A clear, neutral way to close the paywall and return to the free experience

Tip: This should be obvious and accessible for the user to do

Restore purchases

A way for existing subscribers to recover their access after reinstalling or signing in on a new device

No guilt language

Dismiss and decline actions written in neutral language, without shaming or pressuring users into subscribing

Tip: 'No thanks, I don't want to save money' is manipulative and unnecessary

Not the account, but the public-facing identity of a user that others see when they look them up.

Source: https://www.checklist.design/mobile/profile

Profile photo

An option to set an avatar image, either from the camera roll or by taking a new photo

Tip: Offering both options and including a crop step covers the common case where camera photos aren't framed for a circular avatar

Display name and/or username

The name shown publicly and the handle used to identify the account in @mentions or search

Tip: If both are editable, make clear which is visible to others and which is used as an identifier

Bio

A short text field where users can describe themselves or their work

Tip: Showing a character limit counter as the user approaches it prevents the hard cutoff from feeling unexpected

Public fields only

The screen contains only information visible to other users, private account settings are kept on a separate screen

Profile preview

A read-only view of how the profile will appear to other users, available before saving.

External links (if relevant)

Optional fields for linking to a website, portfolio, or other social accounts

The custom screen shown before the system notification prompt to persuade a user to accept push notifications before they see the binary system dialog.

Source: https://www.checklist.design/mobile/push-notification-opt-in

Value proposition

A specific explanation of what the notifications will contain and why they are worth receiving

Notification preview

A realistic visual mock of what a notification from this app looks like (title, body, and app icon)

Tip: A genuine-looking sample (rather than a generic illustration) significantly helps

Opt-in timing

The point in the flow at which the opt-in is presented, after the user has experienced enough value to understand what they'd be opting into

Tip: Presenting a push opt-in before the user has completed any meaningful action is the fastest way to get a denial

Decline path

A clear dismiss option that does not penalise the user or block progress

Re-engagement path

For users who decline, a way to revisit the opt-in later (typically surfaced in settings)

One screen, one ask

A single, focused screen making one case for one permission

The flow through which users earn rewards for introducing new members to the app.

Source: https://www.checklist.design/mobile/referral

Unique referral link or code

A personalised URL or code that tracks sign-ups back to the referring user that can be copied in one tap

Reward explanation

A clear statement of what the referring user earns and what the new user receives, shown before the user decides whether to share

Tip: Showing both sides ('Give a friend one month free, get one month free yourself') is useful

Share sheet integration

A button that opens the native share sheet pre-loaded with the referral link and a suggested message

Tip: Pre-fill the message with something that helps the narrative, rather than just a standalone link

Channel shortcuts

Direct share paths for high-performing channels (messaging, email) alongside the generic share sheet

Referral status list

A view showing who the user has referred, whether each person has signed up, and whether the reward condition has been met

Reward progress

A clear display of pending and confirmed rewards, and for tiered programmes, progress toward the next milestone

Terms and eligibility

A concise summary of the conditions under which a referral counts and a reward is earned

Tip: Surface the key conditions inline e.g.who qualifies, any limit on total rewards

Empty state

The state of the referral screen before the user has made any referrals, with a clear prompt to begin sharing

The search experience on mobile where keyboard handling and filtering results are unique to web.

Source: https://www.checklist.design/mobile/search

Sticky search bar

The search input fixed at the top of the screen as results scroll beneath it

Tip: A search bar that scrolls away with results forces users to scroll back up if they need to refine their query

Keyboard auto-focus

The keyboard opens immediately when the user navigates to the search screen — no extra tap required to start typing

Live results

Results updating as the user types rather than requiring a submit tap

Recent searches

Previously searched terms shown before the user starts typing for convenience to revisit results

Filter bottom sheet

Filtering accessed via a bottom sheet rather than a separate screen, to keep the search context visible while adjusting

Tip: A full-screen filter page can be better if the filtering is extensive e.g. a retail store or booking system

Skeleton loading

Skeleton cards in the expected result shape shown while results load as user types

No results state

A helpful empty state with suggestions e.g. suggestion to check spelling, remove filters or try related terms

Clear query button

An action inside or near the search field to clear the current query with one tap

The screen where users manage their account, preferences, notifications, and app behaviour.

Source: https://www.checklist.design/mobile/settings

Grouped table layout

Settings organised into clearly labelled sections (Account, Notifications, Privacy, Support) using the native grouped list pattern

Tip: Grouped settings are a platform convention users have deeply internalised. Deviating from it forces users to relearn navigation they already know

Native toggle controls

Binary settings presented with the platform-native toggle switch (UISwitch on iOS, Material Switch on Android)

Tip: Custom toggles that look slightly off from the native ones create subtle distrust, since the difference is small but users notice it

Destructive actions grouped

Log out, delete account, and other irreversible actions in their own section at the bottom, visually distinguished in red

Account details at top

The user's avatar, name, and email shown prominently at the top of settings, a clear anchor for whose account is being managed

Deep link to specific settings

A direct link from relevant in-app prompts to the specific settings screen they reference — notification preferences, privacy, and so on.

Tip: Telling users where to find a setting is far less effective than linking them there directly.

Support and feedback access

A clear path to contact support, submit feedback, or access help documentation, accessible from within settings.

App version

The current app version shown at the bottom of settings — essential for support conversations and identifying build-specific issues.

Legal links

Links to the Privacy Policy and Terms of Service accessible within settings, as required by app stores.

A low-friction registration flow that collects only what is needed and sets a positive first impression.

Source: https://www.checklist.design/mobile/sign-up

Third party sign-up

Account creation through an existing Apple, Google or social media account, removing the need to set a password

Required fields

The minimum information needed to create an account (typically email and password, if not social auth)

Tip: Every additional field reduces completion rate

Password strength

Visual feedback showing how secure the chosen password is as the user types

Tip: Showing requirements inline (not only on a submission error) allows users to meet them before submitting

Terms and privacy

The acknowledgement that the user accepts the terms of service and privacy policy before creating an account

Email verification

The step asking users to confirm their email address after the account has been created

Tip: It's common to allow the user access to the product before confirming, so they are not blocked and drop off

Welcome state

The screen shown immediately after account creation, confirming success and pointing toward the first action

Already have an account

A link for returning users who arrived at the sign-up screen instead of login

Marketing opt-in (if applicable)

A separate, explicit consent field for users willing to receive marketing emails

The first screen a user sees when launching the mobile app and it initialises before transitioning to the home screen.

Source: https://www.checklist.design/mobile/splash-screen

Logo or wordmark

The app brand mark centred on a clean background

Brand background

A solid or subtly branded background that makes the transition from the mobile home screen clear

Launch duration

The splash visible only for as long as the app genuinely needs to initialise (not used as decorative padding)

Transition to first screen

A smooth, intentional animation into the first real screen, ideally not a hard cut or jarring flash

No interactive elements

The splash screen contains no buttons, inputs, or tappable areas, it is purely for transition

Loading indicator

For any initialisation taking more than a second so the user knows something is happening

Tip: This could be your logo, wordmark or illustration you use as the key visual in a looping animation

The persistent bottom navigation bar that gives users access to the top-level sections of the app

Source: https://www.checklist.design/mobile/tab-bar-navigation

Tab count

Limited to the most important destinations — 3 to 5 items is the typical range

Tip: More than 5 sections dilutes each option and may not fit

Icon and label

Each tab paired with both an icon and a text label

Tip: Labels may not be necessary but only if icons are explicitly clear at what lies within that section

Active and default states

Active should be visually distinct whether it's colour, border or icon weight

Badge counts

Useful for tabs with unread counts like messages and notifications, updating in real time

Tip: Instead of a number, a dot is suitable if numbers feels less relevant

Fixed presence

For the sections the tab bar applies to, tab bar should remain visible, and can be hidden on any page a level deeper

Tap target size

Each tab at least 44×44pt to be reliably tappable with a thumb in any grip position

Haptic feedback

A subtle tap haptic on tab selection confirming the action

A soft upsell screen that presents the value of upgrading to users who are open to it.

Source: https://www.checklist.design/mobile/upgrade

Value proposition

The headline reason to upgrade, presented before the user scrolls, focused on outcome rather than a feature list

Tip: 'Design faster' is more compelling than 'Access 200+ templates', since outcomes convert better than feature counts

Features unlocked

A concise list of what becomes available with the paid tier, prioritised by relevance to the user's current context

In-app purchase options

Subscription tiers presented using the platform's native purchase sheet where possible

Tip: StoreKit on iOS and Google Play Billing on Android provide the familiar payment UI that users already trust

Annual plan savings

Monthly and annual pricing shown together, with the saving on the annual plan made prominent

Tip: Showing the monthly equivalent alongside a 'Save 40%' callout converts better than displaying the annual total alone

Social proof

Ratings, review counts, or short testimonials that validate the purchase decision.

Free trial call-out

A clear indication that a trial period is available, with no commitment required to start.

Tip: Making the trial the primary CTA reduces friction — conversion from trial to paid is typically high.

Transparent pricing

The full price and billing cadence shown before the payment sheet, matching what was displayed earlier in the flow.

Tip: Users who encounter a higher price at checkout feel deceived — it's a leading cause of refund requests.

A 404 page appears when users attempt to access a non-existent or moved webpage. It communicates the error in a friendly way and helps users navigate back to working pages through suggested links, search functionality, or a return to homepage option.

Source: https://www.checklist.design/website/404

Logo

Either your complete logo or a symbol mark

Title

Make it clear the user is on the 404 page

Description

Explain why the user has landed on this page

Links to other pages

Offer pathways to stick around

Tip: Include a link to visit the homepage Include a link that allows user to contact Include a search bar to allow user to look for something

Illustrations, patterns, visual flair

This page is a great opportunity to show off your brand's personality

A page that tells the story of the company — who built it, why, and what they believe.

Source: https://www.checklist.design/website/about

Origin story

A genuine account of why the company was founded and the problem it set out to solve

Mission or values

What the company stands for and how it makes decisions, stated plainly

Team

The people behind the product (names, roles, and faces) making the company feel human

Milestones or traction

Key moments in the company's history (founding year, customer count, notable launches) that establish credibility

Investors or backers

Logos or names of investors, accelerators, or notable backers, where relevant

CTA

A clear next step e.g. view open roles, read the blog, or try the product

A page that invites potential affiliates or partners to join a programme, explaining how it works and what they stand to earn.

Source: https://www.checklist.design/website/affiliate

Programme overview

A clear explanation of what the affiliate or partner programme involves and who it is designed for

Commission or reward structure

Exactly what affiliates earn (percentage, flat fee, recurring commission) stated plainly

Tip: Ambiguous commission structures are the most common reason potential affiliates leave this page without applying

How it works

A simple step-by-step breakdown of joining, sharing, and earning

Tip: If using a third party to connect, it's helpful to include screenshots for steps

Resources provided

What materials the company provides (links, banners, copy, tracking) to help affiliates succeed

Social proof

Testimonials or earnings examples from existing affiliates who are benefiting from the programme

Application or signup CTA

A clear form or button to join the programme

A screen where users manage information regarding payment, subscription and billing.

Source: https://www.checklist.design/website/billing

Payment method/s used

Display payment method details with ability to update or remove. A subscription service may want to prevent all methods being removed as it will become an issue later.

History

A list of past charges with the ability to download invoices

Tip: Downloadable invoice format should be PDF to be easily shared in other reporting tools

Plan details

Details of current plan includes price, features and next billing date

Tip: Have a clear action to upgrade or change plan in this area

Promo or discount code

A field to apply a code to activate a discount or deal

Additional details

Information that influences billing or plan decision making e.g. seats, roles, usage, metrics

Next payment

If subscription, show details of upcoming payment including amount, date and method

Cancel subscription

A clear action to cancel and stop payments

A blog page aggregates and displays multiple articles or posts in a chronological order, typically showing previews, titles, publication dates, and categories. It provides easy navigation through pagination or infinite scroll, allowing users to browse and discover content.

Source: https://www.checklist.design/website/blog

Hero

A clear indicator it's a blog, whether it's for an individual, team or company

Navigation

A logo, links to visit, a CTA, and potentially a search function

Tip: Utilise navigational links to show sub topics

Layout

How sections and blog posts are structured

Tip: Consider what's above the fold on mobile, tablet and desktop Consider blog article order (newest first, trending) A grid layout with multiple posts on a row has more density

Blog post preview

The visuals and text of a blog post

Tip: Typography hierarchy is important here - a user must clearly see the heading first A branded thumbnail sets the mood of the content If you include a description, it should be economical in clearly explaining the blog post

Description

Summarise what's covered in the blog — shown in the hero

Tags and/or categories

A topic that can be attached to a blog post for convenient filtering

Search function

Have lots of posts? Search makes it easier for the user to find the content they desire

Opt-in for subscription

A signup form for users to complete to make them a subscriber of the blog's content

Sidebar

This can contain additional links and resources that support the blog posts e.g. search function, popular posts, trending topics

Pagination

Break up your content into pages after 10-20 items (there are pros and cons on both sides of the pagination vs infinite scroll argument, so go with what suits your product better!)

A blog post page displays a single article's content, including its title, author, publication date, and body text. It often includes related media (images, videos), social sharing options, and commenting functionality, allowing readers to engage with the content and navigate to other posts.

Source: https://www.checklist.design/website/blog-post

Title

Copy that educates the user on what to expect to read, typically phrased in an eye-catching or interesting manner

Sub heading

Elaborating on the title, defining the purpose of the post

Thumbnail

A visual aid to illustrate the themes of the content

Tip: Thumbnail style should draw from branding and style guide

Author

Who wrote and contributed to the post

Tip: Make an author's profile selectable to let users follow their favourite writers in the blog

Content

The actual blog post itself

Tip: Consider responsiveness and how content is represented on smaller devices

Social sharing tools

Ability to share or send the post to other people

Tip: Positioning this element in a fixed position on the page allows the opportunity for the user to share the post at any point

Lead conversion content

Introducing relevant information about your product that ties in with the post

Related articles

Suggested posts relevant to the current post

Opt-in for subscription

A signup form for users to join which will subscribe them to a platform that lets you notify them of new posts

Date posted

When the post was shared live

Tags

A specific category for users to explore as a topic

Comments

A section for discussion that users can join and contribute to

A careers page typically displays job openings, company culture, and employment opportunities. It allows potential candidates to explore available positions, learn about the organization's values, and typically includes functionality to submit job applications or contact recruiters.

Source: https://www.checklist.design/website/careers

Company story

Share how the business started off and the journey it has experienced

Tip: Don't just share the what, but the why and motivations behind the foundation

Up to date information

Ensure all the content is up to date, especially quantitative values e.g. team headcount, offices open, time operating

Employee benefits

Perks and value props for potential employees

Tip: Ensure the benefits show real, tangible value and aren't gimmicks

Teams and divisions

Either a breakdown of the team members or what areas you currently have

Tip: Determine the amount of information based on the team size - a bio and links can be featured for a team of 10, but may not work for a team of 200+

Job openings

A listing of all roles currently available to apply for

Tip: Break up the roles by department for easier scanning

Working locations

Showcase where your offices are, and if you offer remote work

Employee testimonials

Feature stories from current employees that share why they love working at the company and what someone can expect

Source: https://www.checklist.design/website/cart

Item name and image

Each item shown with its name and image, matching what was displayed on the product page.

Update or remove item

The ability to adjust quantity, change variants, or remove an item directly from the cart.

Item variations

Selected variants for each item — size, colour, style, or type — displayed clearly alongside the item.

Tip: A mismatch between what the user selected and what appears in the cart is a common source of disputes — the variant should always be clearly visible.

Promo or discount code

A text field for entering a promo, discount, or coupon code.

Tip: Showing whether the code was accepted or rejected immediately after entry removes any ambiguity.

Accepted payment methods

The payment methods available for completing the purchase — cards, PayPal, Apple Pay, and others.

Tip: Displaying recognised payment method logos increases trust at the most anxious point of the purchase flow.

Link to support

A way to get help with items in the cart — particularly useful for products with configurable options or custom orders.

Checkout button

A prominent button to proceed to payment when the user is ready to complete their order.

Suggested add-ons

Related or complementary items suggested based on what is already in the cart.

A placeholder page shown before a product or feature launches, designed to capture interest and build an early audience.

Source: https://www.checklist.design/website/coming-soon

What is coming

A clear description of what is being built, enough to generate genuine interest without overpromising

Tip: The most effective coming soon pages give a product direction, specific enough to be compelling, vague enough not to overpromise

Email capture

A simple signup form to collect email addresses from interested visitors before launch

Tip: A tangible incentive for signing up (early access, a discount, or exclusive updates) consistently outperforms a bare email field in conversion

Launch date or timeline

An indication of when the product will be available, even if it is approximate

Tip: When the exact date is uncertain, a quarter or season is still more useful than no timeline at all, since even approximate dates create anticipation

Social links

Links to social profiles where visitors can follow progress and updates

Brand presence

A page that is visually on brand even before the product exists

A page that positions the product directly against a specific competitor, helping prospects who are evaluating alternatives to make a decision.

Source: https://www.checklist.design/website/compare-page

Clear positioning statement

An opening that states plainly how this product differs from the competitor being compared

Tip: A compare page that claims superiority on every dimension reads as untrustworthy so include honest acknowledgement of trade-offs for more credibility

Feature comparison table

A side-by-side table of key features showing what each product includes, with clear tick and cross indicators

_Tip: This table focused on decision-relevant features

This table doesn't have to mention every single feature, just the most persuasive and relevant to influencing decision_

Key differentiators

A section expanding on the areas where this product genuinely excels beyond a table comparison

Social proof

Testimonials or quotes from customers who switched from the competitor being compared

Pricing comparison

A clear, fair comparison of pricing structures if the difference is a meaningful factor for prospects

Tip: Pricing comparisons only work best if there's a genuine advantage e.g. cheaper or more value for money spent

CTA

A direct prompt to try the product or book a demo

A contact us page provides visitors with methods to communicate with an organization. It typically includes a contact form, business address, phone numbers, email addresses, and sometimes a location.

Source: https://www.checklist.design/website/contact-us

Personality and branding

Visual character and tone of voice that align with your brand

Tip: Colloquial copy helps you appears more accessible to users

Clear methods to contact

Phone number, email or a form to fill in for examples

Social media accounts

User may feel more comfortable contacting via a social platform

Segmenting contact methods

If you have different contacts for support and sales, showcase that! It shows you have specific support for their issue

Easy location to get to

Make this page available in your header or footer

A page promoting a specific event — a conference, webinar, workshop, or meetup — and driving registrations.

Source: https://www.checklist.design/website/event-page

Event name and date

The name of the event and when it is happening, shown prominently at the top of the page

Tip: Include the timezone explicitly for online events

Event description

What the event is, who it is for, and what attendees will get from it

Speakers, presenters or hosts

Names, photos, and brief bios of the people presenting or facilitating

Tip: Speaker credibility is often the deciding factor for whether someone registers. It tends to be the most-read section of an event page

Agenda or schedule

A session-by-session or time-slot breakdown of what will happen during the event

Registration CTA

A clear form or button to register, with pricing if applicable

Tip: Flagging ticket availability close to CTA helps communicate scarcity

Location or platform details

For in-person events, the venue address and travel information. For online events, the platform being used

A FAQ (frequently asked questions) page provides answers to common user queries in a structured, easy-to-scan format. It serves as a self-service resource to address typical customer concerns, reduce support inquiries, and help users find solutions quickly.

Source: https://www.checklist.design/website/faq

Purposeful information

Ensure the questions and answers shown are providing value to the users to make decisions about your product

Contact options

If a user doesn't have their problem solved or question answered, offer a method for them to directly contact you

Tip: Order your contact options by accessibility - your first option should be the easiest for the user, following in an ascending order of level of effort

Table of contents

If you have a large amount of questions, structure your topics so users can navigate between areas easier

Search functionality

Keyword search for users to look up their questions

Navigate by topic

Segment your questions into general topics to structure your content and enable an easier search for users

A page that walks through the full capabilities of the product, helping prospects understand what it does in depth.

Source: https://www.checklist.design/website/features

Feature grouping

Capabilities organised into logical themes or categories so the page is scannable and not a wall of bullet points

Tip: Features grouped by the job they help the user accomplish are easier to scan than those organised by how the product is built internally

Feature descriptions

Each feature explained in one or two sentences from the user's perspective, what they can do, not what the system does

Feature visuals

Screenshots, GIFs, or short video clips showing each feature in action

Tip: For complex interactions, animated GIFs showing a feature in use can provide better storytelling and value than static screenshots

Benefits framing

Each feature connected explicitly to an outcome and/or benefit, not just the capability

Social proof per feature

A relevant customer quote placed alongside the feature it relates to, making the case more concrete.

CTA

A conversion point at the bottom and optionally inline throughout, for visitors who are convinced mid-page

A footer is a persistent section at the bottom of a page that provides consistent access to secondary navigation, legal information and contact details to avoid cluttering the main content area.

Source: https://www.checklist.design/website/footer

Size and responsiveness

Define footer width (full or contained)

Style

Colours, font sizes, visual brand elements

Tip: Making the footer notably contrast the body content helps users understand they’ve reached the footer

Content links

Visuals, states and destinations of all links

Legal and compliance links

Pages like privacy policy, terms and other legal content are typically located here

Logo or name of business

For brand consistency and as a link back to homepage

Tip: You can also include a tagline or brief description to reinforce the core purpose

Hierarchy and layout

Footers should be balanced between logo, links and additional actions

Tip: Group links into meaningful categories but only when there's a considerable amount and organisation would help

Social media

Logos and/or links to social media platforms you are active on

Mobile app download actions (if applicable)

If product is a mobile app, including links to download at Apple or Google stores

Regulatory and trust certifications

Badges or logos that show certification of a certain security or trust measure that has been enforced

Back to top button

If your content is exceptionally long and you think the user is likely to want to return

Contact methods

An email, phone number or form to complete for support

Partner logos

A suitable place for partners to be shared so they are easily visible on every page

Accepted payment methods (if applicable)

Relevant for any e-commerce experience

A standalone page designed to convert a specific audience, typically reached via an ad, email, or campaign link.

Source: https://www.checklist.design/website/landing-page

Headline

A single, clear statement of what the product does or the value it delivers

Tip: The most effective headlines are written for a skeptic, assuming the visitor knows nothing and has three seconds to decide

Subheadline

A supporting line that adds context or specificity to the headline claim

Hero visual

An image, illustration, or product screenshot that reinforces the headline and makes the page feel tangible

Tip: A product screenshot or demo video consistently outperforms abstract illustration for conversion-focused landing pages

Primary CTA

One clear action for the visitor to take (sign up, start a trial, book a demo)

Tip: Multiple CTAs on a single landing page split attention and consistently lower conversion, since one primary action is the norm on high-performing pages

Social proof

Customer logos, testimonials, review scores, or user counts that validate the claim.

Tip: Social proof placed immediately below the fold catches skeptical visitors at exactly the point they start questioning the headline claim.

Key benefits

A concise breakdown of the main reasons a visitor should care, focused on outcomes not features.

Objection handling

Content that addresses the most common reasons a visitor would not convert e.g. price, complexity, commitment

Tip: FAQs on a landing page are the most effective format to tackling these areas

Repeated CTA

The primary CTA repeated at the bottom of the page for visitors who scroll all the way through

A login page is a critical component of many web applications and websites, serving as the gateway for users to access personalized features, secure content, and their own data.

Source: https://www.checklist.design/website/login

Logo

Either your complete logo or a symbol mark

Title

Tell the user this is where they login

Account identification

A unique identifier for the user

Tip: Consider multiple identifiers to login with e.g. username, or email address, or phone number

Password

A secure, private code that allows access to their account

Tip: Create the ability to make the password visible

Link to reset password

A user may forget their unique code - let them change it!

Tip: Position this link close to your password input field

Link to sign up

A user may not have an account and landed on this page anyway

Login via third party

Turn text fields into one click by allowing users to connect via a third party e.g. Google, Apple, Facebook, Twitter

Testimonial

Reinforcing the brand and product never goes out of style

Blog post

An opportunity to show off content relevant to the user

New feature

The perfect way to build excitement for something new right before a user is about to log in and see it!

A page providing journalists, analysts, and content creators with the resources they need to cover the company accurately.

Source: https://www.checklist.design/website/press-media

Company overview

A concise, factual description of the company, what it does, when it was founded, and who it serves

Tip: A press overview written as a ready-to-use paragraph saves journalists time. The easier it is to lift and paste, the more often it gets used

Press coverage

A curated list of notable media mentions with publication name, headline, and link

Tip: Logos of well-known publications displayed visually signal credibility faster than a text list

Press contact

A dedicated email address for media enquiries so journalists know exactly where to reach the right person or team

Brand assets

Downloadable logos, product screenshots, and founder headshots in multiple formats

Tip: Light and dark logo versions are both routinely needed by journalists, since a press kit without both creates unnecessary back-and-forth

Key statistics

Notable numbers that journalists can use to characterise the company e.g. customers, revenue milestones, countries, team size

Recent press releases

Archived official announcements for journalists researching the company's history

A pricing page presents product or service costs, features, and plan comparisons in a clear, organized format. It helps users understand different pricing tiers, included features, and subscription options, enabling them to make informed purchasing decisions.

Source: https://www.checklist.design/website/pricing

Pricing options

Subscriptions plans or one-off purchase

Pricing features

What the user will get for purchasing the product

A free pathway to sign up

A way for user to try your product before considering purchase

Tip: Clearly state the length of the trial period before being charged

Refund or return policy

A user may want to understand this further

Highlighted price as a recommendation

Showcase a price that most users purchase, or they will get the best value from

Security logo for payment processing

Show how you process purchases with a credible vendor for legibility

Frequency of payments (monthly vs yearly)

You may offer an annual option for long term customers that are rewarded with a discount

Page covering the legal terms of using the product (privacy policy, terms of service, and cookie policy) written clearly and kept current.

Source: https://www.checklist.design/website/legal-privacy

Privacy policy

A clear document explaining what data is collected, how it is used, how long it is kept, and how users can request deletion

Tip: A plain-language summary at the top is an option, to allow most users understand the policy without diving into deeper details unless necessary

Terms of service

The agreement governing use of the product (user responsibilities, acceptable use, limitation of liability)

Cookie policy

A clear explanation of which cookies are used, what they do, and how users can control them

Tip: Cookie policies separated from the privacy policy are increasingly what users search for, since they serve different functions and are regulated differently in most jurisdictions

Last updated date

A clear timestamp on every legal document so users know if they are reading the current version

Version history or changelog

For products with engaged users, a log of what changed between policy versions — builds trust and reduces enquiries.

Tip: A summary of changes in plain English at the top of an updated policy is far more reassuring than just changing the date.

Contact for legal queries

A dedicated email or address for data, privacy, or legal enquiries as required by most regulations.

A search results page displays organized findings based on a user's search query. It presents relevant matches in a scannable view to help users quickly find and navigate to their desired destination.

Source: https://www.checklist.design/website/search

Search box

The element a user types in to make a search

Tip: A search box should be at the top of the page, styled consistently with other search boxes across your website or product Include a button to click to process search Placeholder text can nudge the user to make a relevant search

Visualisation of results

Showing the items relevant to the search

Tip: Give as much detail as you can to contextualize the results e.g. show the title of the page, a description and potentially a thumbnail Show the number of results Include pagination for long list of results (more than 50) If there are no results, point the user towards making another search or another pathway

Search progress

A search may not be instant, so consider a loading indicator as the product makes the enquiry

Suggested search items

Offer a search query to save the user from typing e.g. currently trending, most popular, recently search, autocorrection

Categories and/or filters

Constraints to help users narrow down their search area

Ordering of search results

How a user can sort results e.g. best price, most relevant, newest first

Highlighting keywords

Highlight the words in the search enquiry within the results displayed

Source: https://www.checklist.design/website/security

Certifications and compliance

Logos and names of security certifications held e.g. SOC 2, ISO 27001, GDPR, HIPAA

Tip: Certification logos should be paired with an explanation of what they cover

Data encryption

A plain-language explanation of how data is encrypted at rest and in transit

Data residency

Where customer data is stored and processed, with any regional options available

Access controls

Who within the company can access customer data, under what conditions, and what controls are in place to limit that access

Vulnerability disclosure

How security issues are reported and handled e.g. a dedicated email address, a bug bounty programme, or a responsible disclosure policy

Incident history

A record of past security incidents that were disclosed, with dates and resolution summaries for transparency

Penetration testing

Details of third-party security audits or penetration tests, with the most recent date and ability to request a report for further details

A sign up page enables new users to create an account by providing required information through a form. It guides users through the registration process, validates input data, and establishes their credentials for accessing restricted features or personalized content.

Source: https://www.checklist.design/website/sign-up

Logo

Either your complete logo or a symbol mark

Title

Tell the user this is where they create an account

Description

Describe the basic features of creating an account and set their expectations as to what they can achieve

Account identification

A unique identifier for the user to log in with

Tip: An email address is the most commonly used, as you are also gaining a method to communicate with them beyond whatever they do next

Setting a password

A secure, private code that allows them to access their account in the future

Tip: Include a password strength indicator Include password requirements (length, special characters) Create the ability to make the password visible

Link to login

A user may already have an account and landed on this page anyway

Sign up via third party

Reduce a few clicks to one, by allowing users to sign up via Facebook or Google

Current active customer count

Showcasing how many people are using and enjoying your product can evoke a fear of missing out for potential users

Testimonial or social proof

Reinforcing the brand and product never goes out of style

Blog post

An opportunity to show off some amazing content to convert an unsure lead

Billing plans and trial period (if payment is involved)

Clearly define the length of the trial period and when they will be charged

Source: https://www.checklist.design/website/status

Component status list

Each major service or component (API, dashboard, integrations, notifications) shown with its current operational state

Tip: A single 'All systems operational' row on its own is less useful than per-component status, since users experiencing an issue with one part of the product need to know if it is on their end or yours

Live incident updates

During an active incident, timestamped updates posted in sequence (identifying the issue, confirming investigation, and reporting resolution)

Tip: The cadence of updates matters more than their length — a brief 'investigating' post every 30 minutes is far more reassuring than silence followed by an explanation

Incident history

An archive of past incidents with dates, duration, affected components, and a brief post-mortem

Uptime metrics

Historical uptime percentages per component, typically covering a rolling 90-day window

Scheduled maintenance

Upcoming planned maintenance windows listed in advance with estimated duration and which components will be affected

Tip: Scheduled maintenance announced at least 72 hours in advance (and communicated via the subscription channel) is far better absorbed than a surprise

Subscribe to updates

An email, SMS, or webhook subscription option so users are notified of incidents without having to check the page themselves

Separate domain

The status page hosted on a domain independent of the main infrastructure, so it remains accessible when the product itself is down

Tip: A status page that goes offline during an outage is the single most common implementation failure. A separate hosting arrangement is the only reliable solution

A team page introduces an organization's staff members, leadership, or key personnel. It typically helps visitors understand the people behind the company while adding a human element to the brand's identity.

Source: https://www.checklist.design/website/team

Personality and branding

A theme or tone that conveys how serious or funny your team behaves

Tip: Colloquial copy helps you appears more accessible to users

Team members

A representation of your team, with amount of detail varying on the team size (8 people can be shown individually, but 800 not so much)

Visuals

Either photography or illustrations of the team, offices or culture

Group by area or team

Depending on your team size, you could divide the team members up by area (marketing, design, engineering) to allow an easier scan of members

Link to careers

After someone has seen who your team is and the culture, they may be interested in finding what job opportunities are available

A page dedicated to social proof, collecting customer quotes, reviews, and success stories in one place.

Source: https://www.checklist.design/website/testimonials

Customer quotes

Direct quotes from real customers describing their experience, attributed with name, role, and company

Tip: Specific quotes that mention a concrete outcome are far more persuasive than generic praise ('It saved us 6 hours a week' beats 'Love this tool')

Customer details

Name, role, company, and photo for each testimonial, since anonymised quotes carry much less weight

Tip: A recognisable company logo next to a quote multiplies its credibility significantly

Use case variety

Testimonials representing different customer types, industries, and use cases so visitors can find someone like them

Video testimonials

Short video clips from customers who are willing to speak on camera, for visitors who find video more convincing

Review platform badges

Aggregate scores from G2, Trustpilot, Capterra, or similar platforms linking to verified reviews

Tip: Third-party review scores carry more weight than self-selected quotes, when scores are strong, lead with them

Source: https://www.checklist.design/website/waitlist

Email capture

A simple form (typically just an email field) to join the waitlist, with a clear statement of what joining means

What to expect

What waitlist members will receive (early access, a discount, a specific feature) and a rough timeline for when

Tip: Vague waitlists that promise nothing specific generate sign-ups but very low activation when access eventually opens

Social proof

The total number of people already on the waitlist, displayed to signal demand and reduce the fear of backing something niche

Position indicator

The user's current position in the queue, shown after sign-up and updated as they move up

Tip: Showing a specific position ('You are #847') is more motivating than a generic confirmation because it creates a concrete reference point to improve from

Referral mechanic

A shareable link that moves the user up the list when others join through it, incentivising organic sharing

Tip: Referral waitlists consistently grow faster than static ones. The mechanic works because it aligns the user's interest with the product's growth

Progress toward access

An indication of how close the product is to general launch or how many spots remain at the current access tier

Shopping online means users need to easily add products they want to their cart. This fundamental action can make or break a sale, so getting it right is crucial.

Source: https://www.checklist.design/flows/adding-to-cart

Outline variant selection for product

Whether it’s size, colour, amount or something else, it must be clear what details must be picked to be able to add an item to cart.

Primary action on product page is add to cart

One of if not the most prominent button on the page to draw the user’s attention. This may change if you want an 'add to cart' button on a grid view of multiple products.

Feedback once added

Immediate confirmation the item has been added. This can be done several ways and depends on the amount of intrusion you want to have, which is why 2 options are shown.

Link to cart view

Typically in a primary navigation, so that if the user continues shopping but is then ready to checkout, the cart is easily accessible. Showing the number of products is a way to catch their attention that they have items added but not purchased yet. A total price can also be considered to be shown.

Similar to closing an account, a user can decide to end their experience and stop paying for your product. Just because they're leaving doesn't mean we can't give them a graceful exit. It's important to make a cancelation obvious to find and easy to travel through.

Source: https://www.checklist.design/flows/canceling-subscription

Show a link in account details

This doesn't have to be the first or most prominent link, but it should be clearly visible. If you're unsure about including it on the account page, it's suitable to place on the billing settings.

Confirm intent to cancel

Sometimes, a user misclicks. So it's okay to ask if they're sure they want to make this choice, and not just automatically canceling their subscription. But... while the user is there, you can attempt a last ditch effort to reel them back (it cannot be pressuring or manipulative). If the product can only be access with a subscription, you can remind them of the product's value. If the product can be access in a free version, you can remind them of that specific subscription's value.

Request a reason for canceling (optional)

It can be helpful to receive feedback on why a user is canceling. Too expensive? Competitor preferred? Just don't need it anymore? It's an easy way to start identifying the key factors affecting churn.

Confirm subscription has been canceled

Now that it's canceled, make sure you tell the user when their subscription is active until.

If there's ever a problem, a user should know how to get help. Then when they try to get that help, they should know exactly what kind of communication they're receiving. Making support not only available but suitable to how users tackle a problem is important on being on the right track together. If you're explaining to a user in text where the interface elements are when a screenshot would tell a much clearer story, then that's the first problem to solve before you even get to theirs.

Source: https://www.checklist.design/flows/contacting-support

Show a link to contact support

This can be placed in a number of areas, such as: ‍ • footer in a website • settings in a mobile app • a page experiencing an error Use clear copy and easy to recognise visuals to highlight the link.

Show methods of contact

If you have one option, showcase it! If you have multiple options (chat, call, FAQ), list them out and represent each of their benefits. Chat is great for a specific, complicated issue that needs an instant response. On the other hand, FAQ is great for standard questions that are easy to explain. Also consider the order of the methods. A FAQ as the first option is great because it lets a user find their own answer without waiting on you to respond. But a direct chat can be seen as more convenient as it's less direct troubleshooting for the user.

Outline how to communicate and what is expected

Once a method is chosen, make it clear on how the method will work. Illustrate the response time, and what the user will need to provide to receive support.

Sometimes it's just not meant to be, and that's okay. Users come and go, so it's important to recognise your solution is only for some and not for all. For those who want to leave, make it as simple as possible. You can try to understand why they're leaving, but don't get too in the way. ‍ There's no need to be passive aggressive or guilt tripping. They'll remember it, and likely share the experience with others who will reconsider your product.

Source: https://www.checklist.design/flows/deleting-account

Show a link to delete account

Don't make this difficult. This link should be visible in the profile or settings of a product. It should also be available in the support area.

Politely ask for feedback

It helps to know why somebody is choosing to leave. But, it should not be pressured or forcefully asked. Convey the request feedback to improve other people's experience and to also consider their personal reasons.

Explain what it means to delete the account before confirming

Be clear with what happens to the account and the information in it should a user close. Is all the data permanently deleted? Can they come back and restore their account? Is the deletion immediate, or can they use their account until a certain date?

Confirm account has been deleted

Now that their account is deleted and it's finally complete, embrace that! Be comfortable acknowledging they have left. Do not show any passive aggressiveness.

A reward for a user to earn a discount on their purchase, promo codes are a pre-requisite in any e-commerce website. ‍ To avoid a confused customer, make sure they understand what is happening with their code - whether it works, expired or isn't applicable.

Source: https://www.checklist.design/flows/entering-promo-code

Show promo code input field

The cart or checkout are pages expected to have a promo code field. It should be in a place that can be seen when scanning towards the button to continue.

Promo code applied successfully

The change can be reflected using your success state colors (likely green) to indicate the code was applied. In the example is two different options, divided by how much information you want to show. For both, hiding the input field altogether makes it clear only one code can be entered.

Reflect promo code impact

This can be shown with the promo code entry as a total amount, or be represented on In item-to-item basis. It's important to also show or at least repeat the discount near the total at checkout.

Promo code error

The promo code may not be applicable, or entered incorrectly.

Remove promo code

In some cases, a user might not like the discount offered and prefer the original sale price of an item. Or, they found a better promo code to use.

Filtering helps users find what they need in large collections by specifying specific values of properties the items contain.

Source: https://www.checklist.design/flows/filtering-items

Show action near item collection

Place above or beside the collection it affects, using a recognizable icons and/or label.

Show available filter options

When the action is triggered, filter options can either be shown on the same page for immediate feedback, or on another page. This should be dependent on the amount of filtering that is possible, and whether you think the user is likelier to tweak filters ongoing, or apply several and then view results. It's also worthwhile considering a filtering priority order, with the most common options filtered sitting at the front.

Consider different filter types

The standard filter is a multi-select option picker. But certain properties can benefit from a different way of managing the filtering. There's sliders, checkboxes, dropdowns and others to consider. Each property should be considered, asking yourself what feels like the easiest way to change this value.

Show active filters clearly when applied

On the item collection page, display which filters are currently applied. You can also choose to have a high level active state applied to the filter action to imply it is in use, if you find showing all applied filters is too cluttered.

Provide easy filter removal

Let users clear individual filters or all filters at once to allow easier refining of their results.

Show result count

Not a must have, but this can be handy where it is meaningful for users to see what the total results value has reduced to. It will help users feel if their result is too narrow or broad, directing them to either add or remove filters.

Empty state

It's possible that a combination of filters can product no results. Explain this clearly and suggest adjusting or clearing filters to see results.

When paying for something online, two thoughts will come to mind for the user: is this safe, and is this clear? A well-designed payment experience covers these by communicating what's happening with a user's money, and that it's all happening securely. Below are the steps a user will take to submit a card payment, and what factors you'll need to consider.

Source: https://www.checklist.design/flows/making-a-payment

Offer payment methods

Other methods can be shown, but for this flow we'll focus on the user selecting 'credit or debit card'. This is because it's the one with the most internal effort on designing and building, compared to other services which are often third-party integrations.

Request card details

Show all relevant text fields to complete. Consider the size of these fields relative to the details entered. Note: in a product where the user is revisiting and saved payment methods are available, consider a flow that allows the user to add/remove payment methods.

Submit payment with card details entered

It's also important to consider validation before a user submits their details. Numbers can be mistyped, the card may have expired - so make sure these numerous error states are addressed.

Show payment processing

A payment may not be triggered instantly, taking a few seconds (or minutes). A loading page is crucial to calm the user’s nerves in regards to what’s happening to their money.

Confirmation payment processed successfully

It’s a success! Clearly indicate to the user that their payment was processed, and the funds was received.

Outline next steps

What now? Does the payment trigger something? If so, let the user know. Example 1: a physical product has been purchased. Once the payment has processed, tell the user the order is in motion. Example 2: a user signed up for a subscription. Offer a link to continue to the product to start using it.

Every now and then, a user can't remember their password to log back in. Luckily, it's a straightforward process to change it. It's important to make the experience feel straightforward, so the user feels like they've gotten back into their account as smooth as possible.

Source: https://www.checklist.design/flows/resetting-password

Place reset link close to password field

Style it as a link to show it is clickable

Ask for account details to verify

In this case it's usually the email address that's requested, because it can recognise your account and be the channel the link is securely sent to. Note: If the user already entered their email address on the previous login page, that can be prefill this field and speed up the flow!

Show information has been sent

Based on the account information provided in Step 2, explain how they can continue. If an email was provided, send an email for the next step. If a mobile number was provided, send a code or link to open.

The message sent explains next steps

This could be a link to a page that allows the user to reset their password. It could also be a code for the user to provide on a page to verify their account, to then reset their password.

Reset the password!

Whether it's a verification code or a link to click behind an email address, the next page should be a clear text field to enter a new password. You can provide guidelines if you have requirements for the password to pass a threshold of strength to be accepted.

Password successfully reset

After the password has been reset, indicate the successful and push their momentum to their initial intent: logging in.

Users are constantly updating their details. They might be changing an email address, fixing a typo in their name, or updating their payment details. That's why it's important to confirm that a change has been saved, in the clearest way. Here's a breakdown of how changes being saved should look and feel like.

Source: https://www.checklist.design/flows/saving-changes

Show action that enables change

There should be an action to enable information to be updated. It may be automatically editable, but that can be riskier for some software. If it is read-only by default, then a button can trigger the editable version to then update and save.

Disable save action until changes are made

An action should be visible as a source of confirming changes to be saved - this is usually a button. Initially, the action can be disabled. It indicates no changes have been made, and there is nothing to save. A common location for this action is in the navigation above the fold, so it's always visible over the content. Another option is after all the content that's editable.

State changes to active once a change is made

In the example, we've changed the email address, which means a change is waiting to be saved. Changing the button state to active brings the user's attention to the action.

Action changes to loading state when pressed

Now that the changes are being saved, you want to show that action is in progress. You can do so with a loading spinner in the action, as the user's view will be on that element.

Notify changes have been saved

The page will reload or update, and this is the critical part. The user should now be informed that their changes have been saved. They can now safely leave the page, knowing the details are locked in until they choose to change them again.

Users mistype all the time - whether it's a finger slipping or rushing through letters, errors happen. So for an everyday occurrence, solving an error should be obvious and seamless. The key parts of making that happen are strong visuals, clear communication, and state changes — which are all featured below.

Source: https://www.checklist.design/flows/showing-input-error

Keep the input in default state

The text field should be checked for errors only after the information has been entered.

Allow user to enter information

Let the user type without interruptions and submit the information aka don't assess as changes are made.

Signal error after loss of focus

After the input has lost focus (user has clicked another element), the field should be assessed. Looks like we have an error here! In this case, explain why the error happened, and what is required to resolve it. For accessibility, combine the text with a visual icon that indicates an error was found.

Return to default state upon reattempt

Once the user focuses on the field again, the error message should disappear. If there is an error again, the process will simply repeat until they are able to continue.

A form can help a user achieve anything from creating an account to subscribing to a newsletter. They are often the last step of a user's journey, so should be quick and easy to complete.

Source: https://www.checklist.design/flows/submitting-a-form

Show button to submit

Below the form fields, a button to submit the information needs to be present. You can change the copy to fit the form e.g. the button can say “Subscribe” if someone is providing their email address to receive emails.

Show loading state after submission

The user must see the form is in the process of being submitted. Note: also make sure your hover state is considered before they press the button!

Show success message when it submits

The form was submitted! Let’s communicate that back to the user with a clear success message.

If it doesn't, show an error message

Sometimes, things don’t work out. If the form can’t submit, because of invalid information or another error, that also needs to be shown.

An error may occur because of the wrong information

If the criteria for a text field isn’t met, the form can fail to submit due to that error, and must be detailed.

Source: https://www.checklist.design/flows/uploading-media

Empty state

Show a clear visual placeholder with an upload icon and simple text that indicate a file can be dropped into the area to upload. It’s also suitable to offer a click to upload route incase a user prefers that option.

Drag and drop interaction

When a file is across the interaction canvas, there should be a clear visual state change to indicate it has detected a file attempting to be dropped. This lets the user know it’s safe to release the file at this point.

Progress indicator

Display progress that updates in real-time so users know their upload is working. If a percentage is not possible to show, a loading indicator can at least show that something is happening. Include file names and show overall progress when uploading multiple files to keep users informed throughout the process.

File restrictions & constraints

Clearly state limits to what files can be uploaded. This is commonly file size and format, shown in the upload area before users attempt to upload files. If a user tries to upload a file outside the constraints, an error message should show explaining it does follow the constraints.

Outcome status

Use visual indicators like green checkmarks for successful uploads and red warning icons for failures. For failures, include an error message explaining what went wrong and what users can do to fix it.

Upload actions

Ways to interact with an upload. Choose which actions to show by default vs on hover based on available space, aiming to avoid overwhelming users with too many visible options. Common actions include: Retry failed uploads Cancel upload in progress Delete files Rename files

Showing multiple uploaded files

Display files in a clean list or grid with thumbnails when possible, and ensure the layout you choose is scalable. What information you show about each file depends on the context of the upload. A file name or size can be relevant in one case, while seeing the images uploaded can be the relevant detail in another.

Verification is a critical role to promise security for a user in the early phases of onboarding, which means it must be a smooth experience that feels helps rather than burdensome.

Source: https://www.checklist.design/flows/verifying-account

Establish a trigger point

Clearly indicate when verification is required, giving context as to why verification is necessary. It is common to verify the email or phone number used for account creation, because this is ensuring the person with access to those details is the same person creating the account.

Method selection (optional)

Depending on the level of sophistication you want to offer, you can make multiple verification methods available (email, SMS, authenticator). The common default is what the user is using to sign up with e.g. if signing up with email address, send code to email.

Confirm delivery and contact information used

Display the email address or phone number where the verification will be sent so the user can see it is the correct destination. That way if they have not received a code and the contact information provided was incorrect, they can see this, go back, and enter the correct value.

Ability to input verification code

The input field can be intuitive to show a field per digit, but the default input field is perfectly accessible.

Incorrect value (and resend option)

Provide specific error messages for different failure scenarios and clear next steps: Expired code: offer link to send a new code Incorrect code: ask to check email/SMS again or offer link to send new code Too many incorrect attempts: contact support team or wait for defined time period before trying again

Verification success state

Display clear confirmation when verification succeeds and continue to next step of interface.