In this article, I wanna share my experience in Tera’s UX Design course. During the course, my team and I were designated to a real problem, brought by a startup. The startup provides a Virtual PABX service with Softphone, call APIs, and graphical reports as well as recordings for their clients.
What do we need to do?
The challenges that the founders brought to us were:
- How to use UX Design process to improve the overall satisfaction with the product?
- Which reports are more relevant for each client?
- How to improve the visual hierarchy?
- How to separate the Real-Time report from the Historical report?
Competitors and Benchmark
Looking at other companies that provide the same service, we identified a few major points that we could work on to greatly improve user experience:
- Other companies give more configuration autonomy;
- It’s difficult to understand the graphs in the reports;
- Other companies have different access per user;
- Important features are implemented but hidden in several layers of menus.
We started our research by making the first contact with the startup’s clients to understand if the pains that the company had were the same as their users.
- All users said the reports and recordings were the main features;
- Some users complained of not having autonomy in some features (such as change AUR, add individual lines, etc);
- Most users don’t understand the difference between the reports;
- Some users suggested having filters inside the reports;
- Most users said the customer service is good and helpful;
- All companies need IT staff to configure softphone.
After the interview process and platform study, we had some insights related to user experience.
Some problems found in the original platform:
- There is no visual hierarchy;
- The website uses 3 different typography sets;
- There are too many reports (15 in total) with redundant information;
- Important menus are scattered in different areas;
- There is no color pattern;
- The reports contain too much raw data and the graphs could be more visually informative.
In this stage, we decided to make a sitemap so we could understand better the user’s paths and the platform’s structure. Thereby, we found out that there were a lot of unnecessary steps.
After we understood the users needs and had made the sitemap, we defined the experience map of Real-time report.
After the interviews, we found out two personas for our project. The customer service attendant and the customer service coordinator. However, we wanted to focus on the platform itself and not the softphone, thus we decided to define the coordinator as our main persona. They use the platform to analyze the behavior of the attendants through the reports and monitor the attendances in real time.
The new sitemap
We noticed that the users had difficulty with some commonly used features. The reason for that was either because they were hard to find or because they were complex to use. Therefore, we simplified the functionalities and developed a new and less complex sitemap. Along with that, we gave more autonomy and tools to the client by bringing a set of configurations that already existed in the back end to the front end.
The information prioritization was a big problem so we had to redesign a few areas of the website. Our challenge here was to improve user experience and flow without creating discomfort for existing users.
Main changes made in the structure:
- We decided to organize all the information in one area, the header. Thereby, we put the reports, properties, softphones, balance of the account and account configuration in one place;
- We added a Monthly summary report to our home so when the coordinator enters the platform, he will see the company’s improvements or problems. This area will be displayed in visual graphs and charts;
- We simplified all the 15 reports into 4 reports. This made more sense since most reports had similar content. We also separated the Real-time report from the other reports so the user can find it easier;
- We added filters that didn’t exist in the originals reports;
- We added an AUR sub-menu to give more autonomy to the user. By accessing it is possible to enable and personalize the AUR;
- As we noted from our user research, only attendants use the softphone download and the key guides. Thus, we limited them to the softphone menu.
High Fidelity Prototype
After we defined some screens and made some tests with non-users, we collected great feedback and started the development of the high fidelity prototype. For that stage, we used the logo colors but we kept the elements in lighter and more modern tones. This whole final step was made in Adobe XD.
Main choices made in the layout:
- Use similar colors to the original platform so it would be easy for existing users to identify the elements;
- In all fields, we added labels for better accessibility;
- We defined the primary and secondary action buttons to facilitate the user’s understanding of the platform;
- We selected Roboto as our only typography and used it’s variation to organize the information;
- We used Google’s Material Design to easily complement our design.
See the published prototype in here.
As a next step, I think it would be very interesting if we could come back to the visited companies and perform a new usability test. Thus, we would be able to understand which necessities were solved and what still needs to be improved. Then, define what elements would be in the MVP.
Besides all of that, I’m sure this is not the last step. During this process, my team and I had a lot of great ideas. But, due to the lack of time or because they were not our priority for this initial stage, couldn’t be included in the final presentation. However, it would be great to implement them in a future step.
This was a very challenging, tiring and, at the same time, deeply enriching project. During our process, we discovered a few other problems that hadn’t been brought by the founders, such as accessibility, flow, and hierarchy problems.
It was really interesting to see the different perspectives between the user and the founder’s needs, and how a user experience design must balance between both needs.
Hope you have enjoyed this article! If you have any questions or feedback, please feel free to leave a comment. Thanks 🙂