Role: UI/UX Designer
Platform: Mobile
Duration: 1 Week
Year: 2024
Tool: Figma, Adobe Illustrator
eBencana is a mobile application developed by Jabatan Kerja Raya Malaysia (JKR) to help the public access real-time disaster information such as floods, landslides, and damaged roads. The app consolidates critical updates and announcements to support public awareness and safety during natural disasters.
Enhance the existing UI of the eBencana app to improve user experience, visual hierarchy, and clarity of disaster data, while maintaining accessibility and consistency with government branding.
Review & Understand Existing UI
Identify Priorities with Team
Wireframe & Visual Exploration
High-Fidelity Design
Iteration Based on Feedback
Analyzed the current app design to identify visual inconsistencies, layout issues, and usability pain points.
Collaborated with the development team and stakeholders to gather feedback and align on design goals.
Created wireframes and multiple visual directions to explore better layouts and modernize the interface.
Translated final concepts into high-fidelity mockups using a consistent color system, and iconography.
Presented the design to internal stakeholders and revised the UI based on their suggestions and preferences.
I explored various layout options for the eBencana app to improve usability and information clarity while maintaining the existing UI structure and visual identity.
Layout Exploration
Final Design
The final design keeps the app familiar for users, but more user-friendly and organized.
Iconography
Initial Design
Final Design
Color Scheme
This comparison highlights the UI enhancements made across key screens - Login, Home, Map, Profile and Details. The redesign aimed to improve visual consistency, usability, and user flow while preserving the app’s core functionality.
Login
Home
Map
Profile
Details
Navigation Revamp: Introduced a more modern bottom navigation bar for easier access.
Visual Design: Updated iconography, added color indicators, and used rounded containers for better visual appeal.
Content Clarity: Improved information grouping and spacing to reduce clutter.
Brand Alignment: Refreshed the color scheme and typography to match JKR’s visual identity.
Bilingual Support: Clearer language switch option and user greeting for a more personal experience.
This project was a valuable experience in refining an existing product within a real-world setting. Although I wasn’t involved in the full UX process such as user research or usability testing, I learned how to work within given constraints and still deliver meaningful design improvements.
I strengthened my ability to:
It also made me more aware of the importance of involving users earlier in the process which is something I’m actively working toward applying in future projects. Overall, this experience helped me grow as a UI/UX designer by teaching me how to be both adaptable and detail-oriented, even when working with limited input.
