Number Formats for ContactNow

UX/UI Designer
Telecommunications
Web

A visual and functional solution in which international number formats can be presented and managed for ContactNow.

Overview

With the launch of the US ContactNow product, the platform needed a way to handle international numbers. I designed a visual and functional solution in which international number formats can be presented, edited, and entered. My role in this project was to:  • Look into existing backend and frontend infrastructure and processes • Research what existing telecommunication products do • Design the new flows and processes for the platform • Create mockups and wireframes • Create detailed documentation for developers, PMs, and QA  • Work with the development team throughout the project and get involved with their sprints • Make sure the designs were implemented through design reviews

Design Process

I started by researching what existing number formatting existed and compared my findings with what infrastructure the system already had.

I designed various user flows for the phone as well as the call record pages. I found that a lot of the expected behaviour needed to be built, so I worked with developers to understand the technical capabilities and limitations. 

I worked with QA to make sure that the phone numbers were formatted according to the contact centre location as well as checking implementations through design reviews.

Challenges

The main challenge was integrating the functional flags. Although adding the flag dropdown was technically easy, the challenge was to figure out how it would work; especially as some number prefixes partially overlapped. The solution was to delay the flag being displayed until it could be correctly identified.

Outcome

The final outcome was a field type that determined the location of the number that the user wanted to dial, via the international code. The way the number was presented was based on the location of the contact centre. This solution used a pre-exsisting numbers library that the developers got their data from.

The front end changes were minimal and most of the work was done with developers to make sure that the user flow was seamless and that the library used worked to my design.

© 2020 Marwa Khalil. All rights reserved.