Updating phone number fields to be more inclusive

As a wanderlust, I’m mindful about inclusivity. Websites need to serve the public — both international and locally, while also being more accessible.

During a QA session, I watched users type in parenthesis and dashes. One user couldn’t add his international phone number, which was stored in his Google form/password. This was a problem. So I began researching best practices for the phone field.

Problem

Currently, the phone number field only accepts 10 digits. It is formatted to look like USA numbers. Hence, this deter buyers with international numbers.

Hypothesis

Make input field inclusive by allowing users of any phone number to input information.

After reading UX Movement‘s article, I proposed solving a solution to the problem. I worked with developers to understand the limitation of the code.

Is it possible to identify a country code by the first few numbers? Can a user then have a corrected masked phone field? We ideated on auto selecting country code with flags. However, the flags did not match the overall brand of the site, so then I presented other alternatives.

1. EASY: Allow submission of any amount of number string.
2. MEDIUM: Geo-locate user and auto select Country code in advance. This might not allow users to change the type of phone number they want to use
3. MEDIUM/HARD: Geo-locate user and auto select Country code in advance. Use a library with flag icons while setting USA as default.
4. MEDIUM/HARD: Use 2 input fields. Geo-locate user and auto-fill country code (USA is default). Non-USA types in their code and the input field will change its format.

After sharing the solutions, I urged for Option 4, which was a nicer and cleaner solution. The overall effect of this change will open the market to international buyers living in the US. It also opens up the talk for inclusivity and accessibility for the website.