Digitalize existing paper works into digital web form
ST Engineering Aerospace has capability to do maintenance and reparation of various type of aircrafts.
Unfortunately, they're still using paper works to do the check before conducting the maintenance. Here is the challenge, how might we digitalize 15+ required forms and 8+ approval line from manual flow (paper) into digital web with a lot of data that need to be handled also.
*Data that shown on these mockups are dummies.
Summary of Project
Project Duration
5 months (Jul - Aug 2025)
Rapid prototyping for first 2 months
Team Member
Andrian Cedric (UI/UX Designer)
Saraska Putri I Lango (UI/UX Designer)
Tools
Figma (Design and Make), v0.dev, ChatGPT
Solving the Right Problem
We start with understanding the user's pain points
We have conducted numerous meeting with main users from ST Engineering Aerospace to gain clarity of their pain points of current system's UI/UX design.
There are 2 main pain points of current workflow:
Paper-based form and human error risks
Too much paper-based form leads to difficulties in organize and track the forms. There’s disadvantage in storing and tracing old forms, sometimes can be missing through the process
No data linkage/synchronization.
Engineers feel painful to find and search the linkage of one data to another; they need to go back and forth to Workshop. If one engineer buy one thing, the other engineer may don't know the purchase because no linkage of the data in current flow
Solving the Problem Right
We continue with solutions
After defining and mapping the user needs, I moved into solution validation through Wireframes and Prototyping—built low-to-high fidelity wireframes to validate layouts and flows.
We also conduct usability testing to iterate our design with the users. We tried to use AI-tools such as Figma Make and v0.dev which can developed live website as prototype based on created mockups and prompt. These findings will be the basis of later development.
The design simulates the workflow of Engineer to create a capability study form (10+ forms) and the approval role to approve the form (there are 5+ approval role that need to be handled).
Weekly Meeting and Site Visit
To ensure our understanding aligns with user's and business' needs, we're conducting weekly meeting with ST Engineering teams and visited the site at the beginning of the project to gather more information and understanding of daily work and their pain points.
Design system used in this project
We created a custom-made design system, heavily based on React as the main framework of e-CSR Development. These ensure every components and assets are consistent and standardize to be developed later.
Engineer Dashboard
In this dashboard page, the Engineer expected to see all the CSR forms that they have created or need to be filled.
We decided to show the CSR forms in card to enhance visibility and reduce clutter in list view. High priority CSR will be located at the top and the Engineer can see another form by clicking "See More".
Status bar are included in each CSR to informing the Engineer about the completeness of form filling.
Create New Form
This is a page for the Engineer users to create a new capability form for do the maintenace. There are some fields that user need to fill it out before they can submit the form.
CSR Filling Form Progress
After creating a new CSR, the Engineer have this page to see and know the progress of form filling. The Engineer has to fill out all the form before submit it to approval lines.
Form Details
This is an example of a form details for e-CSR system. We have transformed the table-like interface into cards and section-like design. This form also has ability to handle upload data for references.
Form Approval Dashboard
There are 6 approval lines that has responsibility to approve certain type of forms. This is an example of approval dashboard by Ops Manager and the CSR forms will be sorted by prioritization.