Redesign of Naumen SoftPhone interface
Client
Naumen is a developer of software solutions for business and government.
We have known each other for a long time. Back in 2011, we made the interface for the SmartNUT service and the new version of the Naumen website. (Of course, these versions are now in the past, but we are still proud of them.)
Naumen approached us with the task to update the interface of their Naumen SoftPhone application for contact centers. They wanted us to make it more relevant, attractive, simple and convenient.
Previous design
Naumen SoftPhone
Naumen SoftPhone is a desktop application that allows operators and supervisors of contact centers handle calls, chat requests, emails, and many more. This app is part of the huge Naumen Contact Center integrated system.
The goals of the redesign
To change accents in the interface and simplify the scenarios of work of contact center operators;
To develop a design that can be transferred to the WebPhone module – an operator’s workplace in the browser;
To introduce the visual style of the Naumen brand into the design of the application.
Project Objectives
To revise the layout of the current panels and redesign the most critical ones;
To update the style of the current application;
And most importantly – to develop a design that is able to survive the interface metamorphosis in the future.
Naumen also wanted to test the hypothesis
The competitors’ applications are not emotional – such programs are all about functionality, they don’t have colour accents, branded icons, and fonts. But what if we make Naumen SoftPhone completely different?
Working process
The design went in parallel with the development of the graphic language – we tried to shorten the project’s time frame where possible.
Style and visual design were entirely on us.
(colour coding, buttons, icons and more)
(colour coding, buttons, icons and more)
We solved the interface design tasks with the team from Naumen in order not to lose sight of the details of a complex interface, without which SoftPhone wouldn't be as convenient and efficient.
Structure
First of all, we revised the interface structure and redistributed all application tools into 4 units.
1
Conversation control unit
2
User unit
3
Content Zone
4
Navigation
1
Conversation control unit
2
User unit
3
Navigation
4
Content Zone
Conversation control unit
States from call waiting to call completion
During the call, the operator sees the photo and the name of the interlocutor. In case if the phone book doesn't have their photo, the contact is assigned a standard profile picture.
The operator can manage the conversation with a combination of hotkeys.
No need to go into the settings for adjusting the volume of the speaker and microphone anymore.
The quick forwarding button opens a contacts search window. The operator can forward the call in a couple of clicks.
Phone book
The phone book is arranged according to the principle of cascade nesting. A contact can be easily found by categories and subcategories or via search.
Folders
The old folder icons didn’t fit the style, so we have reworked them while maintaining the internal colour coding of the Naumen system.
We have also updated the dialing window for calls within the team.
With the SOS button, an operator calls a supervisor to help in the conversation. The supervisor quietly joins the call and prompts the operator, like a prompter in a theatre. The person on the other end of the line doesn’t notice anything.
When the operator presses the SOS button, the supervisor sees a red icon next to their name:
The interface of the supervisor’s workplace is almost the same as the operator’s one, with the exception of one important function. The supervisor has an additional tab where they can monitor the work of all operators.
The operator can also join any call so that no one will know about it.
KPI unit
The top panel contains statistics on the work of the operator per shift and its current status.
The operator selects the status from the standard or prepared in advance options.
Navigation
The navigation is simple, as in the browser. The user moves from one section to another, switching tabs.
The number of tabs is final. The unnecessary tabs can be closed, and then opened from a drop-down list or by hotkeys. The arrows on the sides of the panel turn the tabs.
Content Zone
This is the main work area for the operator and supervisor. That is why we have selected a neutral and even meditative background for it.
Previously, SoftPhone used system interface components that are provided by the operating system by default. On the one hand, it allowed to work in any OS, on the other hand, it looked outdated. We used another component library that supports a more advanced design without losing cross-platform.
Chat
In SoftPhone, everything you need is at hand, even an internal chat. Here you can discuss business issues and chat with colleagues, while no one is watching :)
The application adapts to any screen, whether it is a widescreen monitor or a laptop display.
Implementation stage
Within a year of implementation of SoftPhone in the new design, the original prototypes underwent many changes, but our colleagues from Naumen managed to keep the chosen style. During the year we visited them to help with the implementation process.
Results
It is impossible to measure the effectiveness of the updated SoftPhone application, as it is a fragment of a huge system. The main thing is that we, together with Naumen, managed to carefully remove this section, update the structure and style and return it to its place without interfering with the work of the entire Contact Center system. Everything works like a clock – accurately and conveniently.
Client’s Feedback
«Over the past few years, the Naumen Contact Center team has been implementing a project of the Naumen SoftPhone interface redesign. We work in partnership with JetStyle.
At the start of the project, we conducted a survey of several hundred users of our product and identified urgent needs. We have made and implemented a number of important solutions:
At the start of the project, we conducted a survey of several hundred users of our product and identified urgent needs. We have made and implemented a number of important solutions:
- we have formed several scenarios for using a softphone;
- on the basis of profiles, we have formed a set of user roles, in fact –specialised interfaces;
- formulated the value of each program function for each role;
- conducted an interface design taking into account the value of the functions: distributed interface space, availability of each of the functions;
- made the softphone interface more compact, provided the saved space to third-party systems;
- improved the ability of the softphone to work in the omnichannel service mode: we enable contact centers to comply with modern service practices, to be ready to respond to requests in chats, on social media, via email or with a traditional phone call;
- improved display of statistics on the work with the program. Often, the work of the operator of the contact center is piecework, so monitoring your own indicators helps the operator to work more efficiently;
- we have made the interface more modern, both in terms of the used interface components, and in terms of the general form (proportions, shapes, colours, dynamics). In addition, we enable the user to personalise their application.
Our colleagues from JetStyle really managed to immerse themselves in the specifics of our product, helped to convert the user experience gained by the Naumen Contact Center team into an interface that makes the work of operators and supervisors of contact centers as convenient as possible. At all stages of implementation, we received not only formally completed work from the JetStyle team, but also an informal discussion of all decisions made.»
The Team
Alexander Golovanov
Designer
Maxim
Smirnov
Smirnov
Art Director
Evgeny
Bendin
Bendin
Drew folders
Mikhail Singayevsky
Manager
Alexander Zaitsev
Prepared the case study
