Formally

Year

2021

Client

Formally

Tools

Team

Ben Wright

Design Direction

Joris Roteveel

Front End Development

Matthew Holloway

Front End Development

Ella Price

Content

Calin Dale

Tester

Alexa Patterson

Product Owner

Awards

Forms are everywhere online. They empower people to access digital services and complete tasks. However, many forms are failing people by being hard to use with assistive technology, or too hard to read or understand.

From 2019, all government organisations are legally required to meet the NZ Government Web Accessibility Standard 1.1. Meaning their web pages and forms must follow the Web Content Accessibility Guidelines (WCAG) 2.1 AA.

For those living with disabilities, from different cultures or vulnerable communities, forms can be the difference between being digitally excluded or being empowered to harness digital services to improve the quality of daily life.

We believe digital tools should work for everyone

At Springload we're often required to build accessible, bespoke apps for clients but every time a project needed a cheaper and smaller solution we failed to find a form builder that could live up to accessibility standards.

Springload's internal impact focused team Springlabs seized the opportunity to develop Formally and give everyone the power to create highly accessible forms.

The name combines 'form', the product itself, and 'a11y', the shorthand abbreviation for accessibility. To make it screen reader friendly we changed this to 'ally', spelling out our commitment to being an ally for accessibility.

Formally is made up of two parts. The Builder allows users to log in, create and publish highly accessible forms, add form translations into multiple languages and view received form responses from any published forms. The UI is designed to be highly accessible and can be navigated fully with a keyboard.

The SDK allows developers to hook into Formally's accessibility functionality via code and bypass using the builder. A recent project at Springload saved over a week's worth of development effort building accessible forms using the SDK.

A screenshot of the form builder interface showing the ‘Build’ tab. The user can edit, delete, add, and reorder form elements. In a side panel there is a preview of the form, showing how the form will look when published.

An accessible product needs an accessible brand

We challenged ourselves to meet the WCAG AAA standard of accessibility when developing the Formally brand. To do this we focused on three key areas, colour, typography and image. Purple was chosen as the primary brand colour due to its high contrast ratio of 7.11:1 against white. When we tested this across a range of vision impairments we made sure that it retained a high contrast ratio.

A comparison showing the contrast against white of the Formally brand purple against how this colour would appear across a range of vision impairments.

Our choice of typefaces was informed by the extensive research into accessible typography done by The Readability group. We paired Haffer XH with Public Sans. Together they strike a clean balance that expresses the brand personality when used at larger sizes while remaining functional and accessible at smaller sizes.

Accessibility details of Haffer XH and Public Sans, the two brand typefaces.

The brand imagery explored the 'visual form' — the shape or configuration of something, as well as quite literally visualising elements of a digital form. This idea led us to explore the tactile nature of assistive technology, such as screen readers and the way these translate digital forms into the physical world. The end result was 3D in form, representing elements commonly found in digital forms.

The Formally logo surrounded by the brand imagery of tactile 3D form elements.

Early access

We released a marketing site allowing users to try a demo form, assess the accessibility functionality and register for early access to the SDK. In January 2022 the SDK launched. To get access to the SDK please get in touch with the team at getformally.com

Screenshot of the Formally website and the party invite demo form.
No items found.