NOL Partner Center Revamp

NOL 파트너 센터 개편

Project Briefs

펜션 업주용 ‘파트너 센터’의 디자인 개선 방향을 수립한 선행 프로젝트입니다. UX 리서치를 통해 확인한 고객 페인포인트, 내부 운영상의 이슈를 포괄하여, 파트너센터를 근본적으로 개선할 수 있는 방향성을 도출하고 이를 프로토타이핑 했습니다.

My Role

서비스 전반의 UX 디자인을 디렉팅 하는 동시에, Hands-on 멤버로서 UI 스타일링 작업 일부를 서포트 했습니다.

Participants

Design Directing: Jay
UX Design: KKuni
Prototyping: KKuni

User Insights

  • 펜션 업주의 다수는 50대 이상의 고연령층으로, 디지털 서비스에 익숙하지 않습니다.

  • 수기로 판매 관리를 유지하는 업주가 여전히 많으며, 이 경우 지류 달력에 판매 현황을 메모하는 방식을 주로 사용 합니다.

  • 객실 ID나 객실명으로 객실을 인지하지 않고 “특정 날짜에 특정 가격으로 판매하기로 한 상품”같은 맥락으로 기억하는 경우가 많습니다.

Defining the Problem

  • 업주의 행동 패턴과 맞지 않는 캘린더 뷰

    • 주요 과업인 ‘객실 판매 현황 확인’, ‘판매가 설정’, ‘방막기・방열기’가 세 개의 캘린더로 분산되어 있어 여러 캘린더를 넘나들며 판매 관리를 해아 하는 문제

    • 세 개의 캘린더에서 동일 정보가 중복 노출되어 현재 위치를 혼동하는 문제

    • 업주가 가장 먼저 인지하는 판매 금액과 판매 날짜가 충분히 강조되지 않은 캘린더 뷰

    • 고객의 요구사항이나 연락처를 기록하는 메모 기능의 시인성이 낮아 사용성이 저하되는 문제

    • 한눈에 파악이 중요한 현재 상태(판매 중, 예약 완료, 입금 대기 등)의 디자인의 시인성이 낮은 문제

    • 불필요한 정보가 많아 복잡도가 높은 객실 정보 디자인

  • 정보량과 맞지 않는 지면 사이즈

    • 정보량이 적은 화면을 풀스크린으로 제공하여 과업 버튼이 시야에서 벗어나는 문제

    • 전체 플로우 중 예상치 못한 풀스크린 팝업으로 인해 현재 위치 파악이 어려운 문제

  • 복잡도를 증가시키는 디자인 톤앤매너

    • 복잡한 정보를 담기에 적합하지 않은 컴포넌트 스타일과 컬러 스킴

    • 인풋 박스, 버튼, 셀렉트 박스 등 주요 컴포넌트가 명확하게 표현되지 않는 디자인

    • 메뉴의 의미를 직관적으로 전달하지 못하는 아이콘 스타일

Solution

  • 캘린더뷰 통합

    • 세 개로 분리된 캘린더뷰를 하나의 캘린더로 통합

    • 업주의 과업 처리 동선을 단축하고, 중복 노출되는 정보를 간소화

  • 디자인 톤앤매너 개선

    • 전체적인 디자인 톤앤매너를 미니멀하게 재정비하여 핵심 정보에 집중할 수 있는 구조로 개선

    • 주요 컴포넌트를 조작감 있고 명료한 스타일로 재설계

    • 객실 정보 카드에서 불필요한 정보를 제거하고, 업주가 가장 중요하게 인지하는 정보를 강조

    • 객실의 현재 상태를 변별력 있는 컬러 스킴으로 표현

  • 지면 활용성 개선

    • 화면 내 불필요하게 낭비되는 공간을 최소화

    • 전체 퍼널의 지면 사용 규칙을 체계화 (풀스크린, 레이어 팝업, 토스트 팝업 활용 기준)

    • 정보량에 적합한 화면 사이즈를 적용

Design Outcome

통합 캘린더

세 개로 분리되어 있던 캘린더를 하나의 통합 캘린더로 일원화하여 업주의 과업 처리 동선을 단축하고, 캘린더 뷰의 디자인 방향성을 미니멀하게 재정립하여 핵심 정보에 집중할 수 있는 톤앤매너로 개선하였습니다.

기존의 셀렉트 박스 내부에 위치했던 조건 설정은 토글 토큰 형태의 버튼으로 전환하여 외부에 직접 노출 함으로써 조작 편의성을 높였으며, 주간 정보 영역, 카드 간 간격, 캘린더 프레임 등 불필요하게 낭비되던 공간을 컴팩트하게 조정함으로써 한눈에 더 많은 정보를 확인할 수 있도록 개선하였습니다.

객실 정보 카드 및 주요 과업 버튼 개선

객실 정보 카드에서 각 객실의 현재 상태(빈객실/입금대기/예약완료/방막음)를 컬러로 구분하여 업주가 한눈에 인지할 수 있도록 개선하였습니다. 카드 내부 정보의 크기와 정렬을 조정하여 가독성을 높였으며, 특히 객실명과 판매가 정보의 크기를 확대해 업주가 객실을 명확한 구분자로 인식하도록 유도했습니다.

주요 과업 버튼 중 셀렉트 박스 하위에 위치한 캘린더 정보 정렬 조건은 토글 토큰 형태의 버튼으로 전환하여 외부에 직접 노출함으로써, 캘린더 정보를 재정렬하면서 동시에 확인할 수 있도록 개선하였습니다. 또한 버튼의 위치, 크기, 형태 등을 최적화하여 주요 과업 버튼의 시인성을 강화했습니다.

일괄 망박기/방열기

정보량에 비해 큰 화면이 사용되어 주요 과업 버튼 인지가 어려웠고, 입력이 요구되는 기능만 제공되어 나머지 단계 파악이 어렵다는 문제와, 기간 선택과 요일 선택이 분리되어 있어 조작이 복잡한 이슈를 해결하기 위해, Date Picker를 활용한 레이어 형태의 지면으로 개선하였습니다. 또한 잔여 단계와 필수 입력 항목을 명확하게 표현하여 사용성을 향상시켰습니다

모달 활용 방식 개선

전체 퍼널에서 모달 사용에 대한 규칙이 없어, 다양한 사이즈의 풀페이지, 레이어 팝업, 일반 팝업이 혼재되어 사용자 혼란이 발생했습니다. 이에 세 가지 형태의 레이어 팝업을 어떤 상황에 사용할지에 대한 규칙을 수립하고 적용하였습니다.