B2B Back Office software.
Senior UX/UI. Product Designer
UX/UI designer & the Product Owner
Vincle Internacional
Redesign the Back Office Platform.
2018.
First
The software offers SFA management to large companies like Unilever, AdamFoods, etc. With the Back office platform users can manage customers, products, sales, route planning, etc. Also, the company have a mobile application that is communicated directly with the Back office platform and is used for the employees of these large companies that must manage sales with supermarkets, carry out product monitoring activities and control work routes.
1. Problem
The software did not have the appropriate technology that allows being improved day by day, this meant that each change took too long to be applied. At the ux / ui level, the product was designed without any style guide or guidelines to follow, so it didn't count with consistency or any general components.
2. Approach
After working several years as UX/UI designer, I had the opportunity to carry out the work process of the redesign of such a complex product from zero. But in order to achieve this, a design development plan had to be presented, so the Product Owners and the CEO of the company could understand the steps that must be followed in order to control the visual (ui) part and the usability (ux) part of the future product.
3. Objectives
4. Layouts deffinition
In order to have control on all screens, we must start by setting up the layouts that will be used as a basis for the content. To achieve this, an arduous investigation of all the services offered by the product was carried out in order to define the first product layouts. After the investigation, 10 base templates were completed.
5. Navigation hierarchy.
The navigation hierarchy levels that the product will have based on the current content were defined. In this way, it was possible to start design on a solid basis and without breaking the product's consistency.
6. Components.
The new technology selected was Angular, with this it was considered that all the components were going to be of Angular Material library. The other decision was, not create new components unless it was really necessary. What we did was adapt the Material components to our needs. The goal was to save development and designing time. On the other hand, we had the decision to use Material icons to save time creating a new icon library.
7. Planning.
I prepared a brief roadmap of the work plan so that the new work process could be monitored. At this point, it was very important to make it clear that the construction and maintenance of a correct style guide are super important and it will take time to do it.
