Epic: User-friendly introduction to calls from browsers

[kachkaev]

User story 1

As a person who has never called from a web browser, I want to try this in a really easy way, so that I see the benefits and realise I can call friends, relatives or business partners later on.

Ideal Final Result

I open a web page and just start a test call in one simple gesture. I can hear some sound from my web browser and I also ensure that my mic works. I can stop the call at any time with another simple gesture and make more test calls at any time.

Things to consider

• A target for a test call should look the same as a real phone number to give people an impression that callthem.online works with real-world phone numbers, not some odd user ids.

• The test phone number is never busy.

• Ideally, the test phone number should be different for clients in different countries (it's weird to call an RU number while you're are in UK).

• Ideally, any test phone number should be accessible from mobile phones and landlines to make it more ‘realistic’.

• There may be multiple test phone numbers for engagement and marketing purposes (Add multiple test echo phone numbers simple-server-graphql#3)

Solution

The very first page that a new client sees contains a phone number field and a call button. Both of these are located in the middle of a very minimalistic page, same as google.com or ya.ru. The input field already contains a test phone number, which belongs to the country from which the person is from (limited to UK and RU for now). There is a small info box below the input field explaining that the phone number is a test one and is free to make calls to.

User story 2

As a person who is aware that the phone calls from browsers are theoretically possible, I want to call my own number, so that I ensure that callthem.online works with real phone numbers.

Ideal Final Result

The system already knows what real phone number I want to dial and I just start a call with a simple gesture. The interface indicates that the call is ongoing by starting the tones and I also see my phone ringing. When I pick up the phone and say something, I start hearing myself from both ends, maybe with some funny echo. When I terminate the call from the phone, the web page responds to that and suggests me to make a new call. Similarly, stopping the call from the web page hangs up my mobile phone.

Things to consider

• Obviously, a person will need to either type or paste their own phone number (reading one's mind is a bit too much for the today's online services 😃).

• We cannot allow calls to real phone numbers from anonymous users because this is not safe.

• We don't want to take users through tedious verification steps such as sending them text messages with codes as this will scary people off.

• We may want to limit the number of minutes each person can use to avoid paying too much for the voice gateway.

Solution

A person replaces the test phone number they already see in the interface with their own phone number. This is done either by typing, pasting or using the browser's autocomplete feature. Then the person presses the call button, but instead of hearing the tones straight away, they see an info box appeared under the form, which suggests to authenticate with facebook, google, paypal or vk. The info box also explains that authentication is necessary to protect people like them from unwanted calls by anonymous users. The phone number is still editable and the client can choose not to login and instead to keep dialling the test phone number(s).

After selecting what platform to authenticate with by clicking one the login buttons, the person is redirected to a corresponding website and is brought back to the call form. If the login is successful, the person's name is shown in the top-right corner of the page and there is a flashing message saying something like congrats, now you can call!.

We also place a login link in the top-right corner for unauthenticated clients so that when a person revisits the page after a while or opens it on a new device, they can easily tell if they need to authenticate without attempting to make a call.

To facilitate the process of phone number editing, a client gets instant feedback as she types. When a phone number does not start with the country code or is too long (which is obviously a typo), the field is marked as containing an error and a hint is shown even before the call button is pressed. If the phone number is too short, this is considered an error only after an attempt to make the call has been made. Any editing recalculates the error.

Despite marking the phone number as erroneousness when appropriate, the interface, however, does not restrict text editing in any way before the call. For example, it does not strip dashes or does not fail to paste if there are letters or other unwanted characters.

A phone number that has been entered correctly is formatted once the call has successfully initialized to improve its readability (somewhat similarly to how this is done on iOS).

User story 3

As a person who has already made a couple of calls, I want to quickly dial the numbers I called before, so that I don't waste time on entering stupid digits again and again.

Ideal Final Result

I can always repeat a call I've ever done in just one simple gesture.

Things to consider

• A person can make a few test calls while being anonymous, then authenticate and make more calls. They may also make a few anonymous test calls already after making real calls if this happens on a new device or after a logout timeout.

• It's hard to remember which phone number belongs to who after making a few calls. Thus, people should be able to assign names to previously called phone numbers.

• A call log should look identical regardless of which device a person is looking at (as long as they are authenticated).

Solution

Previously made calls automatically populate a call log that appears below the dial form right after the first call has been made. Every item in the call log has a redial button, which starts a new call in one click.

A call log is stored locally for anonymous users and is synced via an API for authenticated users. The call log is continuously synced between devices and is also merged into the account once an anonymous user has successfully authenticated. Logging off (either manually or on a timeout) entirely clears the call log, so the interface resets to its original minimalistic state.

Calls to test phone numbers are automatically labelled and users are offered to label other phone numbers, thus populating their mini address book.

Each element in the log indicates call start time and its duration or a failure flag. Multiple calls to the same destination are grouped together and are ordered by time (the later the call the higher closer to the top of the page).