The Problem

Organisations wanting to collaborate need to share their data with each other securely and efficiently, however depending on the type of system, this can take a long time due to miscommunication, siloed ways of working or analogue processes.

The Solution

AIR Bridge leverages Robotic Processing Automation on top of a federated learning software (LLMs) to automate repetitive processes across boundaries in a safe and secure manner. It gives uses a dashboard with key stakeholders in each organisation that oversea the processes and are alerted to the RPA’s progress.

My Role

UI Design Frontend Development UX Research design system component library wireframes clickable prototype High Fidelity mockup

Tools used

Market Research

Partners

Federated learning was valued at
127 million
in 2023

RPA Market is estimated to be worth
3.7 billion
USD in 2022.

Expected to grow by
10.6%
by 2028.

Competitors

Designing AirBridge

The initial team consisted of myself (Lead UI/UX Designer), our Full Stack Developer and our Product Manager. We started the process with a vague idea of the system. We used low fidelity wireframes to kick off the conversation and to validate our understanding. Once we all agreed on the general understanding, we moved to high fidelity wireframes, which included more detailed information, in order to move on to the mockups

User Personas

The wireframes helped us as a team test our understanding about our user personas. Given AIR Bridge is a B2B software, our users will be representatives from each respective organisation. The two most important will be technical and project admin.

Design System

Design assets and styles were built on top of Vuetify design library, as this was most compatible with the existing codebase, and updated with certain functionality to meet our needs.

I not only updated the Figma component library but I built these components in Vuejs and linked linked the design system to Storybook.

Roboto Medium

Roboto regular

Roboto light

High-Fidelity Mockups

After multiple iterations, we finalised designs to the following screens. Some of the key functionality of AirBridge includes backend operations that are not visible to the user. Status indicators are some of the most useful components in our library as they communicate the progress of the RPA robots.

Results

We continued to iterate over this product by building a working Proof of Concept connected with UI Path, built on Vue.js with a PHP backend.
The UI included few tweaks, but the most important output was to consolidate all the components by building the component library. I used Storybook and Vue 3 for this, including Chromatic as part of my CI/CD pipeline.

Thanks for viewing!