A Design System built for a construction project management ERP
GRUA DESIGN SYSTEM
Overview
Sienge is an ERP developed by Softplan that helps the construction industry management. The ERP has been on the market for over 30 years and has a front-end development framework developed by the company itself, which ends up causing some problems such as: difficulties in adopting new technologies; attractiveness to new developer talent, outdated look & feel. With this scenario in mind, I carried out an internal discovery to analyze which paths the design could follow to help the business unit and, consequently, the ERP users.
Company: Softplan Planejamento e Sistemas
Product Type: Design System
My Role: Lead Sr Product Designer
My Role
At that time, the design team only had me and a coworker Sr. UX Designer. All the discovery was driven by me, while my colleague contributed with validations and another designer's external view.
Results Achieved
Technological Evolution
Through the design system, it was possible to migrate from an obsolete front-end tech, to React.
Lower Rework rate
With a style guide and components already defined, we decrease the rework rate for devs and designers.
Impact on Revenue
With the decrease in rework, we have a direct impact on the company's EBITDA.
Early Stages of Discovery
Benchmark
The scenario made me realize that we needed to look at what the front-end trend was in the market.
Interview with stakeholders
During interviews with developers and PMs in particular, I noticed that the front-end problem went beyond the aesthetic issue. Our developer turnover was directly impacted by technology, as no one felt happy and fulfilled in developing interfaces with few resources and visibly outdated. It was also very difficult to hire new developers, because in interviews people asked themselves:
"And if I leave the company, what do I do with that knowledge?"
"Will I be able to reposition myself in the market with what I learned from the frond-end at Softplan?".
For these and other reasons, the only way out for the company was to pay above the market to retain/hire developers, which ends up impacting the business unit's budget.
Strategy and Research
The market pointed out to us that the safest path was to migrate our technology to React, but without the vision of our developers, the project would lose strength. That's when I decided to run an internal quantitative research, followed by a DOJO.
(If you were to choose one technology, which would it be?)
Developer responses
DOJO
I conducted the DOJO dynamic with 8 developers of different levels. DOJO consisted of 4 tests on 2 frameworks, React and Vue.js. At the end of the process, the developer should have a basic interface with an input and a button, using a componentized typography.
Discovery Conclusion
After the market analysis and also with the discovery and internal dynamics, we came to the conclusion that the best option to develop the Design System was React.
Even though React has a higher learning curve compared to Vue.js, we come out ahead on points:
Great player maintaining the framework
Greater adherence on the market
More uses and downloads
Greater reliability
Greater consistency
Hands On
Now it's time to start talking about the Design System. Below I show the entire process I went through during the development of the Design System, highlighting the main milestones.
Supply-chain Product Workflow
This deliverable was essential for us to know how to start mapping the UI components.
Sketch of how the development process would look, involving a Design System.
At the moment, we aligned with the developers the expectation of when each professional would have to work on the project.
Project Schedule
This is the schedule built by me and validated by the CTO. The main activities are:
Mapping of components in the ERP;
Internal interviews;
Behavior mapping;
User interviews;
Migration from AdobeXD to Figma;
Benchmark of interfaces; Prototype and specifications of new components.
Visual Style Guide
Below we can see the visual style guide of some of the components that were built. I put just a few examples to illustrate, if you want to see all the components, I made a copy translated into English, which can be viewed through the link: https://www.figma.com/file/74Cnrwz6Gj47wne4J0P4EY/Design-System---Styleguide%26Components?node-id=0%3A1&t=mas1rP9xWl05U5DQ-1
Code
With the components in hand, the team of developers begins the implementation. We named our Design System GRUA (Crane in English), as it refers to one of the main elements of civil construction. Below are some prints of our system in production.
Interaction Samples
Released Interfaces
These are interfaces that were released in ERP and are currently on the market.
