+ HOUSEWITHK@GMAIL.COM
+ HOUSEWITHK@GMAIL.COM
+ HOUSEWITHK@GMAIL.COM
+ HOUSEWITHK@GMAIL.COM
+ HOUSEWITHK@GMAIL.COM
Photoshop
Photoshop
Illustrator
Illustrator
Affinity
Designer
Affinity
Designer
Affinity
Photo
Affinity
Photo
2018
회의실 예약
웹 / 탭 디자인
디자인 (100%)
기획 (60%)
퍼블 (100%)
HODUCLICK
HODUCLICK
HODUCLICK
기존에 운영 중인 회의실 예약 앱의 디자인 시스템을 계승하여, 중대형 오피스 환경에 최적화된 웹과 태블릿 버전을 새롭게 구축한 프로젝트입니다. 사내의 수많은 회의실 현황을 실시간으로 파악하고 예약 및 취소를 신속하게 처리할 수 있도록 설계되었으며, 대규모 조직의 사용자가 데스크톱과 현장(회의실 입구)에서 모두 일관된 브랜드 경험을 누릴 수 있도록 개발되었습니다.
기존에 운영 중인 회의실 예약 앱의 디자인 시스템을 계승하여, 중대형 오피스 환경에 최적화된 웹과 태블릿 버전을 새롭게 구축한 프로젝트입니다. 사내의 수많은 회의실 현황을 실시간으로 파악하고 예약 및 취소를 신속하게 처리할 수 있도록 설계되었으며, 대규모 조직의 사용자가 데스크톱과 현장(회의실 입구)에서 모두 일관된 브랜드 경험을 누릴 수 있도록 개발되었습니다.
Photoshop
Illustrator
Affinity
Designer
Affinity
Photo
2018
회의실 예약
웹 / 탭 디자인
디자인 (100%)
기획 (60%)
퍼블 (100%)
HODUCLICK
기존에 운영 중인 회의실 예약 앱의 디자인 시스템을 계승하여, 중대형 오피스 환경에 최적화된 웹과 태블릿 버전을 새롭게 구축한 프로젝트입니다. 사내의 수많은 회의실 현황을 실시간으로 파악하고 예약 및 취소를 신속하게 처리할 수 있도록 설계되었으며, 대규모 조직의 사용자가 데스크톱과 현장(회의실 입구)에서 모두 일관된 브랜드 경험을 누릴 수 있도록 개발되었습니다.
간편하고 정확한 회의실 관리
HODUCLICK
간편하고 정확한 회의실 관리
HODUCLICK
간편하고 정확한 회의실 관리
HODUCLICK
간편하고 정확한 회의실 관리
HODUCLICK
예약하는 사람도, 관리하는 사람도 흐름이 끊기지 않는 경험을 만들었습니다.
전자결재의 복잡한 기능으로 불편함을 겪는사용자 시점으로 설계하고 디자인하였습니다
예약하는 사람도, 관리하는 사람도 흐름이 끊기지 않는 경험을 만들었습니다.
예약하는 사람도, 관리하는 사람도 흐름이 끊기지 않는 경험을 만들었습니다.
전자결재의 복잡한 기능으로 불편함을 겪는사용자 시점으로 설계하고 디자인하였습니다
1
CONTEXT
모바일 회의실 예약에서
기업용 관리 시스템으로
모바일 회의실 예약에서
기업용 관리 시스템으로
모바일 환경에서 개인이 회의실을 예약하는 방식으로 설계된 서비스를, 수많은 회의실과 인원을 실시간으로 조율해야 하는 관리자용 웹 환경으로 확장했습니다. 사용 주체와 환경이 달라진 만큼, 단순히 화면을 키우는 것이 아닌 관리자의 업무 흐름에 맞는 새로운 구조가 필요했습니다.
1
한눈에 파악하기 어려운 회의실 현황
한눈에 파악하기 어려운
회의실 현황
회의실마다 예약된 개수를 숫자로 일일이 대조하며 빈 시간을 찾는 방식은 관리의 피로도를 높입니다. 어디가 여유 있고 어디가 마감 임박인지, 데이터의 밀도를 시각적으로 즉각 판단할 수 있는 구조가 필요했습니다.
회의실마다 예약된 개수를 숫자로 일일이 대조하며 빈 시간을 찾는 방식은 관리의 피로도를 높입니다. 어디가 여유 있고 어디가 마감 임박인지, 데이터의 밀도를 시각적으로 즉각 판단할 수 있는 구조가 필요했습니다.
회의실 A
회의실 A
예약
7 / 9
회의실 B
회의실 B
예약
3 / 8
회의실 C
회의실 C
예약
2 / 6
CALENDAR
+
BOOK A ROOM
BOOK A ROOM
CALENDAR
+
BOOK A ROOM
BOOK A ROOM
2
끊기지 않는 사용자의 시선
끊기지 않는 사용자의 시선
예약은 단독적인 사건이 아니라, 전체 타임라인 속에서 빈틈을 찾아 끼워 넣는 '조율'의 과정입니다. 페이지가 넘어가며 전체 현황이 가려지는 순간, 사용자는 방금 확인한 스케줄의 맥락을 잃고 다시 돌아가 확인해야 하는 비효율을 겪습니다. 단 1초도 전체 스케줄에서 시선이 떨어지지 않는 환경이 필요했습니다.
예약은 단독적인 사건이 아니라, 전체 타임라인 속에서 빈틈을 찾아 끼워 넣는 '조율'의 과정입니다. 페이지가 넘어가며 전체 현황이 가려지는 순간, 사용자는 방금 확인한 스케줄의 맥락을 잃고 다시 돌아가 확인해야 하는 비효율을 겪습니다. 단 1초도 전체 스케줄에서 시선이 떨어지지 않는 환경이 필요했습니다.
3
읽기 전에 인지해야 하는 정보
읽기 전에 인지해야 하는 정보
현장에서 디바이스는 멈춰서 확인하는 것이 아니라, 지나치며 순간적으로 인지하는 것입니다. 작은 텍스트와 복잡한 정보는 그 순간을 방해하고, 공간 운영의 흐름을 끊습니다.
현장에서 디바이스는 멈춰서 확인하는 것이 아니라, 지나치며 순간적으로 인지하는 것입니다. 작은 텍스트와 복잡한 정보는 그 순간을 방해하고, 공간 운영의 흐름을 끊습니다.
OCCUPIED
2
SOLUTION
더 직관적인
예약 경험을 위한 설계
더 직관적인 경험을 위한 설계
시간 흐름 기반 타임라인으로
프로세스 재구성
복잡한 관리 시스템의 진입 장벽을 낮추기 위해 '직관적 인지'와 '동선의 단순화'에 집중했습니다. 타임라인 기반의 상태 시각화와 단일 화면 내 인터랙션 통합은 예약부터 승인까지의 모든 맥락을 하나로 연결하며, 어떤 환경에서도 끊김 없는 운영 경험을 제공합니다.
Instant
Cognition
시간 흐름으로 읽는 회의실 사용 현황
시간 흐름으로 읽는 회의실 사용 현황
#밀도 시각화
#실시간 현황
#직관적 파악
여러 회의실의 예약 상태를 숫자로 비교하는 대신, 정보를 시간 흐름 위에 시각화했습니다. 타임라인 바의 채움과 컬러만으로 각 공간의 사용 패턴을 직관적으로 파악할 수 있으며, 비어 있는 시간과 곧 종료되는 예약을 빠르게 인지해 즉각적인 공간 판단과 효율적인 배분이 가능합니다.
여러 회의실의 예약 상태를 숫자로 비교하는 대신, 정보를 시간 흐름 위에 시각화했습니다. 타임라인 바의 채움과 컬러만으로 각 공간의 사용 패턴을 직관적으로 파악할 수 있으며, 비어 있는 시간과 곧 종료되는 예약을 빠르게 인지해 즉각적인 공간 판단과 효율적인 배분이 가능합니다.
1% - 99%
0%
100%
Background
내 예약
예약 불가
흐름을 끊지 않는 모달 예약
흐름을 끊지 않는 모달 예약
시간 흐름 기반 타임라인으로
프로세스 재구성
일반적인 페이지 이동 대신, 전체 타임라인을 배경에 그대로 유지하는 모달(Modal) 구조를 고집했습니다. 관리자는 현재 예약 중인 상세 내용과 전체 일정을 한 화면에서 동시에 장악하며, 인지적 공백 없이 정확하게 의사결정을 내릴 수 있습니다.
일반적인 페이지 이동 대신, 전체 타임라인을 배경에 그대로 유지하는 모달(Modal) 구조를 고집했습니다. 관리자는 현재 예약 중인 상세 내용과 전체 일정을 한 화면에서 동시에 장악하며, 인지적 공백 없이 정확하게 의사결정을 내릴 수 있습니다.
모달 레이어
맥락 유지
운영 연속성
Seamless
Transition
시간 흐름 기반 타임라인으로
프로세스 재구성
현장에 맞게 설정하는
상태 컬러 시스템
현장에 맞게 설정하는
상태 컬러 시스템
시간 흐름 기반 타임라인으로
프로세스 재구성
웹 어드민에서 관리하던 정보가 현장에서도 직관적으로 연결될 수 있도록, WAITING, OCCUPIED, AVAILABLE 세 가지 상태를 컬러로 구분했습니다. 또한 공간의 성격과 운영 방식에 따라 태블릿 화면 타입을 직접 선택할 수 있어, 다양한 현장 환경에 유연하게 대응할 수 있습니다.
웹 어드민에서 관리하던 정보가 현장에서도 직관적으로 연결될 수 있도록, WAITING, OCCUPIED, AVAILABLE 세 가지 상태를 컬러로 구분했습니다. 또한 공간의 성격과 운영 방식에 따라 태블릿 화면 타입을 직접 선택할 수 있어, 다양한 현장 환경에 유연하게 대응할 수 있습니다.
상태 기반 컬러
현장 최적화
운영 유연성
Environment
Adaptive
시간 흐름 기반 타임라인으로
프로세스 재구성
3
TAB VER
현장용 탭 디자인
현장용 탭 디자인
사용자가 회의실 사용 여부를 빠르게 인지하고, 즉각적인 행동으로 이어질 수 있도록 UX 흐름에 초점을 맞춰 설계되었습니다. Waiting, Occupied, Available의 상태를 컬러로 명확하게 구분하고, 중앙의 원형 타이머를 통해 남은 시간과 진행 상황을 직관적으로 파악할 수 있도록 했습니다.
Check-in, End, Reservation과 같은 주요 액션을 화면 내에서 바로 수행할 수 있게 하여, 별도의 탐색 없이 빠른 의사결정과 효율적인 이용이 가능하도록 구성했습니다.
WAITING
#FFD91B
회의 시작 전 상태로, 예약된 사용자가 체크인을 진행할 수 있도록 유도하는 단계입니다. 남은 시간을 카운트다운 형태로 제공하여 사용자의 행동을 자연스럽게 유도하며, 일정 시간 내 체크인이 이루어지지 않을 경우 자동 취소되는 구조로 회의실 회전율을 고려한 UX를 반영했습니다.
10:52 AM, 유진형 유저의 11:00–11:59 회의가 예정되어 있으며, 대기 상태에서 Check-in을 유도합니다.
OCCUPIED
#FE2E41
회의가 진행 중인 상태로, 현재 사용 중인 시간과 종료 시점을 명확하게 전달하는 데 중점을 두었습니다. 남은 시간을 원형 타이머로 시각화하여 직관적으로 인지할 수 있도록 했으며, 필요 시 즉시 종료(End)가 가능하도록 하여 유연한 사용 흐름을 지원합니다.
11:15 AM, 회의가 진행 중인 상태로 남은 시간을 확인하고 필요 시 종료할 수 있습니다.
AVAILABLE
#0099FF
회의실이 비어 있는 상태로, 사용자가 즉시 예약할 수 있도록 유도하는 단계입니다. 현재부터 다음 예약 시간까지의 여유 시간을 명확하게 보여주어 빠른 판단이 가능하도록 했으며, 즉각적인 예약 액션을 통해 사용자의 흐름이 끊기지 않도록 설계했습니다.
01:00 PM, 회의 종료 후 회의실이 비어 있으며, 다음 예약 전까지 즉시 이용이 가능합니다.
3
TAB VER
현장용 탭 디자인
현장용 탭 디자인
사용자가 회의실 사용 여부를 빠르게 인지하고, 즉각적인 행동으로 이어질 수 있도록 UX 흐름에 초점을 맞춰 설계되었습니다. Waiting, Occupied, Available의 상태를 컬러로 명확하게 구분하고, 중앙의 원형 타이머를 통해 남은 시간과 진행 상황을 직관적으로 파악할 수 있도록 했습니다.
Check-in, End, Reservation과 같은 주요 액션을 화면 내에서 바로 수행할 수 있게 하여, 별도의 탐색 없이 빠른 의사결정과 효율적인 이용이 가능하도록 구성했습니다.
WAITING
WAITING
#FFD91B
회의 시작 전 상태로, 예약된 사용자가 체크인을 진행할 수 있도록 유도하는 단계입니다. 남은 시간을 카운트다운 형태로 제공하여 사용자의 행동을 자연스럽게 유도하며, 일정 시간 내 체크인이 이루어지지 않을 경우 자동 취소되는 구조로 회의실 회전율을 고려한 UX를 반영했습니다.
10:52 AM, 유진형 유저의 11:00–11:59 회의가 예정되어 있으며, 대기 상태에서 Check-in을 유도합니다.
10:52 AM, 유진형 유저의 11:00–11:59 회의가 예정되어 있으며, 대기 상태에서 Check-in을 유도합니다.
OCCUPIED
OCCUPIED
#DC414E
회의가 진행 중인 상태로, 현재 사용 중인 시간과 종료 시점을 명확하게 전달하는 데 중점을 두었습니다. 남은 시간을 원형 타이머로 시각화하여 직관적으로 인지할 수 있도록 했으며, 필요 시 즉시 종료(End)가 가능하도록 하여 유연한 사용 흐름을 지원합니다.
11:15 AM, 회의가 진행 중인 상태로 남은 시간을 확인하고 필요 시 종료할 수 있습니다.
11:15 AM, 회의가 진행 중인 상태로 남은 시간을 확인하고 필요 시 종료할 수 있습니다.
AVAILABLE
AVAILABLE
#0099FF
회의실이 비어 있는 상태로, 사용자가 즉시 예약할 수 있도록 유도하는 단계입니다. 현재부터 다음 예약 시간까지의 여유 시간을 명확하게 보여주어 빠른 판단이 가능하도록 했으며, 즉각적인 예약 액션을 통해 사용자의 흐름이 끊기지 않도록 설계했습니다.
01:00 PM, 회의 종료 후 회의실이 비어 있으며, 다음 예약 전까지 즉시 이용이 가능합니다.
01:00 PM, 회의 종료 후 회의실이 비어 있으며, 다음 예약 전까지 즉시 이용이 가능합니다.
4
USERFLOW
페이지 전환 없이
완결되는 예약 구조
사용자가 예약 가능한 회의실을 확인하고, 모달을 통해 정보를 입력한 뒤, 최종 승인(Confirm) 단계까지 이르는 모든 과정을 단일 화면 내 인터랙션으로 유기적으로 통합했습니다. 불필요한 페이지 이동을 제거하여, 탐색과 예약 관리가 끊김 없이 이어지는 최적의 동선을 구축했습니다.
5
UI / INTERACTION
전체 화면
전체 화면
웹과 태블릿 환경의 전체 화면을 한눈에 확인할 수 있도록 구성했습니다. 각 디바이스에서의 화면 구성과 주요 기능을 통해 서비스 전반의 흐름을 직관적으로 파악할 수 있습니다.
메인 & 예약 현황
[VIDEO]
회의실 관리 & 처리 모달
[VIDEO]
아바타
[VIDEO]
사용자 관리 & 설정
[VIDEO]
현장용 탭디자인
[VIDEO]
5
UI / INTERACTION
전체 화면
호두 프리미엄 버전 중 성숙한 성격에 맞추어 다크 버전으로 진행하고, 이전 구축한 호두 기본 디자인 시스템을 활용하여, 호두 사용자와 일반 사용자 모두 편리하게 사용가능한 UI를 디자인했습니다.
메인 & 예약 현황
[VIDEO]
회의실 관리 & 처리 모달
[VIDEO]
아바타
[VIDEO]
사용자 관리 & 설정
[VIDEO]
현장용 탭디자인
[VIDEO]
[01]
[02]
[03]
[04]
[05]
[END]