SoftBank is a large, multinational telecom company based in Japan. The company is known for its leadership by founder Masayoshi Son. It operates in broadband, telecommunications, e-commerce, internet, technology services, finance, media and marketing, semiconductor design, and other areas.
As the world is moving towards “mobile,” SoftBank felt to develop a mobile application to reduce the number of traditional desk phones and replace them with mobile apps. They asked Cisco for a mobile communication app with BroadWorks backend that supported call features settings. I was asked to be the design lead for this project, fully responsible for the UX design and UI Design team of 3 members.
“ConnecTalk” is SoftBank’s communication service that provides FMC and cloud PBX as one service. It is a perfect calling environment according to the customer’s usage environment and customer requirements.
We planned to design and develop a whole app with full capabilities; SoftBank wanted to release the app ASAP. They wished to make it available to their customers on a priority basis. So we decided to create it phase-wise and divided it into 5 Phases.
Problem Statements
A common problem that desk phone users face is missing important calls while they are out of the office or rooms. Sometimes they miss the ring while they are in some meetings. When they miss the call, they might end up rescheduling the call, or sometimes they end up paying a high cost of delay in the process of business activities. They always want a solution that they should not miss the calls and will be answered by them or respective team members whenever they are out of the office. To solve this issue, they need a solution that helps them complete the call-in time so that the business needs are taken care of at the right time.
Goal
A well-designed application is stylish and easy to navigate and the best replacement for a desk phone. The primary goal is to design and develop a mobile application that provides easy access to the fixed phone functions (ex: Call Park, Call Pickup, Call Transfer, etc.) while removing any pain points from the traditional fixed phone user experience. Also, an effective and intuitive app that will help the user to increase efficiency.
- Get things done on-the-go
- Easily navigate through the app
- Handle calls quickly and efficiently
UX Design Process
User Research
The first thing that came into our mind was why the product owner wanted to replace the desk phone with a mobile app. So we first interviewed the product owner to understand why they want to build the particular app that replaces the desk phone and how it’s affecting their business. Then to conduct the user interview, we did some research and prepared some questionnaires.
To build empathy, we interviewed a couple of users. Most of them are Business Officials, Techies, Sales executives, Support Team, and Software Engineers.
Once we conducted the interview, we were able to understand the issue and problems faced by the users. After completing the interview and analyzing the information, we got some quantitative and qualitative data.
User Statements
After interviewing 20 people from different occupations, we realized some joint problem statements for many of them. Most of them are business-related. Some problem statements are as follows:
“Missing business calls while we are away from the desk.”
“There is no alternative for a desk phone.”
“Number of calls unattended are increasing as the customer base is increasing.”
“If we have an option to attend desk phone calls on mobile, it will be helpful.”
“It will be good if we have some solution that helps us attend desk phone calls while traveling or commuting. “
Affinity Mapping
After interviewing different users and product owners, we had a good source of quantitative and qualitative data. Then the team works together to analyze the data to understand the user requirement, pain points, goals, and motivations. Through affinity mapping, the whole team understood the issue and was able to find the solution for the users.
Core User Needs
After the interview and data analysis, we concluded that some core user needs have to be addressed. A few important user needs are mentioned below:
User Persona
Since SoftBank is a large multinational company with many different types of clients and employees, their persona had to be generic and wide-range. Here we will discuss two different possible personas they are Sales Representative and Regional Manager Assistant.
Sales Representative
Regional Manager Assistant
Sitemap
I have posted two sitemaps to show the different user modes for the application. This is the sitemap we have created to authenticate the user flow of the application. It shows the complete information architecture of the application. This application has two user modes Office Worker Mode and Remote Worker Mode.
Sitemap for Office Worker Mode
Sitemap for Remote Worker Mode
Low Fidelity Wireframe
Usability Testing
After completing the Low Fidelity prototype, we conducted usability testing. It helped us to understand the intuitiveness and navigation through the app. Also, it enabled us to check the versatile capabilities and usages that are useful to a wide range of users.
- In contacts, we made a change in the favorites tab. Here the change made was “tap to contact details” to “tap to call.”
- We removed the hamburger menu and consolidated the item into a single button tab called settings.
- We changed the design /interaction only to show the buttons when the widget is expanded.
- In search, we included a tab to filter through search results using top tabs.
- Included tabs in call logs to filter incoming, outgoing, missed, and transferred calls.
iOS UI Design Screens
Typography and Color
Splash and Login Screen
Below are the designs we created for Softbank ConnecTalk. In this, we are displaying Splash, log in and log in with the password.
Contacts Screen
Below is the design we have created for contacts flow. Here, we are display contact without permission, contacts, favorites, removing contacts, search contact, and contact details.
Dailpad Screen
These are the designs for the dial pad. Here in this, we are showing a dial pad for Office worker mode and remote worker mode. A few screens are specific to office worker mode, such as call pick-up, call park, and call retrieve.
Call History Screen
Here in this screen, to solve the user problem of sorting the calls, we have included the tabs view where the user can view calls as per outgoing, incoming, missed and transferred calls. Also, by selecting particular contact, the user can see a detailed call history with the person, including the number of calls. Users can mark the number as favorite. Also, to clear a particular history user can slide the contact towards the left to remove it from call history.
Settings Screen
The setting screen is the central part of this design as it has a lot of functions and settings options to be taken care of on-screen. I have included significant screens like the Setting page, Call forwarding screen, Network authentication, and Logout.
Active Call and Call Transfer Screen
In the below design, I have included some of the significant steps in the active call screen, such as Active call, Call Park screen, Transferring a call to contact or favorite, Transferring a call to a number, and transferring a call screen.
Widget Screen
Here is the design for Widget. In this design, I have included three states of Widget. The first one shows the Widget when the app is logged out, the second one shows the Widget with the active call, and the third is the comprehensive view for the active call widget.
CAPABILITIES
Keeping in mind the 2 personas, there were many user stories as per the personas requirements. The application helps the user control the call on hold and allows the user to transfer the call. Other features are contact, contact info, app info, call logs, Dial Pad, Call park, call pickup, call forwarding, logs for support, terms & conditions, custom prefix, etc.
CHALLENGES
As the project had a vast scope, it was planned in five phases; there were a couple of things that I had to keep in mind while designing:
- Bilingual app: This app was designed in both English and Japanese. For me designing in English was good, and I knew how to do it. But it was a little difficult for me as I don’t know Japanese when it comes to Japanese. Also, the English and Japanese characters are different and Japanese characters are complex and dense, taking more space than English. So, It wasn’t easy to manage the design with Japanese characters. The major challenge was to keep the consistency in both the designs using two different characters.
- Updates and upgrades in the app: Earlier, the app was planned to build fully and released. Later, in discussion with the client, we realized that they need the basic app to be built ASAP and a few features to move to 5 different phases. It was a considerable challenge to design the app to be flexible to accommodate feature and screen changes as per the phase requirements.
- UX and UI Elements: In the initial stage, it wasn’t easy to design the UX and UI, keeping in mind the future requirements. There were many UX and UI changes in each phase, and we wanted to reuse the same file with the updated requirement. So, Keeping in mind the UX and UI are designed in such a way so that the elements can be rearranged and reused as per the phase requirement.
- Minimal branding: Softbank has provided us with very minimum branding like the brand colors and logo. It was on us to design the whole new branding guidelines for the particular app. Our team created new icons using iOS and Android Standard fonts and completed new branding guidelines using the available resources.
- Time Constraint: The major problem that I was facing in this project was time constraints. As I was directly reporting to my manager in the US, and the client was from Japan. So, the internal team meeting usually happens at US time, and the client meeting happens in early morning India time.
TAKEAWAYS
It was quite a good experience for all of us as we replaced a hardware device with software. The main goal was to solve the business problem by making an application that replaces the desk phone. The team worked together to understand the user problem and then understand the key features of a desk phone. As a result of this working together and brainstorming, we developed an intuitive, easy-to-use, and easy solution for a desk phone replacement. This solution helps the users to attend the calls remotely and effectively. By this method, the user could attend their desk phone calls while commuting, traveling, or away from the desk. This way, we reduced the number of missed calls when the users were away from the desk. By adding network authentication, we added a new level of security where the authorized user can log in by authorizing the network so that the authorized personals can use the app.
All of their employees and clients could use this application remotely for business purposes, and the client was pleased as this product helped them in pandemic by showing good growth in business. Even it enabled them to increase productivity while in the lock-down period.
This project is even a turning point in my career. In Phase I, my role was working as an associate User Experience designer. But from Phase II onward, they gave me the chance to handle the project till the end. In the initial stage, I struggled to manage the project because of the difference in time zone and designing the project as it is designed in English and Japanese. Today we have completed the project with a happy client. I lead 4 phases out of 5, which is an outstanding achievement for me, and the project is now available in-app store and apple store. Now, the client even has launched it for their clients.