Address input field

Fixing the most dreaded experience of citizens: correctly entering an address in a form

Goal

The goal of this project was to design from scratch an address input field, given this was the single most troublesome component our end users were complaining about.

Screenshot of the existing address field and examples of issues and complaints recorded via customer support

Hypothesis

A series of hypothesis were laid out on why the experience was so badly percieved and why the component had been implemented the way it currently was. On those that validation was possible against hard data, we did.

Hypothesis made on the usage and validations

Problem statement

It was ascertained that one of the main causes for how the component had been set up laid on the underlying database structure: addresses, for governments, are a critical piece of data because any procedure require legally valid notifications. Up until recent years, those were postal notifications.

Because of that, precise postal addresses were crucial and the database model captured all that precision. But for the average citizen, the extra complexity would never be needed as the average address is fairly simple.

Definition of the problem and characteristics of stakeholders' goals

Benchmark

We carried out research to review how the collection of addresses was being done on government agencies and on other use cases (utilities, e-commerce, mapping services...).

Screenshots of how this component is implemented on other services

Constraints

We identified 3 possible approaches: a full form with many input fields, a wizard that helps the user by breaking the address into steps, and a search field.

We pitted each of these approaches against the technical constraints that our database model, and our customer's usage, imposed.

3 different possible approaches and what technical constraints we face

Solution

Based on research, the constraints above, and the user experience we wanted to achieve, a feasible solution emerged.

Agreed solution to be implemented

Ideation

Initial drafts, explorations and final designs were worked on Figma and reviewed by the team. Many iterations were needed to find the final solution matching the existing visual design with the desired user experience.

Lo-fi initial sketches

Detailed exploratory designs

Implementation

The new control was added to our existing design system, tailored to our product's visual style and based on Material Design guidelines using primitives from MUI.