앞의 케이스 스터디↗️ 에서 수면측정 앱 슬립루틴의 MVP정의가 어떻게 진행되었는지 보고 오셨다면, 이제는 그래서 슬립루틴의 MVP 2번째 골 - 쉽고 직관적인 UX 및 쉬운 슬립 리포트에 대해 살펴 봅시다.

‍

‍

직관적인 UX와 쉬운 분석 결과는 다릅니다. 슬립루틴의 UX를 맡게 되면서, 이 두 가지를 모두 다루어 볼 수 있었습니다.

• 📊 쉬운 수면 리포트

• ⚡️직관적이고 쉬운 앱

에 대한 이야기를 간략히 적어 보겠습니다.

‍

↓

‍

📊 쉬운 수면 리포트

쉬운 수면 리포트란 어떤 의미일까요? 전달하는 정보가 쉽고, 정보가 담긴 형태가 쉽다면 쉬운 리포트라고 할 수 있겠습니다. 그렇다면, 그렇게 만들면 되겠네요! (말은 쉽지)

‍

👼 기여한 방식

슬립루틴 MVP를 만들 당시, 팀에는 리드인 저를 제외하고 두 분의 디자이너분이 계셨어요. 두 분께서 리포트에 들어갈 여러 디자인 작업들을 진행해 주시고, 제가 PO분과 함께 리뷰하는 방식으로 리포트 디자인을 진행했습니다. 물론 필요하면 레퍼런스를 찾아 공유하거나 디자인을 수정하기도 했습니다.

‍

🏃어떻게든 시작부터

멋지지 않아도 괜찮고, 논리적으로 타당하지 않아도 괜찮습니다. 우선 시작을 하는 게 중요하니까요! 리포트의 형태를 띄고 있는 여러 서비스들을 참고해서 초안을 만들고, 같이 피그마에서 이리저리 바꿔 보며 디자인을 발전시켰습니다. 무엇보다 중요한 건.. 과정을 공유하고 피드백으로부터의 개선 아니겠어요!

‍

‍

💇다듬어 나가요

리포트를 직관적이고 이해하기 쉽게 디자인한다는 목표가 있으니, 기준 또한 그 곳에서 파생됩니다. 따라서 아래와 같은 질문들에 YES가 되는 방향으로 수정해 나가면 되겠죠:

• 제공된 정보가 타겟 유저가 소화할 수 있는지
• 표시되어있는 숫자들이 그들에게 어떤 의미인지 이해할 수 있는지
• 리포트 전체를 쉽게 둘러볼 수 있는지
• 유저들이 그들이 찾는 정보를 손쉽게 찾아낼 수 있는지

‍

‍

수면 측정 앱에서 알고싶은 정보 중 가장 알고 싶다고 응답한 부분과, 유저인터뷰를 통해서 알게 된 인사이트를 취합해서, '직관적이고 이해하기 쉽게' 에 의거해 수정을 거쳐 나갔습니다.

• 수면 효율이나 수면의 총 점수를 가장 상단에 보여주는 경향이 대부분의 타 앱들에서 보여졌습니다. 다만, 숫자가 가장 유저들이 이해하기 가장 쉬운 형태의 정보 전달일까? 라고 생각하면 아닐 수 있겠습니다. 유저에게 해석을 맡기고 있기 때문입니다. 따라서 슬립루틴에서는 숫자 대신 숫자가 의미하는 내용을 한 문장으로 짧게 전달해 주기로 했습니다.
• 최상단은 리포트를 처음으로 마주하는 곳이기 때문에 반드시 보여주어야 하는 부분만을 남기고, 위계를 정리했습니다.

‍

‍

✂️ 줄이고, 빼고, 가감하고: 힙노그램 산산조각내기‍

힙노그램은 수면 분석 결과의 거의 전부라고 이야기할 이해할 수 있는 지표입니다. 이 지표를 최대한 간단하게 구성할 수도 있지만, 힙노그램 자체를 유지하는 것이 정말로 '직관적이고 이해하기 쉬운' 리포트에 도움이 되는가? 를 고민했습니다.

• 유저가 받고 싶어하는 형태의 데이터로 해석 전달
• 한 화면에 한 가지의 정보 표
• 회사 내 수면 전문의 분들과 논의하며 의학적으로 적절한지에 대한 부분 지속적으로 확인

‍

🎯 더 많은 정보를 보여주고자 하는 욕심: MVP 골로 합의

• 제공해줄 수 있는 많은 정보들을 리포트 안에 담아내고자 하다 보니 스크롤이 길어지거나 혹은 in-depth 의 발생 여지 존재
• 쉬운 리포트란, 단순히 내용이 쉬운것 뿐만 아니라 유저의 사용성에도 적용되는 것으로 골 세팅을 합의했기 때문에, 위아래로의 단순한 (직관적인) 이동으로 얻을 수 있는 정보가 아니라면 우리의 골에 맞지 않다고 판단
• 스크롤이 길어져야만 한다면, 우리가 제공하는 것들이 정말로 필수적인 정보들인지, 다른 것을 빼면서까지 남겨야 하는 정보는 무엇인지를 논의하면서 리포트 MVP를 설계함

‍

‍

📊 총합 비율도 보기 쉽게, 이해하기 쉽게

• 반복된 정보로 빈 공간을 채우기보다는, 소화하기 쉽게
• 위계 체계를 잡고, 필요한 정보를 먼저 확인할 수 있게
• 문장 또한 유저가 가장 이해하기 쉽게

‍

‍

수면 결과에 따른 다양한 문장

개개인의 수면 결과에 따라 그날의 수면이 어땠는지를 점수 대신 한 문장으로 제공함으로서 수면 리포트의 이해력을 높였습니다. 이 때 어떤 문장이 언제 나타나야 하는지와 같은 구조 설계에 참여했고, TOV를 이해하기 쉽게를 기준으로 풀어냈습니다.

‍

‍

⚡️직관적이고 쉬운 앱

직관적이고 쉬운 사용성을 제공하기 위해서는, UI나 정보전달 체계가 쉽고 직관적이어야 하기도 하겠지만, 장면마다의 경험 또한 예상할 수 있고 쉬워야 합니다.

‍

‍

리포트의 경우 전달하는 정보가 한 방향이고, 한 위치 안에서 한번에 모든 정보를 전달하기 때문에 그 페이지 안의 구성이 중요했습니다. 그 외 알람을 세팅하거나, 권한들을 받거나 하는 부분은 유저 및 OS 시스템과 긴밀하게 작업이 이루어져야 하는 부분입니다. (마이크를 사용하고, 알람을 울리고, 푸시 얼럿을 보내고, 데이터 전송이 끊기는 것을 막아야 하고 등)

이러한 작업 환경을 고려하면서도 유저들에게 쉽고 직관적인 앱 사용 경험을 제공하기 위해 매 순간, 디자이너들은 비즈니스와 유저의 입장을 모두 고려해서 결정을 내리는, 고도의 능력이(^^;) 요구되었던 것 같네요.

‍

‍

📱 OS 에 맞는 플로우 별도 구현

스크린별로 제공되어지는 정보로 앞뒤 상황의 맥락을 알려줄 수 있어야 하고, 이 맥락은 OS 별로 익숙해져 있는 흐름이 다릅니다. MVP 골로 쉽고 직관적인 UX를 제공하기로 한 이상, 플랫폼 별로 가장 직관적인 앱 사용 경험을 제공해주고자 했습니다. 따라서 피그마 파일이 OS 별로 나뉘어졌고, 시스템에 최적화된 플로우를 각자가 가지게 되었습니다.

‍

‍

🤔 쉽고 직관적이라는 부분의 정의

때로는 디자인을 많이 봐왔기 때문에 당연하다고 생각되어지는 부분들이 있고, 유저 관점에서 한번 더 생각해보는 것이 어렵기도 합니다. 우리의 골이 쉽고 직관적인 UX인 이상, 헷갈릴 수 있는 여지가 있다면 괜찮겠지~ 하고 그냥 지나치는 것을 경계했습니다.

‍

🫡 그 외

‍

‍

📕 디자인 라이브러리

나뉘어진 피그마 파일 안에서도 함께 가져가야 할 부분은 컴포넌트로 제작해 공통된 컴포넌트 라이브러리를 연결해 사용했습니다. 추후 안드로이드, iOS 따로 컴포넌트 및 스타일을 정리하는 시간을 가지기도 했습니다.

‍

‍

‍

⌛️ 시간 활용 효율 극대화를 목표로 MVP 디벨롭 프로세스 변경

⓵ 화면에 반드시 들어가야 할 기능 정의, 와이어프레임 구현

⓶ 각 기능들은 시스템 컴포넌트로 구현; 그 사이 UI 구성 및 UXW 디벨롭

⓷ QA 진행하면서 디자인 수정 및 완성!

‍

‍

👨👨👧👧 VOC 관리

여러 채널에서 들려오는 소중한 유저들의 피드백을 수집해서 우리가 풀어야 할 사안들을 분석하고 우선순위를 정하는 데 활용했습니다.

‍

‍

슬립루틴 MVP를 마치며

데이터 세팅을 막 마무리하고 퍼널을 확인해 나가면서, 그 다음으로의 스텝을 밟아나가는 과정에서 이탈하게 되어서 아쉬움이 있기는 합니다. 다만 좋은 사람들과 즐겁게 일했고, 많이 배웠습니다. 슬립루틴의 건승을 바랍니다!! 👼

‍

‍

‍

‍