배차 요청, 플랫폼 서비스 개편기
로지스팟 플랫폼 디자인 개편 - 배차 요청 편 (1/2)
지난 9월, 로지스팟 플랫폼의 중요한 기능 중 하나인 배차 요청 서비스 개편했습니다.
오늘은 그 배차 요청 서비스를 디자인하는 과정에 대해서 이야기를 해볼까 합니다.
-
이미 서비스가 라이브 중 인 상황에서 디자인 개선은 참 어려운 것 같습니다.
입사하고 처음 진행한 작업으로 부담감도 있지만 서비스에 대한 이해도가 낮아 많은 고민이 있었습니다.
그래도 할 건 해야 하니까!
우선 제가 할 수 있는 작업을 먼저 시작했습니다.
누가 무엇을 왜 하고 있고 어떻게 하고 있을까?
어떤 유저가 이 기능을 언제 / 무엇을 하려고 / 어떻게 쓰고 있나요?
유저가 이 서비스를 선택한 이유는 무엇인가요?
유저가 이 서비스에서 가장 좋아하고/싫어하는 것은 무엇인가요?
기능에 대한 현재 상황과 유저가 얻고자 하는 동기 그리고 기대하는 결과를 이해하고자 배차 요청에 대한 기능을 정의했습니다.
더불어 기존 유저들의 피드백과 이해 관계자의 의견을 수집하였는데요. 많은 대화가 오고 가며 듣는 입장의 사람이 되기도, 아니기도 하며 진행을 하였습니다.
이 외에도 데스크 리서치, 통계 정보 분석 등을 통해 서비스를 파악하고자 했습니다.
그렇다면, 현재 어떻게 되어 있을까?
현재 디자인을 분석하고 어떻게 동작하는지 이해하고자 했습니다.
이를 통해 기능에 대한 의도를 파악하고 해석하려고 했습니다. 더불어 휴리스틱 기준으로 문제가 되는 부분을 구분하고, 개선의 방향을 정리하였습니다.
[Jakob's 10 Usability Heuristics]
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
그렇게 정리된 디자인 시안
배차 요청 페이지 디자인을 하며 크고 작은 수정을 많이 거쳤습니다. 너무 많은 양을 담을 수 없어 크게 세 가지로 정리된 디자인 시안을 가지고 이야기하고자 합니다.
배차 요청 페이지는 운송에 필요한 차량 배차를 요청하는 (원하는 차량, 이동하는 물품, 운송사 혹은 기사님에게 전달해야 하는 메시지 등) 페이지입니다.
페이지 디자인 시 고려해야 할 점은 아래와 같습니다.
1) 현재 입력한 정보 확인
2) 필수 정보 입력에 대한 안내
3) 배차 운행의 시작점이 되는 페이지
배차 요청 시 생각보다 많지만 중요한 정보를 입력해야 합니다. 이 부분에 있어 유저가 부담으로 느껴지지 않고 쉽게 입력할 수 있도록 안내하고 싶었습니다. 그리고 라이브 중인 유용한 기능을 더 많은 유저들에게 알리고 싶었습니다.
(아래 시안은 목업 화면이며, 정리가 미흡한 부분도 있을 수 있습니다. 그 부분은 흐린 눈으로 봐주세요)
첫 번째 시안
기존의 한 페이지에서 해결하는 입력 방식을 두 가지 스텝으로 구분하여 입력하도록 유도했습니다.
입력하는 영역과 내용을 확인하는 영역. 크게 레이아웃을 구분하여 시선의 흐름이 일관될 수 있도록 했습니다. 다만, 경유지가 추가되는 경우 페이지의 길이가 길어질 수 있었습니다.
두 번째 시안
입력하는 영역과 입력된 정보를 확인할 수 있는 영역이 공존하여 구성되어 있습니다.
각 카드를 열어 정보를 입력할 수 있도록 되어 있고, 입력된 정보는 카드에 기록되어 바로 확인할 수 있습니다. 더불어 최근 배차한 이력을 조회할 수 있어, 해당 부분을 클릭하여 바로 정보가 입력될 수 있도록 기능을 제공하고자 했습니다. 더불어 키보드로만 작성할 수 있도록 탭으로의 이동 및 선택이 가능하도록 하고자 했습니다.
세 번째 시안
한 페이지에서 모든 것을 해결할 수 있도록 시안입니다. 상하차지 입력은 추가하기를 눌러 팝업에서 해결할 수 있도록 했습니다. 디자인하면서도 고민했지만, 경유지 문제와 더불어 입력되는 정보들이 늘어날 경우 대응이 어려울 것이라 생각했습니다.
프로덕트 팀 내부 회의 및 전체 회의를 통해 의견을 수집해 진행하였습니다.
이렇게 몇 가지 갈래로 시작한 디자인은 점차적으로 수정과 수정을 거듭하여 정리할 수 있었습니다. 너무 많은 작업이 진행되었고, 작업을 진행하며 기준에 못 미치는 디자인이 정리되기도 했습니다. (까먹거나.. 까먹거나.. 정리되지 않은 케이스가 발견되거나...)
디자인이 정리되기 전 작업 초기에 정리한 목적을 달성하는지 지속적으로 체크하면서 작업을 진행했습니다.
이를 바탕으로 정리된
결과적으로 시안 중 두 번째 시안을 발전시켰습니다. 물론 엄청나게 많은 개선 작업을 진행했습니다. 그리고 현재 라이브 중인 서비스도 이 후 계속 개선 작업을 하고 있습니다. (현재 보면 달라진 부분이 느껴집니다..)
그럼 자세한 내용은 아래에서 계속하겠습니다.
우선 기능을 우선순위로 분류해 화면에 접속하는 유저가 바로 원하는 기능을 쓸 수 있도록, 그리고 순차적으로 따라갈 수 있도록 안내하는 것에 집중했습니다.
화면을 복잡하게 만들며 더 많은 것을 읽게 만드는 화면을 구분 짓는 선, 면 요소들을 과감하게 제거했습니다. 제거할 것은 제거하고 추가할 것은 추가해 정보의 그룹을 정리하였습니다. 더불어 색의 명도 대비를 조절해 시각적 계층 구조를 정리했습니다. 더불어 주시 영역과 팔로우 영역을 구분하여 콘텐츠의 중요도/사용 순서에 따라 유저의 시선 이동 흐름에 맞춰 콘텐츠를 배치하였습니다.
작업자에 따라 다르게 쓰인 버튼과 입력창 그리고 어느 곳이 틀렸는지 바로 알 수 없는 에러 메시지 등 여러 가지 인터페이스가 복잡하게 쓰이고 있었습니다.
이러한 부분을 유저에게 틀린 부분에 대한 안내가 잘 되고, 그다음 행동을 유도할 수 있도록 개선하였습니다. 물론, 행동에 대한 결과(성공, 실패)도 제대로 안내하고자 했습니다.
입력의 편의성을 위해 자동완성이 지원되는 입력창 부분의 안내를 추가하였습니다. 커서가 활성화되기 전 이 전의 사용한 정보를 클릭해서 한 번에 입력할 수 있도록 안내를 강화했습니다.
-
다음 이야기에서는
다음 배차 요청 2편에서는 기존에 제공되는 기능에 대한 개선, 추가된 새로운 기능에 대한 안내 마지막으로 개편된 디자인에 대한 사용자들의 피드백에 대해 이야기드리겠습니다.
제가 경험한 것, 고민한 것에 대한 과정을 적어보며 작업하는 동안의 저를 다시 되돌아 볼 수 있었는데요. 보시는 분들도 이러한 고민을 했구나라며 재밌게 읽어보셨으면 좋겠습니다.
물론 앞으로도 개선의 여지는 무한이 있고, 점진적 발전할 수 있도록 노력해야겠죠!!
긴 글 읽어주셔서 감사합니다.
다음 이야기에서 만나요!
참고자료
