Product work · Component design

Designing a phone number component for global users

Strategy and craft in one project: the international phone number component for NetSuite Next, its design guidelines, and the settings that make globalization work — the kind of “small” component that touches every record, every invoice, and every country’s formatting rules at once.

Design systemsEnterprise delivery

Selected design artifacts shown; other details abstracted to respect confidentiality.

Role
Design lead — discovery through design-system spec; mentored a junior designer through the full arc
When
2022–2024
Scope
Phone number input component + design guidelines + the globalization preference settings, for NetSuite Next
Outcome
Now a global component in NetSuite Next; discovery approach cited by my manager as a model for handling ambiguous requirements

Why a phone number is hard in an ERP

In a consumer app, a phone number is one field on a signup form. In an ERP, it lives on customer, employee, and vendor records; prints on invoices and name cards; feeds VoIP calls; gets copy-pasted between systems all day — across every country’s formatting conventions simultaneously. A Singapore company calls Japanese customers from a US-configured account. Whose format wins?

Start with an audit, not a mockup

I began with a UX audit of how the existing product handled phone numbers. The findings explained years of quiet user pain:

Turn unclear requirements into explicit assumptions

The PM requirements arrived vague and, on inspection, full of unstated assumptions. Instead of designing to them — or arguing — I ran a structured Know / Unknown / Assumption session with the product team. Laying out what we actually knew versus what we were assuming let the PM discover the gaps in their own framing, and the requirements were rewritten from that shared understanding. My manager later cited this as a model for handling ambiguous requirements.

From there, discovery was systematic: use cases and personas mapping every scenario to the record types and pages where phone numbers live, plus a competitor analysis of how Dynamics 365, QuickBooks, and Dynamics GP handle formatting.

The key finding: two scenarios define the whole product

The discovery converged on two scenarios that, between them, explain everything the component must do.

Scenario 1 — capturing numbers on records

Three personas, three record types, one component:

The insight in scenario 1: a phone number is never data at rest. It gets dialed, tracked against a history, printed, exported. Capture is only the beginning of its life — which is why validation at entry matters so much.

Scenario 2 — controlling the format, at three levels

The second scenario is where the product’s real shape emerged. Different people need different formats — at different scopes:

Preferences Levels flow from the working file: the admin's onboarding sets the company-wide phone number format, flowing into the company or subsidiary's default region format and everyone's phone number component country-code sorting, then the user's personal region format, and finally task-specific settings marked on hold — each level illustrated with sketched NetSuite screens and personas.

From the working file: how each preference level maps to a real screen — admin onboarding, company settings, personal preferences, and the task level scoped for a later phase.

The component: flexible on the surface, smart underneath

Everything the research found converges in the component itself — because whatever the settings say, the component is where every user actually meets a phone number. Designing it started with a competitor scan and an exhaustive inventory of input behaviors: some users type the country code straight into the number, some prefer to select it from the dropdown, some want to search it — by country name or by code, exact or partial.

Rather than pick one behavior and punish the rest, the component supports them all — and stays coherent because of the intelligence underneath: a detection algorithm that recognizes whether the user’s input was meant to include a country code or not, and resolves it accordingly. Type “+81…”, pick from the list, or search “Jap” — you end up in the same clean, validated state. Flexibility for the user, consistency for the system.

The design: format governance, not just an input

The interesting design problem wasn’t the input box — it was who decides the format. The three-level preference model fell directly out of scenario 2: a company-wide default set by the admin, a per-user override for people whose work doesn’t match the company’s shape, and a task-level switch at the point of use.

Admin settings mockup: the General Settings Region page with an Advanced Format Settings panel where phone number formats sit alongside date and time, number, and financial amount formats, each with a live preview — the phone number row expanded to show options like displaying local numbers without the country code and showing the company's country codes at the top of the drop-down list.

The admin level, designed: phone number format lives with the other regional formats — date, number, currency — each with a live preview. The expanded options carry the research straight into the UI, including “display local numbers without the country code.”

The component itself absorbed the audit findings: a country-prefix selector with search, defaulting to the parent company’s region and supporting non-geographic numbers like toll-free ranges; validation that guides rather than blocks — wrong digit count, format mismatch, and unknown country codes each get a specific, recoverable warning, and the user can still save; live formatting hints so users see how their entry will be stored; and a proper extension field at last. All of it specified to design-system standard, so every team on the new platform inherits the same behavior.

Outcome

Phone number component design spec: the country prefix section showing the selector with search, geographic and non-geographic number types like North America Toll Free and UIFN, search by country name or code with partial matching and no-result states — and the validation section showing warning states for wrong digit counts, format mismatches, invalid country codes, and live formatting hints.

From the component spec: the country-prefix flows (select, search, partial match, no result) and the validation states that guide without blocking.

What I learned

The smallest components hide the most complexity — and they’re where design systems earn their keep, because a phone number done right once is done right everywhere. And clarity work is design work: the Know/Unknown/Assumption session did more for this component’s quality than any number of mockup iterations would have.