Defect Detector
UI/UX Design
A railway Defect Detector is a highly advanced device mounted on a specialized trolley that moves along railway tracks. Its primary function is to scan and diagnose the condition of the railway track.
As a UI/UX designer for a new railway device, I create user-friendly screens for easy control, actively collaborate with the team to improve the device, and seek innovative solutions to enhance its usability and effectiveness in railway track maintenance and safety.
Main Screen
The main screen displays live video feeds from various cameras. Users can access the Archive, Reports, and Settings. Start and stop buttons control video playback.
Report Screen
The Report Screen features color-coded buttons that serve as indicators. These buttons provide a quick overview of the inspection findings:
Green Button: Indicates no violations or issues were detected during the inspection.
Red Button: Signals the presence of violations or issues that require attention.
Gray Button: Suggests a lack of data or information for the inspection.
In addition to these indicators, there is a brief explanation of what each color represents. Users also have the option to navigate to the Archive by pressing a dedicated button. This intuitive interface allows for swift identification of inspection results and easy access to historical data for further analysis and action.
Reports List Screen
The Reports List Screen provides a convenient overview of inspection reports. It features columns displaying timestamps and corresponding distances for each report entry. Additionally, within each row, there is a dedicated button for opening the report in detail.
Users can navigate through the list of reports using left and right arrow buttons, allowing for easy access to historical data. Pagination controls are situated at the bottom of the screen, simplifying the process of browsing through a larger number of reports. This user-friendly interface streamlines the retrieval and review of inspection data for effective decision-making and maintenance planning.
Archive Selection Popup
When you click the "Archive" button, a popup window in the form of a calendar will appear. In this calendar view:
You can easily navigate to today's date for quick reference.
Dates with available inspection reports are visually highlighted.
Months that contain reports are also emphasized, making it clear at a glance which months have recorded data.
Both months and dates are navigable using left and right arrow buttons, ensuring efficient exploration of historical inspection records. This user-friendly design streamlines the process of accessing specific reports by date and time.
Other Popups
These popups provide detailed insights into various aspects of railway track management. They offer valuable data for informed decision-making and improved railway track efficiency and safety.
Settings Screen
The Settings Screen is organized into tabs, each containing contextually relevant configuration options. When a setting is altered, it is visually highlighted with a green outline, mirroring the appearance of the confirmation button.
This intuitive design allows users to easily navigate and modify their settings while clearly indicating which changes have been made and need confirmation.
Spinner and Main Screen Background
The red-black spinner is an eye-catching element that adds a dynamic touch to the interface, featuring colors that are harmoniously aligned with the company's logo. Its vivid red and black hues create a striking contrast, making it visually engaging and reinforcing the brand identity.
The background of the screen is adorned with intricate schematics of train carriages, further emphasizing the company's dedication to the railway industry. This artistic choice not only adds an aesthetic dimension to the interface but also strengthens the brand's connection to its core theme.
UI Kit
All UI elements are organized into a developer-friendly UI kit, simplifying the development process and making it more efficient.
