Problem:
During the development of VT-Platform, the challenge arose of not having a self-management channel within the platform that would make it easier to adapt the client’s product to the specific stage of the construction project it was in.
At the same time, the lack of a control dashboard became evident one that would allow users to understand what products they had without going to the marketplace and to extract data from their project, especially during phase transitions in construction.
This situation limited the scalability of the SaaS and created friction in the customer experience.
Research
The first step to address this problem was to carry out a thorough benchmarking process to identify and extract best practices in the development of e-commerce platforms for SaaS.
Subsequently, interviews and surveys were conducted with both partners and customers, with the aim of gaining an in-depth understanding of their needs and expectations.
Based on the information gathered, the following objectives were defined:
The marketplace must allow subscription management.
It must offer the possibility of making purchases by project phase.
The dashboard must enable data export from the platform in simplified formats (PDF, Excel, among others).
The dashboard must be adaptable and flexible to the user’s needs.
Finally, after the business validation, low-fidelity prototypes were developed to facilitate meetings with the development team, in order to obtain technical validation.
Subsequently, a high-fidelity prototype was created, and a final joint meeting was held with the Business and Development areas prior to implementation.
E-commerce
The main page is structured into three well-defined sections:
- Initial section: highlights key solutions and the most recent releases.
- Middle section: showcases the most widely used or popular products.
- Final section: allows users to explore and select products according to the stage their project is in.
This organization facilitates navigation, optimizes the user experience, and ensures efficient integration with Bootstrap.
Additionally, product pages were developed with a higher level of detail, designed to thoroughly explain the scope and features of each solution.
Subscription management
The user can choose between three subscription plans:
- Starter: provides access only to the viewer in its different modes (Web, AR, VR, and Mobile).
- Professional: includes all the features of the Starter plan, access to the marketplace, and extended capabilities. It also allows the acquisition of additional solutions with a monthly fee.
- Business: offers full customization of the platform, tailoring it specifically to the needs of each company.
To manage the Professional and Starter plans, a section was created that allows users to add or remove subscription-based solutions for the period of time they choose.
They also have the option to switch from Professional to Starter to optimize resources during phases when such a broad capacity is not required.
This screen can be accessed from the profile menu at the top right.
Control dashboard
The control dashboard allows users to visualize the status of the products and use them as an information source. It is structured into two main sections:
- Left panel: displays the specific packages acquired. When selected, a particular dashboard corresponding to each solution is shown.
- Right panel: offers users the possibility to interact directly with the data.
In addition, the dashboards are fully editable, allowing users to reorganize the order of the sections and define which sections they wish to display, adapting to the needs of each company.
Dashboard components:
For the construction of the dashboards, 24 components were developed, which make up the different sections.
Donut charts, bar schemes, export buttons…
Each section was designed with a specific visualization objective, aimed at addressing a concrete business need.
For example, one of them allows comparing the resolved errors against those that still remain open.
To speed up development, the decision was made to use Google Charts, since it offered suitable integration with Bootstrap, the technology being used by the development team at that time.
As a result, an agile way of building sections with clearly defined objectives was developed, which made it possible to accelerate the implementation of the dashboard.
The result
The marketplace facilitated user access to product purchases, freeing up to 40% of the commercial team’s workload.
VT-Platform established itself as a SaaS solution, allowing users to extract data and integrate products into their workflows, increasing versatility and efficiency.
Usability improved, as users gained a better understanding of their plan and what they had subscribed to. This translated into higher satisfaction and greater adoption of features.
Main technics in this project:
Prototyping and Wireframing, Interaction design,Accessibility (WCAG), User research and analysis (Google Analytics, Hotjar, Test A/B, Interviews…), Responsive design, AGILE, SCRUM and design thinking, User-centered design (UCD),Design systems (Libraries, tokens, documentation…), User research techniques and analysis (Google Analytics, Hotjar, Test A/B, Interviews…), AGILE, SCRUM and design thinking
In this project, a corporate website was also designed.