brunch

매거진 사이드프로젝트 일기

라이킷 15 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 포동포동 May 06. 2022

MVP 모델로 개발해보기(2)

사이드 프로젝트 일기

들어가기 전에

중간발표 및 피드백을 주고받는 자리가 마무리된 후 저희들은 1차 출시와 UT 등의 일정을 정리하기 위해 다시 회의를 했어요. 이번 2편은 그 부분에 관한 이야기들을 해볼까 합니다. 회사에서 진행했던 UT를 참고해서 진행했고, 결과를 바탕으로 출시 후 수정하기 위해 사용성 테스트를 진행했죠. 저희는 목표였던 데이터 툴의 경우 출시 후 시간이 조금 지난 뒤 GA를 달았기에 수정을 하기 위해선 직접 서비스를 경험한 사용자들의 목소리에 우선 집중하기로 했습니다!

이제 본격적으로 저희들이 진행했던 사용성 테스트와 개선안 등을 한번 풀어나가 볼게요! 다양한 방법이 있겠지만 어떻게 진행했는지, 결과를 이렇게 활용했구나 등 가볍게 봐주시면 감사하겠습니다.

1. 출시

7주 차에 론칭하는 것이 목표였던 저희 팀은 개발자분들의 밤샘 코딩(...)과 팀원들의 노력으로 출시 시기를 맞출 수 있었습니다. 이후 팀원들이 각자 속한 커뮤니티에 홍보를 했죠. 2022년 05월 05일 기준으로 393명이 저희 서비스를 이용해주셨습니다. 사용자 수가 늘어남에 따라 우리 팀은 사용성 테스트를 통해 문제점들을 정리하기 위한 일정을 정리했습니다.

어떻게 사용성 테스트를 하면 좋을까...?

우선 어떤 방식으로 사용성 테스트를 할지 난감했습니다. 현재 코로나로 인해서 팀 모임조차 온라인으로 대체되고 있는 상황에서 사용성 테스트를 과연 오프라인으로 할 수 있을지, 그리고 온라인으로 했을 경우 어떤 방식으로 의견 공유가 오가며, 테스트하는 화면을 실시간으로 체크할 수 있을지 등 많은 고민에 빠졌죠. 저희는 우선 테스트에 대한 설문지를 정리하기로 했습니다.

2. 사용성 테스트 설문지 제작하기

팀원 중 디자이너 분과 함께 정리한 설문지입니다.

이전 회사에서 진행했던 사용성 테스트 설문지를 토대로 문서를 작성해나갔습니다. 이전 글에 언급되는 휴리스틱을 참고하여 설문지를 만들어나갔고, 마지막에 서술 형식으로 서비스에 대한 질문을 추가했어요. 설문지는 노션으로 정리했고 개인적으로 사용성 테스트를 진행할 때는 각자 상황에 맞게 활용했습니다.

우선 오프라인에 모여서 인원을 모집하여 진행하려고 하였으나, 그때 상황이 여의치 않았어요. 팀원분들의 지인을 위주로 온라인, 오프라인으로 설문을 진행했습니다. 저희들이 타겟으로 삼았던 사용자들의 연령대가 20 ~ 30대로 넓지 않았기에 또래들로 충분했죠.

3. 사용성 테스트 결과 정리하고 반영하기

우선 노션에 처음 정리했던 설문에 대한 응답들입니다. 이런 내용들을 정리하여 개선 사항에 반영했어요.

팀원 한분당 1명 ~ 2명 정도의 테스트 참여자에게 진행하고 이를 기록해두었습니다. 각 질문에 대한 추가 의견까지 받았어요. 해당 내용들은 노션으로 정리하다가 개인별로 추가하려다 보니 양이 많아져서 파일로 받아서 정리했습니다.

그중 2차 개발에 포함되어있는 사항들, 당장 고쳐서 반영을 하기에는 어려운 사항들, 이미 수정하려고 준비하고 있던 사항들을 제외하는 게 우선이었습니다. 설문 결과를 정리하고 프론트엔드, 백엔드분들과 함께 수정사항에 대해 논의하고 디자인적으로 풀어서 해결할 수 있는 부분들에 대해 정리해나가기 시작했어요.

페이지 상으로 메인 페이지, 테스트 페이지, 상세 리스트 페이지로 총 3 페이지에 대한 수정사항을 우선적으로 반영하기로 했습니다. 그중 리스트 페이지의 경우 UT를 할 때에 개발과 디자인이 충분치가 않았고 단순히 디자인 상으로 디벨롭을 하는 과정이었기에 이번 개선에 포함시켰습니다.

사용성 테스트 진행 후 정리했던 수정에 포함되어야 할 최소한의 피드백들입니다.

UT에서 나왔던 공통된 이야기들은 크게 4가지로 구분이 됩니다. 명확성, 효율성, 복구 가능성에 대한 언급이 제일 많았기에 이를 우선적으로 개선사항에 포함시켰고 다른 의견들 중 당장 처리할 수 있으며, 수정되면 좋을 부분들은 바로 작업에 들어갔습니다.

4. 수정된 페이지들

메인 화면의 개선 전 화면(좌)과 개선 후 화면(우)

이전 1편에서 보여드렸던 화면들과 개선된 화면을 차례로 들고 와서 설명해볼게요. 우선 메인 화면의 변화입니다. 1편 마지막에 링크를 걸긴 했는데, 저희 서비스를 이용해 보신 분이라면 메인 첫 화면이 지금 소개해드리는 페이지와는 다르다고 느끼실 텐데요!

여기서 말하는 메인 페이지는 홈이 아니라 테스트와 리뷰를 전부 작성하고 나면 나타나는 페이지를 의미해요. 서비스 플로우상 조금 깊이(?) 위치하고 있죠. 어쨌거나 메인 화면에서의 가장 많은 지적을 받았던 부분은 바로 메인 카드에서의 클릭커블함이 느껴지지 않는다였어요.

실제로 개선 전의 화면에서 보이는 냠냠, 쓰읍, 씁하, 헥헥은 전부 클릭하면 해당 추천 페이지로 넘어가는데 이를 인지하지 못하겠다는 내부 의견도 있었죠. 이를 반영하기 위해 이전 테스트에서 이미 경험해봤던 버튼의 형태를 그대로 들고 와서 반영했습니다. 빠르게 흘러가는 프로젝트였다보니 다이나믹한 변화를 추구하기보다, 빠르게 수정하고 반영할 수 있는 방법을 우선적으로 찾았던 것 같아요.

두번째로 반영한 부분은 메인 카드 하단에 위치하고 있는 랜덤 추천의 위치였습니다. 서비스의 컨셉이 음식을 추천해준다!라는 것에 집중하고 싶었기에 오늘의 추천을 상단으로 올려 목적에 맞는 서비스를 구성하려고 했어요.

리뷰 페이지 화면의 개선 전 화면(좌)과 개선 후 화면(우)

다음으로 수정한 페이지는 리뷰 화면입니다. 앞에서 언급된 불편함은 기존의 매운 음식에 대한 태그가 너무 모호하다는 점과 리뷰를 적어야 하는 음식의 수가 왜 3개나 되는지 모르겠다는 의견, 태그의 종류와 수가 너무 적어서 맛을 표현하기에는 충분하지 못하다는 것이었습니다.

그래서 저희는 음식의 수를 1가지로 줄이고 맨 상단에 왜 리뷰를 적어야 하는지를 간단하게 표시해주었어요. 또한 태그의 수를 늘리고 이마저도 활용하기엔 부족하다고 느껴질 경우에 선택사항으로 추천음식을 받거나 이 인풋을 활용해서 의견을 더 받을 수 있는 창구를 추가했습니다.

리스트 페이지 화면의 개선 전 화면(좌)과 개선 후 화면(우)

마지막으론 리스트 페이지입니다. 이는 개발단과 디자인단에서의 구현 과정에서 수정할 부분들이 생겨서 정리했다고 보시면 될 것 같아요. 우선 좌측에 있던 하단 디스크립션을 구성하는 워딩과 정보 보충 등을 정리하여 우측으로 수정하였고, 사실 아직 개발 구현 단계까지 적용이 되진 않았습니다.

사용성 테스트가 마무리되고 이를 반영하여 개선하는 과정이 쉬운 일은 아니었던 것 같아요. 괜찮았을 거라고 생각했던 페이지들에 대한 사용자들의 반응이 예상과 달라서 신기하기도 했고, 걱정되던 부분은 그대로 사용자들의 반응에서 나타나는 것도 신기했어요.

물론 수정된 부분들이 정말로 괜찮은지, 개선 방향과 접근이 맞았는지 등에 대한 검증은 비록 추가적으로 진행하지 못했지만 이를 한 번이라도 경험해보고 수정된 버전을 배포해봤다는 것만으로 좋은 경험이 됐습니다.

5. 최종 페이지와 마무리 주절주절

최종적으로 확정되어 배포된 페이지들을 한 번에 어떻게 보여줄까 고민하다가, 제가 최근에 개인적인 사유로 만들었던 페이지를 그대로 들고 왔어요. ~~(절대 다시 만들기 귀찮아서 그런 건 아닙... 읍...)~~

앞에서 언급했던 홈 화면이에요. 귀여운 캐릭터가 사용자들을 반겨주죠. 총 몇 명이 사용을 했는지 언급해주고 저 유행(?)에 나도 얼른 편승해야지..라고 생각했으면 좋겠어요. 그렇게 테스트를 하러 가는 플로우에 대한 페이지들입니다.

길고 길었던 테스트와 리뷰를 마치고 나면 나타나는 결과 페이지예요. 각 레벨에 맞는 일러스트가 그려져 있고 웃긴 문구가 적혀있어요. 특징과 추천 음식도 소개해주니 꼭 한 번씩 테스트를 해봐 주세요..! (늙은 제가 최대한 젊은이들을 따라가 보려고 노력했답니다...)

테스트 결과까지 보고 나시면 나오는 메인 페이지입니다. 사용성 테스트 비포 페이지와 동일하게 구현하고 디자인되어있어요. 물론 추천 페이지는 아직 배포가 되어있진 않기에 최소 MVP 모델을 구현했구나! 정도로만 봐주시면 감사하겠습니다 :)...

사실 이번 프로젝트에선 제가 개인적으로도 슬럼프(?) 아닌 슬럼프가 와서 참여에 많은 열정을 쏟지 못한 것 같아서 팀원들께 죄송해요. 그리고 두 번째 글을 무려 120일 넘게 쓰지 않았다는 점도 죄책감도 들고... 게을러 빠진 저를 다시 한번 반성하게 되네요.

다음 글은 아마 빠르게 정리가 된다면, 디자인 시스템에 관련된 이야기들을 하려고 해요. 브랜드 디자인부터 디자인 스타일 가이드, 컴포넌트 시스템 정리까지 이 모든 이야기를 한번 풀어나가려고 합니다. 아마도 많이 걸릴 것 같고... 올해 안으로는 글이 마무리가 될 수 있을까... 하는 그런 걱정도 들지만 최선을 다해보려고 합니다.

요즘 제가 지내고 있는 날들이 굉장히 중요한 시기라고 생각해요. 무엇보다 회사에서 많이 배우고 있고, 조금 더 많은 것들을 해보는 중이거든요. 이번 기회를 잘 노려서 조금 더 멋진 디자이너가 되면 좋겠어요. 읽어주신 분들 정말 감사하고, 별 내용 없지만 궁금한 점들(프로젝트나, 뭐든!) 물어봐주시면 제가 아는 선에서 최대한 답해드릴게요!