UI Design, front-end development and marketing for a Scada & MES Sytem (web platform)
Web platform designed for production control and management, with real-time data and traceability. Designed and developed by Taiprora (where I have been working since 2001) for an automotive corporate, through the implementation of the
My role in this project
Within the Taiprora team I've been involved in two macro-activities: collaborating with the development team for the design and development of the whole project, and with the Marketing Area, I edited the promotional material of the project (multilanguage PDFs, video editing, newsletter and updating the website, the company Youtube channel). In detail:
- Starting from the wireframes approved by the customer, I created - at a first time - all mockups, then their prototypes directly in html, css and javascript to have the final Customer's approval of the all management masks: the application was then completed by my teammates with the AngulaJS coding and therfore enable data visualizations and communications with the server.
The application is completely responsive: production data can be viewed both from desktop but also from mobile (smartphone and tablets) by managers located all around the World.
To develop the front-end pages, I used Bootstrap 4 and jQuery , while for the visualization of the datatables and graphics we used the Telerik Kendo UI library. - In addition to this application, I also created the Andon web-application, positioned in the production area: this is a display board to display the production progress, and showing a series of information such as production statistics, news and alarms. The Andon was created as a web-application with a series of dynamic slideshows consisting in single-pages (each page can be customized by the end-users and the tabular data are dynamic and in real-time). The Andon screen is a 55" monitor with 4k resolution.
- As part of this project, I worked on the copywriting of the user's manual, complete with a series of step-by-step guides on how to create reports and how to correctly read data in real time.
SCADA & MES System Web Application: mockups
Regarding the Marketing Area , I edited:
- The realization of the PDF of the project case (creating a descriptive single-page "card" using Adobe Illustrator in two languages, Italian and English)
- The editing of the promotional video of the project-case, collecting information from key users, dealing with copywriting, research and selection of videos/photos, up to the video editing created via Adobe Premiere .
- Both the video and the PDFs (made in both Italian and English) have been used by the company Marketing Team for the promotion of the case as one of the services offered, and are used on the company website and in the newsletter. I also managed both the updates: the company website and its Youtube channel, where you can view the video above and others I have made in these recent years.
This project in short
The customer is a third-party manufacturer in Automotive sector.
Its production is divided into 3 Production lines, 120 Work Stations, and where
an average of 43,200 pieces are processed every day.
This software is also fully connected to the customer's MES System.
REAL-TIME VIEWS & REPORTING ABOUT:
- Production progress
- Info and measurements of each workstation
- Monitoring of scraps, reworks and finished products
- Alarms and downtimes
- Efficiency index (OEE)
- Process capability (CP, CPK)
- Traceability & Quality Check
DIGITALIZATION & INDUSTRY 4.0 ENABLING TECHNOLOGIES:
- Advanced HMI / Andon
- Edge computing
- IIoT
- Cloud computing
- Broker Mqtt
- Business intelligence
ADVANTAGES WITH THIS SOLUTION
- High efficiency and reliability
- Business Intelligence tool
- Responsive, adaptive, touch-friendly
- mobile user interface
- High Performance
- All Items Dashboard