About the client
FLIR Systems (currently part of Teledyne FLIR) is one of the biggest thermal imaging cameras manufacturer in the world.
The challenge
FLIR in order to test their devices and to provide new features captures huge amount of visual data (videos, photos). Some of these features involve machine learning, which must be trained with accurate data in order to return correct results.
Data preparation is a tedious task, involving careful inspection performed by teams specialized in such task.
In order to address those teams’ needs, an internal tool with intent to gather, process and categorize the data has been created. Initially it was a small project, which over time grew into a a serious application, however lack of proper design started to take its toll.
Goal
Refresh the design and optimize an existing application, by:
- Rethinking product’s purpose, refactoring existing features and proposing new ones
- Preparing new, intuitional user interface providing better user experience
- Aligning the style with internal company’s styling guidelines
- Improving the performance, to enhance processing teams’ productivity, as in extreme cases even basic operations would take tens of seconds
Technology stack
React.js, Node.js, ApolloGraphQL, RabbitMQ, AWS (EBS, SES, ECR).
The process
We have started with adding minor, awaiting improvements and bugfixes, to acknowledge ourselves with current solution and to learn the business domain. In the meantime, we cooperated with a UI/UX designer to produce a new look and think of new features.
Additionally we have optimized GraphQL queries sent in the requests to the server, to limit the amount of data returned, thus reducing the response time, in certain cases up to 3x.
Once the first designs started to become available, we have established following order of actions:
- Replacement of basic components with the newly designed ones, ex. buttons, dropdowns.
- Replacement of core application elements, ex toolbars, navigation bars.
- Layouts redefinition with basic refactoring of the old elements, which would have to be rendered in the new layout and rendering optimization, by performing it only when it was necessary.
- Replacement of remaining, less important elements.
- GraphQL queries cleanup to limit unnecessary data transfer even more.
As the process went on, more developers had to be involved, to provide pixel perfect implementations within a reasonable time.
Ultimately we have managed a team of a Project Manager, UI/UX Designer, 4 developers and a tester.
Result
After 15 months of work the customer received a brand new frontend application with a fresh, organized UI following company’s internal styling guidelines and performance improved by up to 300%
