HBsmith 앱콘솔 리디자인 #1

B2B UI/UX 개선

HBsmith는 QA 테스트 자동화 서비스를 제공합니다. Saas 기반의 웹 솔루션인 앱콘솔은 그 중 QA 테스트 업무를 관리하고, 고객에게 정보를 제공하는 역할을 하고 있습니다. 초기의 개발 당시 고객의 니즈와 성능 향상에 집중해 왔던 터라 사용자의 경험에 대한 고려가 다소 부족했습니다. 기능과 고객이 늘기 시작하며 UI/UX 관점의 불편함에 대한 이슈가 늘었습니다.
HBsmith의 디자이너로 합류하게 되자마자 가장 먼저 풀어야 할 과제가 바로 이 제품의 UI/UX를 개선하는 것이었습니다. 이번 글은 그 초기 단계인 리서치부터 UI 구조 개선을 위한 아이디어 구상 단계를 이야기해보려 합니다.

[B2B UI 개선을 위해 고려할 사항]

UI /UX 개선을 위해 좋은 레퍼런스를 찾고, 기존의 개선 사례를 학습하거나 새로운 아이디어를 고안하는 것도 좋은 디자인을 위해 필요한 과정 중 하나이다.
다만 B2B의 UI/UX, 특히 그 중 업무와 관련된 툴의 경우는 편리하고 즐거운 사용자 경험을 통한 만족이 아닌 업무의 생산성과 효율성, 확장성이 최우선 가치가 되어야 한다. 매출과 직접적 연결점이나 허들을 낮춘 편리함이 아닌 효율적이고 성공적인 업무 처리나 리소스 절약과 같은 접근을 위해서 가장 중요한 것은 바로 내가 개선할 서비스의 이해관계자들과 그들 각각의 니즈와 이용 패턴을 구분하고, 전체적인 업무 프로세스를 파악을 파악하는 것이다.
앱콘솔을 개선하기 위해 고민해야 할 기준도 이와 같은 결에서 정리하였다.

유사한 패턴의 반복을 고려한 확장성, 유연성 있는 컴포넌트 설계

프로세스를 자연스럽게 진행할 수 있도록 다음은 동작을 유도

중요도와 필요에 따른 적절한 정보들을 배치

업무 선상의 반복되는 동작을 위해 클릭이나 동선 최소화

휴먼 에러 발생을 방지하기 위한 정보나 동작의 제약

[리서치]

1. 현황에 대한 파악 및 분석
개선의 목표와 방향성을 정하기 위해 가장 먼저 서비스의 구조와 현황…등을 확인하는 과정이 꼭 필요하다. 이전에도 유사한(QA 자동화) 프로젝트를 진행했던 경험은 도움이 되었지만, 앱콘솔은 사용 경험이 없었기에 정보를 파악하기 위해 알아봐야 할 것들이 많았다.
우선 HBsmith의 앱콘솔은 크게 두 사용자 그룹과 목적으로 구분이 된다.

앱콘솔 사용자 그룹과 목적

각 사용자층의 목적과 행위에 대한 구분을 마친 뒤에는 내 선에서 가능한 범위의 고객별 use case를 수집했다.

외부 고객 use case 파악
고객사의 요구사항 기반으로 서비스 내에서 해당 정보를 확인

내부 고객 use case 파악
운영팀 업무 온보딩과 실무자 관점의 업무 수행을 통한 사용성 파악

2. 인터뷰를 통한 PainPoint 수집
실무 관점 사용, 목적과 구조를 어느 정도 파악한 뒤 내부 사용자 그룹 대상의 인터뷰를 진행하였다. 인터뷰는 개선을 진행하는 과정 중간에 여러 번에 걸쳐 수행되었는데, 초기 단계에서는 업무 프로세스 전반에 대한 이해와 정보 우선순위, 프로세스별 업무의 동작 패턴과 고객의 요구사항에 대한 수집을 위주로 진행하였다. 이를 통해 UI 디자인의 개편 시 고려해야 할 주요 항목을 정리할 수 있었다.

앱콘솔 불편사항과 원인 분석

고객의 pain point에 대해 수집할 때, 유의할 점이 있다. pain point에 대한 ‘근본적인 원인’을 파악하는 것이다. 사용자의 pain point는 현재 제공된 환경에 대한 부분이며, 디자인이 아닌 구조 정책, 정보의 정리로 해소가 가능한 부분도 존재하기 때문이다. 이런 부분들은 협의 사항으로 정리를 해두면 향후 개선 진행의 협의에 도움이 된다.

[수집 정보 정리 & Ideation]

이번 UI 개선을 통해 이루고자 하는 목적은 크게 두 가지로 정했다.

상품으로서의 가치 상승을 위한 UI 리디자인

앱콘솔 내/외부 사용자 그룹의 use case에 적합한 UI 제공

앱콘솔 개선을 위한 Keychallenges

목적과 목표로 할 항목을 정리 후 그에 맞춰 개선을 위한 ideation을 진행했다. 관련해서 반영된 개선 사항 중 몇가지를정리해 보았다.

[User Flow 개선 제안]

앱콘솔의 사용 빈도가 가장 높은 사용자 그룹은 운영팀이다.
운영팀의 경우는 할당된 프로젝트(팀)별로 화면을 전환하며 업무를 진행하는 경우가 많은데, 기존의 구조는 단일 프로젝트를 보는 데는 문제가 없지만 여러 프로젝트를 전환할 때마다 home 역할을 하는 목록 페이지를 거쳐야만 하는 flow 때문에 불편함이 있었다.
어느 페이지에 있든 프로젝트(팀) 전환이 가능하게 하여 내부 고객 사용성을 높이고, 단일 프로젝트 사용자인 외부 고객도 사용 시 어색함이 없도록 내비게이션과 flow를 개선하는 방안을 구상하였다.

내부고객과 외부고객의 동선을 분리한 Flow 개선

[충분한 콘텐츠(업무를 위한 정보) 영역 확보를 위한 레이아웃 개선]

기존 앱콘솔의 정보 제공 영역에는 고객에게 우리가 보여주고 싶은 정보와 내부 업무 프로세스에 필요한 정보가 구분 없이 채워져 있었다. 업무 시스템이라는 특징이 고려되지 않다고 판단되는 정보는 제거하고 정말 필요한 정보를 위주로 레이아웃을 개선했다.

앱콘솔 테스트 목록의 레이아웃 개선

위의 화면은 프로젝트별 테스트 목록을 보여주는 화면이며, 내부 사용자 그룹이 가장 많이 확인하는 화면 중 하나이다. 주로 내부 사용자인 운영팀의 접근이 가장 높으므로 고객에게 전달하고 싶은 내용인 HBsmith 소식을 과감히 없앴다. 결제와 가입을 해야 제공되는 특성상 굳이 필요가 없다 판단되는 footer 역시 없앴다. `테스트 상태 요약 정보`의 경우는 상시 확인이 필요한 정보는 아니다. 업무 전반의 상황을 파악하는 용도로 쓰이며, 단일 프로젝트보다는 전체 프로젝트를 한번에 제공해 주는 것이 관리자급 이상의 운영팀 구성원에게 더 유용하여 정보를 갈무리한 별도 페이지를 제공하는 안을 구상하였다.

[정보의 우선순위, 중요도 별 배치]

웹 서비스는 추가되는 기능과 제거되는 기능의 업데이트가 반복될 가능성이 크다. 앱콘솔 역시 그렇게 이전엔 제공했으나 현재는 기능의 고도화로 필요성이 낮아진 기능과 추가된 정보들이 존재한다. 이런 부분을 정리하여 제거하고, 운영팀 인터뷰를 통해 파악한 업무 순서와 연관성, 중요도에 따른 정보를 재배치해주는 과정을 거쳐 업무 진행 프로세스의 효율성과 사용성을 개선하였다.

앱콘솔 테스트 정보보기 패널의 정보 재배치 ideation

B2B UI/UX 관련된 아티클을 찾다보면 개념이나 디자인 시스템과 관련된 이야기는 많지만, 개선을 진행하는 과정의 사례들은 많지 않은 것 같습니다.
사람마다 또 회사마다 다르겠지만 어디서부터 어떻게 시작해야 할지 막막하거나 혹은 다른 곳은 어떻게 작업하는지 궁금한 분들도 있을 듯하여 지난 수개월 간의 작업을 글로 정리해보고 있습니다.

다음은 디자인 컨셉과 GUI 작업에 대한 이야기가 진행될 예정입니다.

긴 글 읽어 주셔서 고맙습니다. :)