UTMSmart App was one of the main projects I contributed to during my internship as a Mobile App Developer Intern at UTMDigital (Digital Services Department).
This internship was a valuable opportunity that allowed me to apply both my UI/UX design and development skills in a real-world project. As a student intern, I made mistakes and learned from them — gaining insight into the dos and don’ts of product development within an established organization.
UTMSmart is an all-in-one application for the staff, lecturers, and students of Universiti Teknologi Malaysia (UTM). It integrates numerous modules that deliver university services and information. Depending on user roles (undergraduate, postgraduate, or staff), certain modules become available while others remain hidden.
During my internship, I contributed to the development of several new modules within the UTMSmart App. Each feature aimed to improve usability and provide clearer access to information for different user groups. Below are three of the key features I designed and developed, combining both UI/UX design and frontend implementation:
Feature 01
.svg)
The New Student Dashboard is designed exclusively for new students entering UTM (undergraduate and postgraduate). It guides them through key onboarding steps such as health checkups, college accommodation, and course registration. This dedicated interface helps prevent confusion and information overload by showing only relevant tasks until students complete all steps. Once finished, their status automatically changes to “Active Student,” granting access to the full app experience.
UI/UX Design · Frontend Development (Ionic & API Integration)
I worked on the end-to-end design and implementation, from low-fidelity sketches and wireframes to high-fidelity mockups and development. I redesigned the navigation for better clarity, ensured the layout followed UTMSmart’s brand identity, and integrated the backend API for real-time status tracking.
.svg)
The result is a clearer onboarding flow that reduces confusion for first-time users and improves UI consistency across modules, providing a smoother transition into university life.
The refined mockup builds upon the initial concept provided by my supervisor, aiming to modernize the overall look and feel. Intermediate iterations were created to align more closely with the existing UTMSmart brand identity before final implementation.
Feature 02
The UTMLab module provides students and staff with centralized access to laboratory-related information — including lab listings, equipment availability, and chemical or gas inventory. Each listing includes a person-in-charge (PIC) and contact details, helping users communicate and plan their lab activities efficiently.
UI/UX Design · Frontend Development (Ionic & API Integration)
I collaborated with a senior developer who built the mockup based on my wireframe and API logic. My main task was to enhance the interface by improving layout consistency, visual hierarchy, and navigation. I created a modular design system for listings and refined the overall UI to match the updated design style across UTMSmart.
The redesigned layout allows users to access lab details faster and provides a more consistent visual experience, improving usability for both students and staff.
The final interface was refined from the initial wireframe to ensure stronger visual hierarchy, improved alignment, and consistent styling across modules.
Feature 03
The ICT Asset module is a feature dedicated to UTM staff, allowing them to view all ICT assets assigned under their names — such as laptops, PCs, or printers. It presents key details and terms of use in a clear, straightforward layout.
UI/UX Design · Frontend Development (Ionic & API Integration)
I designed and developed this feature from scratch, focusing on a simple, clean information display. I created wireframes and mockups to ensure readability and UI consistency with other modules before implementing the frontend and API integration.
This redesign enhances how information is presented, ensuring readability and consistency within the broader UTMSmart interface.
The design focused on achieving visual consistency with the existing UTMSmart interface. While earlier sketches are not shown, the final layout was refined through multiple feedback rounds to simplify content presentation and maintain the app’s visual hierarchy.
