Accessibile Login & Signup Form for Notion

Overview

This project involved designing an accessible mobile login and signup form for Notion, a widely used SaaS productivity and workspace platform. The goal was to create a form that is inclusive, usable, and compliant with WCAG 2.1 AA accessibility standards, ensuring that users of all abilities, including those with visual, motor, cognitive, and auditory impairments, can complete the authentication flow.

Notion was chosen for its clean, minimal brand identity, which aligns well with accessible design principles. Its sparse aesthetic avoids visual noise, making it easier to maintain high contrast, clear hierarchy, and unambiguous interactive elements. The mobile device type was selected because mobile interfaces present unique accessibility challenges, including limited screen space, touch interaction, variable usage conditions, and one-handed use.

Tab Switcher: Login First

Login is set as the default active tab. This decision was based on the understanding that returning users represent the majority of visits to an authentication screen. Requiring existing users to tap an extra control before they can begin logging in creates unnecessary friction. New users, by contrast, expect to take a deliberate action to create an account, making the Sign up tab the secondary option.

The tab switcher itself is designed with sufficient touch target sizes and clear visual differentiation between the active and inactive states using background fill and text colour contrast.

Form Field Decisions

Minimal, Essential Fields Only

Both the login and signup forms were deliberately kept to only the fields necessary to complete the action:

• Login: Email and Password
• Sign up: Full name, Email, and Password

Collecting only essential information reduces the burden on all users, particularly those with motor disabilities for whom additional data entry is physically taxing, and those with cognitive disabilities who may become overwhelmed by lengthy forms. Additional details, such as workspace name or profile information, can be collected after the account is successfully created.

Visible Input Borders

Every input field has a clearly visible border, distinguishing interactive areas from surrounding content. Borderless or background-only input fields, while aesthetically minimal, significantly reduce usability for users with low vision or cognitive disabilities who rely on visible boundaries to identify where to tap and type. The default border colour (#E5E5E5) sets a clear boundary for the input, and the focused border (#000000) provides clear confirmation that a field is active.

Full-Width Primary CTA Button

The primary action button ('Log in' and 'Create account') spans the full width of the screen and is positioned in the lower-central area of the form. This placement ensures both left-handed and right-handed users can comfortably reach and activate the button with their thumb without needing to adjust their grip.

Placing key actions in the far right corner, a common pattern, disproportionately disadvantages left-handed users, who represent approximately 10% of the population. The centred, full-width approach is equitable by design.