Formsg

Designing the government form builder

Formsg web app
Formsg is an online form builder that enable public officers to swiftly create and deploy forms. It caters to a wide range of needs, spanning from small surveys conducted by individuals to large applications seamlessly integrated with agencies' native systems. The primary objectives are to minimise reliance on physical paper forms, decrease expenses associated with custom forms, ensure robust data protection, and mitigate the risks of phishing and fraud.
Workshop facilitation, research, strategy, UX, UI, design system, usability testing
Responsive web app
2021
— The Straits Times
The Challenge
Since its launch in 2017, FormSG has experienced rapid growth. The form builder is utilised by government officers in various roles, with differing levels of technical proficiency. Form respondents are Singapore residents from diverse backgrounds and age groups.
574k
Forms launched
189m
Form submissions
137k
Officers onboard
156
Government agencies
As the user base continued to evolve, the existing experience proved inadequate in accommodating emerging use cases and scaling gracefully to meet growing requirements. The underlying framework of the product became outdated and we needed to migrate from Sketch to Figma. Furthermore, the recent pandemic highlighted the critical role of FormSG as an essential tool for officers to effectively engage with the public.

Given these circumstances, we saw an opportunity to realign our vision and redesign the product to enhance the user experience, improve usability and ensure accessibility for all users.
Enhanced form creation and viewing experience
Below are some of the key new features included in the revamp.
Improved readability
Inter's well-designed letterforms and optimal spacing improve legibility, ensuring a smooth reading experience. Its balanced proportions, clear character distinction and versatility enhance readability, particularly on digital platforms and mobile devices.
Inter
Formsg workspaces
Efficiently find and organise forms
For the dashboard, the grid view is replaced with a list view of forms. The list view offers a more organised presentation, accommodates longer form names, utilises screen space efficiently, and supports more quick actions. Additionally, users can now add Workspaces to organise their forms accordingly.
Formsg builder
Simple drag and drop builder
A drag and drop form builder simplifies the form creation process by allowing users to effortlessly place form elements. This intuitive interface makes it accessible to users with varying levels of technical expertise. Additionally, the drag and drop functionality provides real-time visual feedback, enabling users to see their form taking shape as they design it. It also offers flexibility, as users can easily rearrange form elements or make changes on the fly. This streamlines the form building workflow and saves time.
Formsg after form submission
Mobile friendly forms
To achieve a clear visual hierarchy, new features such as section containers and anchor links are included to guide users, understand the structure easily and navigate to specific parts of the form seamlessly. This mobile-friendly approach promotes efficient form completion especially for lengthy forms.
The Process
Below are highlights of the approach that we took to redesign Formsg.
Design thinking process
Problem Breakdown
To initiate the redesign process, we began with a comprehensive user research, gathering insights through interviews, surveys, feedback, and collaborative discussions with both our users and the product team. The research aimed to identify pain points, understand user goals, and pinpoint desired features. The insights we gathered formed the foundation of our redesign strategy.
Affinity mapping with team
— Our product team members doing affinity mapping of user's pain points during discovery workshop
01

Large inventory

Users struggle to locate a specific form. With such a large number of forms, the current navigation system becomes overwhelming and time-consuming, hampering their productivity.
02

Difficulty locating forms with long names

With the grid view, the  truncation or omission of characters disrupts the readability and makes it challenging to differentiate between similar-looking form names.
03

Toggling between build and preview

Cumbersome to switch back and forth between modes to review the form's appearance and make necessary adjustments.
04

Accessibility issues

Limited accessibility for visually impaired users due to broken page structures and non-functional components when using screen readers, causing difficulties in form completion.
05

Lack visual hierarchy

For lengthy forms, lacks visual hierarchy and page structure. There's no visual cues on where the user is on the form.
Camp Design System 🏕
As part of our deliverables, we created 'Camp', a design system that will continuously evolve based on our product and users needs. We aim to establish a unified source of truth in code using Storybook.
Design systemDesign systemDesign systemDesign systemDesign systemDesign systemDesign systemDesign systemDesign systemDesign system
Our Impact
The newly revamped Formsg was launched in early 2023. It is still a work in progress as we aimed to improve on accessibility and ensure it works well for all of our users. Also integration with other products such as payments and Zapier in the pipeline.
Next project

©2025 FIZA HUSIN — MADE WITH Webflow.