Project Overview
Timeline: mid-2016 – 2017
Role: UI/UX designer (Team Project), User Research, Wireframing, Prototyping, UI design, and Interview with the stakeholders
Tools: Pen & paper, Figma, Adobe photoshop
Meralco Meter Seal Transaction System
A system application that serves as a bridge between the old to the new systems. The stakeholder decided to decommission the current server (mainframe) on which the MSTS application was hosted. MSTS is one of the important applications that serves as an indicator and protection against unauthorized access to our meters and other devices usually for tampering attempts by unscrupulous entities.
Challenges
The biggest challenge we encountered during the build process was the timeline that given to use to build the application. we need to squeeze in all the processes to capture all the information we need. We found out 70% of the Meralco employee has an age of 45 to 55, and they not quite interested in the application to migrate to a new UI. most of them are not comfortable because of complexity and they are very comfortable with the existing application.
The Task
Create a UI for the application with this specification we gather from the user and the stakeholders
- Improve the process that the old system has
- Consistency and standard: user should easy to understand the app
- Flexibility and efficiency
- Creating a CMS for the report capture.
The Process
The Team plunged into the product as a UX designer conducted an interview with stakeholders. We study the current system they use, how it works and we observe the user to see what adjustment we need to take in order to create a UI that fits for them.
We run a heuristic evaluation to identify the usability issue in the user interface we created so that we are aligned on the process that Meralco has.
We also have created a detailed schemed of all screens, popups, and notifications. this will help us to work more flexibly and quickly on the apps, improved the flow and the service.
We created a fully clickable prototype for the user as a requirement before we send it off to the development to validate if the new application captures the requirements of the user.
We run the design sprint. we invited people from the different departments with given demographics. again from ideation to wireframing, and prototyping. We conducted a demo of the prototype we created. we invited those employees to try the prototype.
UX Design
Based on research I had a clear idea about the product. To make this process more productive, I made a low-fi wireframe layout. I use Figma here to create a wireframe to make a simple and fast way to understand the flow also help the clients get a clear understanding of the layout structure.
Sketching
We did a low-fidelity design to consolidate our ideas and make a visual presentation of it before we proceed with the prototype.
Prototyping
I use Figma here to create a wireframe to make a simple and fast way to understand the flow also help the clients get a clear understanding of the layout structure.
User testing
We run the design sprint. we invited people from the different departments with given demographics. again from ideation to wireframing, and prototyping. We conducted a demo of the prototype we created. we invited those employees to try the prototype.
Final Say
During the testing phase, we had positive feedback that came to the employee. they want to use it and they see the importance of it. although this is an in-house app we have seen the value proposition is very high because it will cut down the duration of identifying the problem in the specific area and much faster to solve a problem compared to the conventional way to report the problem. we are happy to see that they are using it and have a plan to expand it and make it offer to the public.
