[01]
BASIC
[a[
Figma
Figma
Affinity
Designer
Affinity
Designer
Affinity
Photo
Affinity
Photo
Photoshop
Photoshop
2021
전자결재
웹 · 앱 디자인
디자인 (100%)
기획 (100%)
퍼블 (100%)
HODUWORKS
HODUWORKS
HODUWORKS
기업의 효율적인 운영을 지원하는 근태 관리 및 전자결재 전용 서비스입니다. 일정 관리 시스템을 기반으로 한 호두앱의 프리미엄 버전으로 기획되었으며, 근태 기록부터 업무 승인(전결), 실시간 업무 등록 현황, 직원 관리까지 비즈니스 전반을 아우르는 기능을 제공합니다. 특히 내장된 캘린더는 메인 서비스와 연동하여 통합 관리하거나, 오직 업무 전용 달력으로만 독립적으로 운영할 수 있어 사용자 환경에 따른 유연한 활용이 가능합니다.
기업의 효율적인 운영을 지원하는 근태 관리 및 전자결재 전용 서비스입니다. 일정 관리 시스템을 기반으로 한 호두앱의 프리미엄 버전으로 기획되었으며, 근태 기록부터 업무 승인(전결), 실시간 업무 등록 현황, 직원 관리까지 비즈니스 전반을 아우르는 기능을 제공합니다. 특히 내장된 캘린더는 메인 서비스와 연동하여 통합 관리하거나, 오직 업무 전용 달력으로만 독립적으로 운영할 수 있어 사용자 환경에 따른 유연한 활용이 가능합니다.
Figma
Affinity
Designer
Affinity
Photo
Photoshop
2021
전자결재
웹 · 앱 디자인
디자인 (100%)
기획 (100%)
퍼블 (100%)
HODUWORKS
기업의 효율적인 운영을 지원하는 근태 관리 및 전자결재 전용 서비스입니다. 일정 관리 시스템을 기반으로 한 호두앱의 프리미엄 버전으로 기획되었으며, 근태 기록부터 업무 승인(전결), 실시간 업무 등록 현황, 직원 관리까지 비즈니스 전반을 아우르는 기능을 제공합니다. 특히 내장된 캘린더는 메인 서비스와 연동하여 통합 관리하거나, 오직 업무 전용 달력으로만 독립적으로 운영할 수 있어 사용자 환경에 따른 유연한 활용이 가능합니다.
결재는 짧게, 업무는 깊게
HODUWORKS
결재는 짧게, 업무는 깊게
HODUWORKS
결재는 짧게, 업무는 깊게
HODUWORKS
결재는 짧게, 업무는 깊게
HODUWORKS
결재는 짧게, 업무는 깊게
HODUWORKS
전자결재의 복잡한 기능으로 불편함을 겪는
사용자 시점으로 설계하고 디자인하였습니다
전자결재의 복잡한 기능으로 불편함을 겪는사용자 시점으로 설계하고 디자인하였습니다
전자결재의 복잡한 기능으로 불편함을 겪는사용자 시점으로 설계하고 디자인하였습니다
1
1
PROBLEM
PROBLEM
사용자의 목소리
사용자의 목소리
사용자의 목소리
사용자의 목소리
회사 전자결재앱이
너무 복잡해서 근태만 사용해요
회사 전자결재앱이
너무 복잡해서 근태만 사용해요
회사 전자결재앱이
너무 복잡해서 근태만 사용해요
이영지
이영지
이영지
코즈메틱 회사
코즈메틱 회사
코즈메틱 회사
" "
" "
" "
김현우
김현우
A 에이전시
회사 전결앱이 업데이트되면서
또 기능이 늘어났어요...
박용지
박용지
박용지
마케팅 회사
마케팅 회사
마케팅 회사
" "
" "
" "
하나씩 다 별개로 확인해야돼?
하나씩 다 별개로 확인해야돼?
하나씩 다 별개로 확인해야돼?
하나씩 다 별개로 확인해야돼?
하나씩 다 별개로 확인해야돼?
하나씩 다 별개로 확인해야돼?
이 업무 먼저 했어야 됐는데…
이 업무 먼저 했어야 됐는데…
이 업무 먼저 했어야 됐는데…
03:10 PM
03:10 PM
마감 임박
마감 임박
아직 진행 중인 마감 임박 업무
아직 진행 중인 마감 임박 업무
03:10 PM
방금 완료
방금 완료
실수로 먼저 완료한 업무
실수로 먼저 완료한 업무
이 결재 반려된거 아니었어?
이 결재 반려된거 아니었어?
이 결재 반려된거 아니었어?
03:11 PM
03:11 PM
진행
진행
착각한 진행 중인 결재
착각한 진행 중인 결재
반려
반려
실제 반려한 결재
실제 반려한 결재
이거 보려면 계속
왔다 갔다 해야 하네…
이거 보려면 계속
왔다 갔다 해야 하네…
이거 보려면 계속
왔다 갔다 해야 하네…
03:12 PM
03:12 PM
결재함
결재함
03:13 PM
03:13 PM
업무 페이지
업무 페이지
03:14 PM
03:14 PM
근태 페이지
근태 페이지
1
1
DEFINE
DEFINE
1
DEFINE
기록이 분산되어,
흐름이 보이지 않는다
업무, 결재, 근태 등 기능이 분산되어 있어 사용자는 개별 화면을 오가며 상태를 확인해야 했고, 전체 업무의 흐름을 시간 순서로 이해하기 어려웠습니다. 각 단계의 이력이 단절되어 이전 진행 맥락을 파악하기 어려웠으며, 특히 승인 및 반려 과정에서는 진행 경과를 추적하기 어려워 반복적인 확인과 커뮤니케이션이 발생하는 문제가 있었습니다.
구조 문제
시간 흐름 단절
시간 흐름 단절
이력 단편화
이력 단편화
과정 파악 어려움
과정 파악 어려움
UX 문제
히스토리 탐색 비효율
히스토리 탐색 비효율
맥락 이해 어려움
맥락 이해 어려움
진행 흐름 불연속
진행 흐름 불연속
업무 영향
진행 상황 오해
진행 상황 오해
커뮤니케이션 증가
커뮤니케이션 증가
처리 지연 발생
처리 지연 발생
2
2
SOLUTION
SOLUTION
분산된 기록을 하나의 흐름으로 연결
분산된 기록을 하나의 흐름으로 연결
분산된 이력을 시간 흐름 기반 타임라인으로 재구성했습니다. 시작부터 완료까지의 과정을 한눈에 파악할 수 있도록 했습니다. 또한, 현재 상태를 흐름 안에서 명확히 추적하고 이전 맥락과 현재 진행 상황을 함께 이해할 수 있도록 개선했습니다.
진행률 확인
진행률 확인
전체 건수 파악
전체 건수 파악
모든 기록 시각화
모든 기록 시각화
모든 기록 시각화
전체 기록 수와 진행 상태를 비율로 시각화하여 현재 상황을 직관적으로 파악할 수 있도록 했습니다. 파이 차트를 통해 완료 및 진행 상태를 한눈에 확인하고, 개별 데이터를 보지 않아도 전체 흐름을 빠르게 이해할 수 있습니다.
전체 기록 수와 진행 상태를 비율로 시각화하여 현재 상황을 직관적으로 파악할 수 있도록 했습니다. 파이 차트를 통해 완료 및 진행 상태를 한눈에 확인하고, 개별 데이터를 보지 않아도 전체 흐름을 빠르게 이해할 수 있습니다.
전체 기록 수와 진행 상태를 비율로 시각화하여 현재 상황을 직관적으로 파악할 수 있도록 했습니다. 파이 차트를 통해 완료 및 진행 상태를 한눈에 확인하고, 개별 데이터를 보지 않아도 전체 흐름을 빠르게 이해할 수 있습니다.
젼체 맥락 파악
젼체 맥락 파악
전체 기록 보기
전체 기록 보기
시간대별 전체 현황
시간대별 전체 현황
시간대별 전체 현황
각 기록은 생성 시점부터 변화 과정까지 타임라인에 누적됩니다. 사용자는 개별 정보가 아닌 흐름 단위로 이력을 확인하며, 현재 상태와 이전 과정을 자연스럽게 이해할 수 있습니다.
각 기록은 생성 시점부터 변화 과정까지 타임라인에 누적됩니다. 사용자는 개별 정보가 아닌 흐름 단위로 이력을 확인하며, 현재 상태와 이전 과정을 자연스럽게 이해할 수 있습니다.
각 기록은 생성 시점부터 변화 과정까지 타임라인에 누적됩니다. 사용자는 개별 정보가 아닌 흐름 단위로 이력을 확인하며, 현재 상태와 이전 과정을 자연스럽게 이해할 수 있습니다.
직접 검색
직접 검색
조건 필터
조건 필터
검색 효율 개선
검색 효율 개선
검색 효율 개선
상태, 기간, 조건 기반 필터를 통해 원하는 이력을 빠르게 탐색할 수 있습니다. 단순 검색을 넘어 상황에 맞는 기록을 효율적으로 선별할 수 있도록 개선했습니다.
상태, 기간, 조건 기반 필터를 통해 원하는 이력을 빠르게 탐색할 수 있습니다. 단순 검색을 넘어 상황에 맞는 기록을 효율적으로 선별할 수 있도록 개선했습니다.
상태, 기간, 조건 기반 필터를 통해 원하는 이력을 빠르게 탐색할 수 있습니다. 단순 검색을 넘어 상황에 맞는 기록을 효율적으로 선별할 수 있도록 개선했습니다.
개선 포인트
기능이 분산되어
전체 흐름을 한눈에
파악하기 어렵다
모든 이력을 한눈에 확인 가능한 타임라인 화면 추가
모든 이력을 한눈에 확인 가능한 타임라인 화면 추가
1
끊김 없는 사용자 경험
모든 현황이 하나의
흐름으로 이어짐
직관적인 진행 상태 확인
진행 상태를
한눈에 파악
2
빠르고 간편한 정보 접근
불필요한 탐색 없이
빠르게 접근
3
3
3
USERFLOW
USERFLOW
타임라인 유저플로우
타임라인 유저플로우
타임라인 유저플로우
타임라인 유저플로우
사용자는 타임라인을 중심으로 업무의 전체 흐름을 파악하고, 필요한 결재를 선택하여 상세 내용을 확인한 뒤 즉시 처리할 수 있습니다. 각 기능은 흐름 안에서 자연스럽게 연결되어, 개별 화면을 오가며 확인하지 않고도 업무의 맥락을 한눈에 이해하고 처리할 수 있도록 설계했습니다.
사용자는 타임라인을 중심으로 업무의 전체 흐름을 파악하고, 필요한 결재를 선택하여 상세 내용을 확인한 뒤 즉시 처리할 수 있습니다. 각 기능은 흐름 안에서 자연스럽게 연결되어, 개별 화면을 오가며 확인하지 않고도 업무의 맥락을 한눈에 이해하고 처리할 수 있도록 설계했습니다.
사용자는 타임라인을 중심으로 업무의 전체 흐름을 파악하고, 필요한 결재를 선택하여 상세 내용을 확인한 뒤 즉시 처리할 수 있습니다. 각 기능은 흐름 안에서 자연스럽게 연결되어, 개별 화면을 오가며 확인하지 않고도 업무의 맥락을 한눈에 이해하고 처리할 수 있도록 설계했습니다.
4
4
RENEWAL
RENEWAL
다크 테마 리뉴얼
다크 테마 리뉴얼
다크 테마 리뉴얼
다크 테마 리뉴얼
기존의 표준 가이드를 재정립하여, 새롭게 도입된 타임라인 시스템에 최적화된 다크 모드 인터페이스를 설계했습니다. 단순히 색상을 반전시킨 것이 아니라, 정보의 우선순위를 재배치하고 고대비 컬러를 활용하여 사용자가 업무의 흐름(Flow)에 온전히 몰입할 수 있는 환경을 구축했습니다.
기존의 표준 가이드를 재정립하여, 새롭게 도입된 타임라인 시스템에 최적화된 다크 모드 인터페이스를 설계했습니다. 단순히 색상을 반전시킨 것이 아니라, 정보의 우선순위를 재배치하고 고대비 컬러를 활용하여 사용자가 업무의 흐름(Flow)에 온전히 몰입할 수 있는 환경을 구축했습니다.
기존의 표준 가이드를 재정립하여, 새롭게 도입된 타임라인 시스템에 최적화된 다크 모드 인터페이스를 설계했습니다. 단순히 색상을 반전시킨 것이 아니라, 정보의 우선순위를 재배치하고 고대비 컬러를 활용하여 사용자가 업무의 흐름(Flow)에 온전히 몰입할 수 있는 환경을 구축했습니다.
기존 화이트 테마
기존 화이트 테마
표준 가이드가 적용된 기존의 개별 업무 상세 화면
표준 가이드가 적용된 기존의 개별 업무 상세 화면
NOW
NOW
신규 다크 테마
신규 다크 테마
타임라인 시스템에 맞춰 정보 가독성과 몰입감을 높인 리뉴얼 화면
타임라인 시스템에 맞춰 정보 가독성과 몰입감을 높인 리뉴얼 화면
NEW
NEW
5
5
UI / INTERACTION
UI / INTERACTION
전체 화면
전체 화면
전체 화면
호두 웍스의 전체 화면을 통해 다크 UI 기반의 주요 기능과 화면 구성을 한눈에
확인할 수 있습니다. 복잡한 정보도 명확하게 전달될 수 있도록 구성했습니다.
호두 웍스의 전체 화면을 통해 다크 UI 기반의 주요 기능과 화면 구성을 한눈에 확인할 수 있습니다. 복잡한 정보도 명확하게 전달될 수 있도록 구성했습니다.
호두 웍스의 전체 화면을 통해 다크 UI 기반의 주요 기능과 화면 구성을 한눈에
확인할 수 있습니다. 복잡한 정보도 명확하게 전달될 수 있도록 구성했습니다.
호두 웍스의 전체 화면을 통해 다크 UI 기반의 주요 기능과 화면 구성을 한눈에
확인할 수 있습니다. 복잡한 정보도 명확하게 전달될 수 있도록 구성했습니다.
출퇴근
출퇴근
[VIDEO]
[VIDEO]
근태기록
근태기록
[IMAGE]
[IMAGE]
결재함 & 반려 팝업
결재함 & 반려 팝업
[VIDEO]
[VIDEO]
전자결재 상세
전자결재 상세
[VIDEO]
[VIDEO]
전자결재 웹 버전
전자결재 웹 버전
[VIDEO]
[VIDEO]
연차관리
연차관리
[IMAGE]
[IMAGE]
타임라인
타임라인
[IMAGE]
[IMAGE]
업무 등록
업무 등록
[VIDEO]
[VIDEO]
업무 상세
업무 상세
[VIDEO]
[VIDEO]
설정 웹 버전
설정 웹 버전
[VIDEO]
[VIDEO]
5
UI / INTERACTION
전체 화면
호두 프리미엄 버전 중 성숙한 성격에 맞추어 다크 버전으로 진행하고, 이전 구축한 호두 기본 디자인 시스템을 활용하여, 호두 사용자와 일반 사용자 모두 편리하게 사용가능한 UI를 디자인했습니다.
출퇴근
[VIDEO]
근태기록
[IMAGE]
결재함 & 반려 팝업
[VIDEO]
전자결재 상세
[VIDEO]
전자결재 웹 버전
[VIDEO]
연차관리
[IMAGE]
타임라인
[IMAGE]
업무 등록
[VIDEO]
업무 상세
[VIDEO]
설정 웹 버전
[VIDEO]
