The making of the Beeline Cloud PBX service interface

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.

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

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

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

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.

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.

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.

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.

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

Visualizing file storage structure.

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

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.

Technical designer draws icons.

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

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