Category /
UI/UX Design
Athena Mobile App Redesign
Athena is an attendance and human resource management application designed to help companies manage employee attendance, absences, take off requests, overtime, and internal announcements.
Client:
PT. Berca Kawan Sejati
Year:
2024
Role:
UI/UX Designer
Overview
This project focused on creating a more organized and modern look that follows the trends. Because there is inconsistent use of elements. For the comfort of using the Athena application by employees, this redesign hopes to give a good impression and be used more often.
Problem
Cramped UI design with unstructured layout
The UI is a bit cluttered with a lot of information and the placement of sections within the app is quite confusing for users to find relevant information quickly.
Outdated Visual Design and Inconsistent Color Scheme
The visual appearance of the app is quite outdated and lacks a modern aesthetic. Some of the icons also seem to lack consistency. Also, the app uses a variety of colors that seem inconsistent.
Goals
Improve Navigation
Improved the structure and layout of app features to simplify navigation, making it easier for users to find features intuitively.
Modernize UI Design
Update the visual design to be more up-to-date, aligned with modern app design standards and provide a more attractive appearance.
Establish a Clear Visual Hierarchy
Ensure important elements are clearly displayed, creating a clear visual hierarchy that guides users effectively.
Beranda & Absensi
😔 Athena has a home page with attendance information, several menus, as well as announcements. Using icons that are not uniform, makes this Athena application quite boring. After an employee has taken attendance, Absensi page displays information about their attendance with a time icon that spins according to the current working hours. This clumsy display is less informative, along with the no photo history of attendance.
😊 Through the new look of the home page, the check in button, icons that match the label, the announcement section, and the gallery section, it gives a more vibrant and less boring impression. After checking in, a successful check in page will be displayed along with a photo, name, and other employment information. Not forgetting also the radius and work schedule of the registered employee.
Kehadiran & Lupa Absen
😔 The kehadiran karyawan page is not a big problem, but the attendance percentage does not have clear information about what it means. The same goes for the pengajuan lupa absen, which has a fairly rigid appearance.
😊 Through redesign, the kehadiran karyawan page in the percentage of attendance section has clear information, from the team there is 1 time off, 3 employees are present, and percentage synchronization is conducted that day. The addition of the pengajuan lupa absenprocess when submitting a forgotten absence, which is filling out the form, waiting, and the status is complete.
Pengajuan Cuti & Ijin
😔 There is a list of submissions by applying a date filter. The submissions do not have a status of whether they are approved or not. All views have the same track button, while some submissions have already passed.
😊 Permission and time off with a new look, there are tabs of each submission status. There is a section for all submissions, pending, approved, canceled, and rejected submissions. Separated by month of submission, along with the status of each submission. Each submission, has its own footer and added submission progress from filling out the form, waiting, until finally approved or rejected.
Karyawan
😔 Profile photos and other attendance information take up enough design space. The color of the contact button also does not match the primary color of the Athena application. Kepegaiwan, Kontrak, and Pribadi tabs have a slightly stiff appearance, and the padding is not aligned with the contact button.
😊 The appearance of the profile photo and general information was changed to the appearance of the user profile in the usual way. Pribadi and Kontrak tab are combined, because the information is a related unit. Pribadi tab was moved to the center, and the Riwayat tab was added. The Riwayat tab will display all attendance and submission histories that the employee has submitted.
Pengumuman & Notifikasi + Komunitas
😔 The announcement page view has a search feature, but there is also a category filter. While this category filter covers all announcements, it is less efficient to use. There are 2 notification tabs, the unread and notification, which is not a big problem.
😊 After the redesign, the announcement page is displayed with a list of announcements along with a search feature only. For notifications, unread and history are differentiated by background color only.
Based on the discussion, there are additional features for the employee community. Where this komunitas is based on social media, there are Athena stories, posts both photos and text. On the profile page there is information on awards won by employees, 2 tabs, posts and activities. This activity tab can be said to be like a comment activity, like, and share other employees' posts. There is a message feature, which can send messages to each other both fellow employees and group messages.
Conclusion
This UI/UX redesign not only improves the visual aesthetics of the app but also significantly enhances the user experience. With more intuitive navigation, better responsiveness, and enhanced functionality, the app can now fulfill user needs more effectively.
