United Group CRM app

At-A-Glance

I am in charge of steering the design process for the United Group's CRM web app as the UX/UI designer. In the past couple of months I have worked alongside the United Group’s company representatives and DigitalCube’s Project Managers to bring the customer relationship management application to life, which will replace the SAP system currently used to manage users, customer profiles, orders and payments. To date, I have completed the design for user management, customer creation, and order capture processes, along with crafting components, flows, and animations in Figma for multiple prototypes. Throughout this process, I have maintained productive communication and held regular status update meetings with the client, management, and the development team.

Timeline

June 2023-present

Platform

Figma

Material Design

My role

UX/UI Designer

Collaboration

Client representatives

2 PMs

1 Team of SWEs

Problem

United Group, a leading telecommunications and media provider in South East Europe, understands the importance of staying competitive in the dynamic telecommunications industry. However, their current SAP solution suffers from complex functionalities, a confusing and outdated user interface, and limited user-oriented analysis presentation, making it time-consuming for users to become familiar with. Consequently, its continued use is no longer feasible.

Solution

The increasing need for a user-friendly CRM app that simplifies workflows for managers and agents, boosts sales processes, drives revenue growth, and ensures compliance with GDPR regulations has become evident. Over the course of a couple of months, I have developed the design for a SaaS CRM software tool named "Sophie app," focusing specifically on its user, customer, and sales management features. This design process was guided by insights from user research, business requirements, and legal and privacy policy regulations. The design underwent multiple iterations based on feedback received to meet the needs of stakeholders, various United Group companies across different countries with diverse business models, and end users. The app's designed features are presently undergoing development, with continuous design refinements focused on enhancing the user experience. The remaining features are scheduled for creation at the appropriate time.

Process

Challenges

1 - Multicolumn or single-column form

Multicolumn PROS

Incorporating 2–3 inputs on a single line poses no issues if those inputs logically pertain to the same entity (such as address numbers)
Using multicolumns proves advantageous when dealing with numerous inputs that require completion, because even segmented, these inputs occupy a considerable amount of space, which would otherwise require extensive scrolling

Multicolumn CONS

Extensive forms with multiple columns can result in misinterpretation and errors in user input due to differing reading patterns among users;
There is a distinction between “some lines having 2–3 fields per line” (an acceptable practice in certain cases) and an overall “two-column form layout” (generally problematic and not recommended)

Single-column PROS

Simplifies and accelerates the process of scanning, completing (completion time is on average 15.4 seconds faster), and reviewing form details;
Avoids misinterpretation and user input errors due to varying reading patterns among users

Single-column CONS

Single-column forms had to be arranged side by side to accommodate more inputs visually, which presented a development challenge of requiring the shorter column to increase in height to match its taller counterpart;
Adding a third single-column form below the two arranged side by side may require fixing the form height and implementing independent scrollers, further complicating the situation

CONCLUSION

Considering the need to prioritize other essential development issues within the project, the overall complexity of stacking single-column forms side by side became overwhelming. The possibility of having a single column fill the entire width of the screen was ruled out due to concerns that it would result in inefficient use of space (especially on bigger screens) and require excessive scrolling, given the numerous required inputs in these forms. Hence, we opted for the multicolumn form for the MVP, ensuring that there are no more than two columns in a row, except when the inputs naturally form a single coherent entity. This choice was made to address the issue users encountered with forms featuring four columns in SAP, which resulted to be too confusing for the users. Additionally, transitioning to two-column forms will help minimize excessive scrolling and make efficient use of available screen space. Moreover, explanatory icons were integrated into input fields to facilitate easier and quicker form scanning, while aiding users in remembering the position of specific fields. Evaluating the time taken by users to complete the forms once the app is launched and considering their feedback will assist us in determining whether our decision requires further attention or additional iterations.

2 - Product configuration in the ordering process

Currently, product configuration in the SAP system used by United Group is performed manually, relying solely on the sales agent's willingness and expertise to combine various add-ons and devices. However, stakeholders are dissatisfied with the number of additional features sold during product configuration, as sales agents often skip non-mandatory configurations due to their complexity. Taking into consideration the requirements of stakeholders, researching similar sales processes in other companies/apps, and interviewing sales representatives from the Bulgarian company 'Vivacom' (a part of United Group), our product design team developed three different solutions to address the product configuration issue.

Solution No. 1

The initial solution focused on guiding the user through each potential additional feature with the customer to maximize sales. However, it became evident early on that requiring sales agents to perform these repetitive actions, especially when customers typically only want the original package, is unnecessary. Additionally, there was a need to visually highlight mandatory configurations that the sales agent must set up before proceeding. While the client and sales representatives found the fixed offer summary on the right side beneficial for clearly distinguishing which product package is currently being configured, they felt that all the offer details were diverting too much attention from the main focus of the screen. Furthermore, the client expressed dissatisfaction with the fact that editing specific products items occurred on different pages when the 'edit' or 'add' buttons were clicked.

Solution No. 2

The second solution was developed in response to the feedback received on the initial solution. We segmented the configuration process into three categories: add-ons, devices, and additional data. While the sales agent was still guided through the process with the aid of a stepper on the left, the number of steps required was reduced, and enabled/disabled steps were clearly distinguished. The entire product package was displayed in the center of the screen, making it easy to identify mandatory product configurations with a thicker border and red color. The offer summary remained, but only included essential information, with additional details incorporated into an accordion. Editing specific product items now occurred on the same page, within an expandable sidebar accessed by clicking on the relevant product item.

Feedback from the client and sales representatives indicated that the entire offer summary was redundant, given that product packages were displayed in the center of the screen, and prices could be relocated elsewhere. While they were generally satisfied with the updated representation of the product package, they requested us to explore ways to integrate the stepper and product package to enable users to instantly visualize all available and required steps.

Solution No. 3

The third solution was developed with all the previous requirements in mind. With the removal of the fixed offer summary on the right, pricing was relocated to the bottom sticky element, and a stepper was introduced in the upper part of the screen. This stepper helped the sales agent keep track of the remaining steps to finish configuring all product packages chosen by the customer. Several adjustments were implemented to enhance the visual aspects of the product packages, including altering label colors, restructuring the hierarchy of elements, and adjusting font weights, all aimed at better aligning with the updated client requirements. Additionally, improvements were applied to the content, such as presenting individual prices, specifying individual fees, and arranging buttons to add add-ons and subsidy devices side by side, resulting in the removal of the left-side stepper. Furthermore, the product item properties were revised to incorporate a visual depiction of each item, and they were transitioned to a single-column format due to space constraints, preventing the utilization of a multi-column layout.

Colour library and component adaptations

While working with a design system for a specific project, it's common to require manual adjustments to existing components. However, in this case, issues arose when choosing to integrate the Material Design 3 color system and components into the design. When attempting to implement this design, it was discovered that Material Design 3 was not yet compatible with Angular. Consequently, there was a need to make significant adaptations to the components and color library to align with Material Design 3 guidelines while continuing to use Material Design 2.

Product successes

The existing design of the Sophie app has effectively aligned with the requirements of United Group's stakeholders and sales representatives, as well as with the diverse business models of various United Group companies across different countries. Particularly, positive feedback was received from Vivacom, which is the first company to launch the Sophie app. All involved parties have provided excellent feedback on the features and workflows designed thus far. We are closely monitoring the development progress and intervening as needed to address any required adaptations or new challenges that arise.

What I learned

Being in a leadership role within the design department of a project of this magnitude and significance has allowed me to develop strategies for handling more substantial and intricate design challenges. Through this experience, I've learned the importance of prioritizing tasks, breaking down large projects into smaller, manageable tasks, and exercising patience, especially during periods of high workload and stress. I've also come to appreciate the iterative nature of design—a process that is essential and should be embraced rather than avoided. As designers, we often rush to reach the final solution as fast as possible, sometimes forgetting to truly appreciate the design process, make mistakes in our pursuit of a better solution, gather feedback, learn from it, and then iterate further.