BASIC
TOOLS
Figma
Figma
Affinity
Designer
Affinity
Designer
Affinity
Photo
Affinity
Photo
Photoshop
Photoshop
2021
E-APPROVAL APP · WEB
DESIGN (100%)
HTML/CSS/JS (100%)
PLANNING (100%)
HODUWORKS
HODUWORKS
An app designed to manage attendance and workflow centering on electronic approvals. It integrates daily tasks from attendance logging to approvals and employee management in one place. The built-in calendar allows users to manage schedules or use it as a dedicated business tool.
An app designed to manage attendance and workflow centering on electronic approvals. It integrates daily tasks from attendance logging to approvals and employee management in one place.
The built-in calendar allows users to manage schedules or use it as a dedicated business tool.
SWIFT APPROVAL, DEEP WORKFLOW
HODUWORKS
SWIFT APPROVAL, DEEP WORKFLOW
HODUWORKS
SWIFT APPROVAL, DEEP WORKFLOW
HODUWORKS
I designed this project to resolve the complexity and user discomfort found in existing electronic approval systems.
I designed this project to resolve the complexity and user discomfort found in existing electronic approval systems.
I designed this project to resolve the complexity and user discomfort found in existing electronic approval systems.
I designed this project to resolve the complexity and user discomfort found in existing electronic approval systems.
1
PROBLEM
Voice of the User
Voice of the User
1
PROBLEM
Voice of the User
The company's electronic approval app is so complicated
that I only use it for tracking attendance
이영지
이영지
코즈메틱 회사
코즈메틱 회사
" "
김현우
김현우
A 에이전시
김현우
A 에이전시
The app updated, and they just added even more unnecessary features..
박용지
박용지
마케팅 회사
마케팅 회사
" "
Why check everything separately?
Why check everything separately?
Why check everything separately?
Why check everything separately?
Why check everything separately?
Why check everything separately?
Missed the priority...
Missed the priority...
Missed the priority...
03:10 PM
Urgent
Urgent
Still in progress
Still in progress
03:10 PM
Done
Done
Finished by mistake
Finished by mistake
Missed the priority...
03:10 PM
Urgent
Still in progress
03:10 PM
Done
Finished by mistake
Rejected or still pending
Rejected or still pending
Rejected or still pending
03:11 PM
In Progress
Misinterpreted as ongoing
Misinterpreted as ongoing
Rejected
Actually rejected approval.
Actually rejected approval.
Rejected or still pending
03:11 PM
In Progress
Misinterpreted as ongoing
Rejected
Actually rejected approval.
Too much back and forth
03:12 PM
Approval
Approval
03:13 PM
Task
Task
03:14 PM
Attendance
Attendance
Too much back and forth
03:12 PM
Approval
03:13 PM
Task
03:14 PM
Attendance
Why check everything separately?
1
DEFINE
1
DEFINE
Scattered Records, Hidden Workflow
Functions like tasks, approvals, and attendance are scattered, forcing users to switch screens constantly. This disconnects the history of each stage, making it hard to track progress and leading to repetitive communication.
Scattered Records, Hidden Workflow
Functions like tasks, approvals, and attendance are scattered, forcing users to switch screens constantly. This disconnects the history of each stage, making it hard to track progress and leading to repetitive communication.
Structural
Fragmented timeline
Isolated history
Tracking difficulties
UX
Inefficient navigation
Context loss
Disconnected flow
Impact
Status misunderstanding
Increased comms
Process delays
1
DEFINE
Scattered Records, Hidden Workflow
Functions like tasks, approvals, and attendance are scattered, forcing users to switch screens constantly. This disconnects the history of each stage, making it hard to track progress and leading to repetitive communication.
Structural
Fragmented timeline
Isolated history
Tracking difficulties
UX
Inefficient navigation
Context loss
Disconnected flow
Impact
Status misunderstanding
Increased comms
Process delays
2
SOLUTION
2
SOLUTION
Connecting Scattered Records into One Flow
분산된 기록을 하나의
흐름으로 연결
Connecting Scattered Records into One Flow
Reorganized fragmented history into a time-based timeline. Users can now track the entire process from start to finish at a glance, understanding the full context and current status effortlessly.
Reorganized fragmented history into a time-based timeline. Users can now track the entire process from start to finish at a glance, understanding the full context and current status effortlessly.
Check Progress
View Total Counts
Visualize All Records
Visualize All Records
Visualizes total records and progress ratios. Pie charts allow users to grasp the overall workflow instantly without checking individual data
Visualizes total records and progress ratios. Pie charts allow users to grasp the overall workflow instantly without checking individual data
Identify Context
View All History
Chronological Status
Chronological Status
Records accumulate on a timeline from creation to completion. Users track history by "flow" rather than "data points," ensuring a natural understanding of the process.
Records accumulate on a timeline from creation to completion. Users track history by "flow" rather than "data points," ensuring a natural understanding of the process.
Direct Search
Advanced Filters
Enhanced Search
Enhanced Search
Quickly find records using status, period, and condition filters. Moves beyond simple search to help users efficiently filter records for any situation.
Quickly find records using status, period, and condition filters. Moves beyond simple search to help users efficiently filter records for any situation.
Improvement Points
Improvement Points
Improvement Points
Added a timeline view to check all history at a glance.
Added a timeline view to check all history at a glance.
1
1
Seamless User Experience
Seamless User Experience
All status updates connected in a single flow.
1
Seamless User Experience
All status updates connected
in a single flow.
Intuitive Progress Tracking
Intuitive Progress Tracking
Monitor workflow status at a glance.
2
2
Intuitive Progress Tracking
Monitor workflow status
at a glance.
2
Fast & Easy Information Access
Fast & Easy Information Access
Quick access without unnecessary navigation.
3
3
Fast & Easy Information Access
Quick access without
unnecessary navigation.
3
3
USERFLOW
3
USERFLOW
TIMELINE USERFLOW
TIMELINE USERFLOW
The timeline serves as the central hub where users can monitor the entire project trajectory. I designed this flow so that users can dive into specific approval details and take action immediately. By naturally linking every feature within a single context, I ensured that users can handle complex tasks without the distraction of switching between multiple screens.
The timeline serves as the central hub where users can monitor the entire project trajectory. I designed this flow so that users can dive into specific approval details and take action immediately. By naturally linking every feature within a single context, I ensured that users can handle complex tasks without the distraction of switching between multiple screens.
3
USERFLOW
TIMELINE USERFLOW
The timeline serves as the central hub where users can monitor the entire project trajectory. I designed this flow so that users can dive into specific approval details and take action immediately. By naturally linking every feature within a single context, I ensured that users can handle complex tasks without the distraction of switching between multiple screens.
4
RENEWAL
4
RENEWAL
Dark Theme Renewal
Dark Theme Renewal
Dark Theme Renewal
I updated the design system to introduce a dark mode optimized specifically for the new timeline interface. This wasn't just about inverting colors; I carefully recalibrated the information hierarchy and contrast ratios. The result is a focused environment that minimizes visual noise and helps users stay fully immersed in their work.
I updated the design system to introduce a dark mode optimized specifically for the new timeline interface. This wasn't just about inverting colors; I carefully recalibrated the information hierarchy and contrast ratios. The result is a focused environment that minimizes visual noise and helps users stay fully immersed in their work.
White Theme
White Theme
White Theme
White Theme
Original task detail screens based on previous standard guides.
Original task detail screens based on previous standard guides.
Original task detail screens based on previous standard guides.
Original task detail screens based on previous standard guides.
NOW
NOW
Dark Theme
Dark Theme
Dark Theme
Renewed screens with enhanced readability and immersion tailored for the timeline system.
Renewed screens with enhanced readability and immersion tailored for the timeline system.
Renewed screens with enhanced readability and immersion tailored for the timeline system.
NEW
NEW
5
UI / INTERACTION
Selected Pages
View the core features and layouts of HODUWORKS based on the Dark UI at a glance. The interface is designed to deliver complex information clearly and effectively.
Attendance
[VIDEO]
Attendance List
[IMAGE]
E-APPROVAL INBOX
[VIDEO]
E-APPROVAL DETAIL
[VIDEO]
WEB VERISON
[VIDEO]
Leave Management
[IMAGE]
TIMELINE
[IMAGE]
ADD TASK
[VIDEO]
TASK DETAIL
[VIDEO]
SETTINGS
[VIDEO]
5
UI / INTERACTION
Selected Pages
View the core features and layouts of HODUWORKS based on the Dark UI at a glance. The interface is designed to deliver complex information clearly and effectively.
ATTENDANCE
[VIDEO]
ATTENDANCE STATUS
[IMAGE]
E-APPROVAL INBOX
[VIDEO]
E-APPROVAL DETAIL
[VIDEO]
전자결재 웹 버전
[VIDEO]
ATTENDANCE MANAGEMENT
[IMAGE]
TIMELINE
[IMAGE]
ADD TASK
[VIDEO]
TASK DETAIL
설정 웹 버전
[VIDEO]
