South Korea’s first energy enterprise that supplies 1 million tons of gas to 1 million households
—
About Client
Seoul City Gas is an energy distribution company that supplies gas to twice the area of Seoul.
—
Needs
Field engineers of Seoul City Gas had difficulty because they were working on the site with PDAs and handwriting.
New features, UX, and UI improvements were needed to increase field work convenience and improve in-house asset research efficiency.
—
Project Goal
Through UX improvement, we aimed to build a mobile system for on-site and in-house work of Seoul City Gas.
—
UX/UI Principle 01
Analysis and Direction Settings for Improvement
We observed and analyzed the work process with the field engineer and found some problems.
- The previous PDA’s camera quality was low, so high-definition photos cannot be taken.
- Degradation of work efficiency due to inconvenience that users must return to the office and write a report.
- Unnecessary business processes like reimagining handwritten reports to transferring them to the system.
We have established key user experience challenges to address these issues.
- Improvement of task flow and complete UI so that work can be performed immediately on site.
- Set a UI Improvement Scope
Reorganize the existing PDA work screen to mobile apps.
- Applied key features to improve user convenience with convenient UI
Provide different main screens for each authority, simple login, help page, electronic documentation of inspection and reporting documents, recognition of control barcode, Improve photo quality, digitize customer signature, notes, etc.
—
UX/UI Principle 02
Increase efficiency by computerizing work
Previous way of working
Write work log at office > Field work > Return to office > Complete document
After handwriting the results of the on-site inspection, return to the office to process documents.
Improved way of working
Use all operations in the field
One-stop business processing by digitizing the on-site inspection process
Improved work performance
All procedures are dealt at one worksite
Deal with all works on-site without stopping
now available by digitalizing the results entirely.
—
UX/UI Principle 03
Enhance menu accessibility with improved navigation and buttons
Restructure the existing PDA work screen to meet the latest UX trend and user needs.
Floating Action Button (FAB)
Access menus and functions easily via Floating Action button which provide on the checklist and the inspection detail page.
UI for intuitive view of work processes
- Steppers UI that provides a quick, at-a-glance view of the process of receiving > task > transmission and what is currently being worked on.
- Sorting function that can be viewed separately by job status
- Work status that can easily determine the progress rate of work
—
UX/UI Principle 04
Increased users’ convenience through the development of additional functions and UI improvement.
Application of different main screen UI for each permission
- Layout and menu composition that responds flexibly according to user rights by exposing only menus with access rights.
- Provides affordance UI that allows you to easily check the status of work without entering detailed screen.
Easy Sign-in
- Increases users’ convenience by providing Easy Sign-in.
- Improve online security with automatic lock in case of forgetting the password.
App Helper Service
This service created to help a headquarter officer who is monitoring realtime to prevent errors of the application used on-site.
Make inspection and report document digital
Provides electronic documents that prepare and submit various inspection documents such as safety education log, photo ledger, and replacement slip on the spot.
Make inspection and report document digital
Provides electronic documents that prepare and submit various inspection documents such as safety education log, photo ledger, and replacement slip on the spot.
—
Design Concept
The biggest goal was to improve the design consider with the environment of users who perform major tasks outside (using the app while wearing gloves, poor screen visibility).
So, by optimizing the size of all components and fonts, and adding saturation contrast, we improved visibility and made selection easier.
The color reflects the color system of Seoul City Gas website to maintain the consistency of the visual identity.
Readability
Large font size for outdoor field engineers.
To improve the readability of complex business contents, we separated area with lines and planes clearly, and increase component size
Color
Used colors in SCG’s webpages
