📚Last chance to sign up for our 12 Week Product Design course. Flexible Learning. Live Mentorship. Hiring Connections. Sign up now
Trending designs to inspire you
Work designers are riffing on
Interviews, tutorials, and more
Prompt to flex your design skills
Find your dream design job
An exclusive list for contract work
Get new leads in your inbox every day
Introduce yourself to new clients with Pitch
Learn product design in just 12 weeks...
Level up your skills with our interactive courses and workshops…
Portfolio creation made easy
Fresh leads in your inbox every day
Build your team’s pipeline or profile
A marketplace of digital assets…
Icons, Illustrations, Patterns, Textures…
Display, Script, Sans Serif, Serif…
Mock Ups, Social Media, Presentations…
Characters, Objects, Textures…
WordPress, Shopify, Bootstrap, HTML5…
Procreate, Affinity, Photoshop, InDesign…
Earn money doing what you love
Find, contact, and hire designers
The #1 job board for creatives
Board for freelance & contract work
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
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).
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. :-)