Mercury Phone Input
This is a continuation of the input series. The previous post was about the thinking behind our standard Text Input (this builds on top of that).
—
While Mercury only supports (at time of this post) companies with a US EIN, folks who open Mercury accounts tend to be pretty international. This geographic spread means we have some unique challenges, with international phone numbers and addresses among them.
Key design details
We wanted a simple, intuitive way to enter international phone numbers, and included a few design tricks to get there:
1. Most of our customers have a US number, so we assume that case to start.
2. Based on location, we can suggest other country codes, and bring those to the top, to simplify selection
3. If you know your country code, it's really easy to skip the selector, and just type it in. Some inputs we found split the country selector and the main phone input, which meant extra navigation and clicks, something we wanted to avoid.
4. Input masking clarifies what format we expect, which combined with auto-formatting, makes it easier to read (and validate) your number as you type it
Some challenges
Figuring out how to handle input masking is still something we're working on. International phone number formats can vary, wildly. Even with a single country, like Germany, you can end up with many different formats. As an example, both of these numbers are completely valid:
Energie-Museum Berlin: +49 (030) 7017 7755
Freie Universität Berlin: +49 30 8381
Folding in a searchable country selector and keyboard controls was also a challenge. Figma variants and prototypes helped us determine what felt the most natural. We landed on a mix of full mouse support (you can click the selector, or the input), and keyboard controls (shift tabbing over to the selector works, but so does deleting the country code).
Sounds interesting?
We spend a lot of time thinking about the details here at Mercury. If that sounds like a great way to work, check out our product designer job posting, and come design great components with me. :-)
