The making of the Beeline Cloud PBX service interface

Overview   Process  

Getting the requirements and usage scenarios from the client. Studying the document and understanding the PBX functionality. Coming across a variety of new terms and notions from the world of telephony. Tormenting the client with endless questions about IVRs, line hunting, call centers and SIP terminals.

beeline pbx process 01

After clearing up all the confusion, beginning to design the interface. We start with the dashboard structure.

beeline pbx process 02

Designing the main screens: account page, list of PBX phone numbers, user page.

beeline pbx process 03

The service functionality is quite complex, which is why we use the empty dashboard to introduce the basic features of the PBX.

beeline pbx process 04

Starting to work on forms for changing individual options. Designing the steps to create a voice menu. It will welcome the callers with a voice greeting and menu items will connect the caller to internal PBX numbers or transfer them to nested submenus. The menu can be different on weekends or outside working hours, for example by offering to send a fax or leave a voice message instead of connecting to the sales department.

beeline pbx process 05

Thinking about call center settings. It has to have a short internal number to allow external callers to connect to it. We should provide options for selecting operators among whom the calls will be distributed. The call center should also be able to handle contingencies, such as a long line of callers or an extremely long waiting time. There should also be statistics to show the efficiency of the call center.

beeline pbx process 06

Moving on to other PBX options.

One of the useful features of the dashboard is storing recorded calls, received faxes and voicemail messages. Calls, for example, need to be recorded for quality assurance purposes. They can be later listened to, studied, commented and downloaded as MP3 files from the dashboard. Faxes are displayed immediately on the page.

beeline pbx process 07

Getting the comments about the design from the client, making corrections and starting the final rendering of the layouts. Making the first approach to the main page and working on interface states.

beeline pbx process 08

Trying to use flat design but later deciding to go with a lighter version of the current design to maintain the corporate style.

beeline pbx process 09

Visualizing file storage structure.

beeline pbx process 10

Finalizing the main page and working on the pages for all PBX phone numbers and individual numbers.

beeline pbx process 11

After we decide on the style, draw several pages and prepare the main elements and states of the interface, the project is transferred to another designer who works on the remaining layouts.

beeline pbx process 12

Technical designer draws icons.

beeline pbx process 13

The client approves the layouts and assembles the dashboard. Carefully examining the result and writing bug reports.

beeline pbx process 14

Drawing missing details and states for the final version of the dashboard.

beeline pbx process 15
beeline pbx process 16

Order a design...