Providing a new look for an HR app

ROLE

UI/UX Designer

SCOPE

Redesign

DATE

Jul 2023

Worxspace UI
Worxspace is an application to assist HR, which optimized the lifecycle from process on-boarding to off-board to off-boarding to getting "high performance". As an HR employement app, Worxspace adds to all in one tools that pool communication functions, smart personnel, task management to the company directory.

BACKGROUND.

This project was made for a UI/UX design challenge held by Gamatechno Indonesia on Instagram.


Worxspace banner competition

PROBLEM.

Gamatechno wants their app called Worxspace to be redesigned that covers:


  • Login page
  • Home page
  • Task page (List Task, Detail Task, and Create Task)

SOLUTIONS.

Login Screen

Less is more. In a previous design, we have to press some button to move into login screen, in my design, i make it direct to make the existing user just login in the time they open the app. I also refined the position of the button to make it looks well positioned and symmetrical.


Before and after login screen worxspace


Home Screen

The previous design of home screen looks crowded and distracting here and there. First thing i do here is i remove the greeting section which is unnecessary for this app. After that, i move the list tools into the menu floating button to make it less distracting. Home screen now has 3 tab section to separate the information and reduce steps for users.



Before and after home screen worxspace


List Task Screen

Different between the task that has done and not is not clear also it's hard to mark it done. So i made some improvement such as adding checkbox and make the title strikethrough. I also divide the page into 2 container tasks and notes (notes from home moved here). Also i make the search field more visible.


Before and after task list screen worxspace

Create Task Screen

Again, less is more. I make the input fields more clear by separate them based on the relation of each fields. Also, since this there are only 2 type of task, i separate the create tasks into 2 tabs that consist of task and event.


Before and after create task worxspace

Detail Task Screen

Last but not least, in details screen, their previous design seems crowded and hard to read. Therefore, i divide them into 3 section overview, attachments, and activity to make it not complicated.

Before and after detail screen worxspace

OTHER WORKS.

Ready to work
together?

© 2025, All right reserved.

Ready to work
together?

© 2025, All right reserved.

Ready to work
together?

© 2025, All right reserved.

Ready to work
together?

© 2025, All right reserved.

Create a free website with Framer, the website builder loved by startups, designers and agencies.