The client has 30+ technology products in the car retail space. They had tried different test automation frameworks in the past but were not happy with them for various reasons. Some of these frameworks lack in test script reusability, while others lacks in good reporting facilities. Moreover, they had to use different frameworks for different types of testing like mobile app testing, performance testing, and API testing.
The client was hence building a unified test automation framework based on Robot test framework that could be used as a central place to run all types of tests across all their technology products and tracking of their quality metric.
The client was looking for a front-end development vendor who could help create a web portal to use this framework. Since the framework is a unified one-stop solution running any type of test across all the technology products of the client, the framework has inherently complex and has a very deeply nested data model.
The clients were looking for a frontend development partner who could deliver the web portal meeting the following objectives-
The portal should be abstract away the complexity of the automation framework’s data model and provide a simplified interface to use the framework.
The framework is integrated with the Report portal to show test reports. The portal was expected to provide seamless navigation to and fro to this report portal.
The framework is integrated with a powerful analytics platform- Tableau to generate quality metrics from the test results. The portal was expected to pull these quality metrics from the tableau and display them on the dashboard.
We started with learning the data model of the framework and business use cases of different entities. We also learned who would be the users of the portal and what would be their purpose for using the framework.
Based on this analysis we started building wireframes and defining user stories. We did this activity module by module so that we could start the build of the module as soon as it is groomed and ready. These user stories and wireframes are presented to the product owner to capture his feedback. The heavy lifting of designing a simplified interface is completed at this stage.
The technical approach is designed and documented where necessary before assigning the module to the developer for building. The build has been completed with such a competitive timeline because of the clarity of requirements and technical approach created at definition and design stages.
As a first step to build the interface of the portal we have done a deep dive into who would be using the portal and what would be their purpose for using this portal. This helped us evaluate user expectations from the interface.
We researched interfaces of various successful technology products to find out how they designed interfaces with different data model relationships.
We designed the interface as wireframes, where it is easy to demonstrate to the product owner, collect his feedback and make changes accordingly. With our expertise in frontend design and details research, we have been able to close the interface design in just a couple of iterations.