POAP 리디자인 프로젝트
(with Ish DAO )
우연한 기회로 웹3에 관심을 갖게 되었는데 때마침 웹3를 메이커들에게 좀 더 쉽게 풀어주고 해커톤까지 주관하는 글리치 해커톤 프로그램이 있었다. (처음엔 해커톤까지 나갈줄은 몰랐다..)3주에 걸친 온보딩이 끝나고 나서 디자이너 온보딩 캠프에 참여하게 되었는데 웹 3 디자이너 커뮤니티인 IshDAO가 주관했다.
web 3 one screen challenge는 총 3파트로 나뉘어져있었다. NFT, De-fi 그리고 Social part!
나는 거기에서 소셜파트를 정했고 POAP이라는 웹사이트를 리디자인하는 프로젝트를 진행했다.
POAP은 Proof of Attendance Protocol의 약자로서 여러분들의 추억 혹은 경험을 (혹은 행사이력)을 디지털 모멘텀으로 저장을 할 수 있게 하는 것이다. 예를 들면 특정 행사에 참여했을 때 그 행사가 중요했던 행사였다면 그 행사를 참여했다는 이력을 대체불가능한 어떤 디지털 에셋으로 남기고 다른 사람들에게 보여줄 수 있다는 것은 공인력을 갖을 수 있게 될 것이고, 혹은 정말 좋았던 콘서트라던가 아니면 전시회 등 이벤트 이후에도 긍정적인 경험을 계속 향유하고 싶다고 했을 때에도 이런 POAP이 적용될 수 있다.
하지만 이런 POAP에서도 불편한 점들이 있었다. 참고로 이 리디자인 프로젝트는 2023년 5월 첫째주에 진행된 것이고 POAP을 발급하고 웹 사이트에서 배포하는 과정까지만 리디자인을 했던 것으로 보면 좋을 것 같다.
첫 번째 문제점은 발행을 하기까지의 여정에 대해 접근성이 낮아서 발행자체에 진입장벽이 있었다는 점.
두 번째 문제점은 POAP을 배포할 때에 유저가 어떻게 배포를 해야하는지 잘 가이드를 해주지 않는다 점.
해당 문제들이 생기게 된 원인으로는 현재 POAP이 POAP이라는 서비스를 이용하기 위한 가이드와 POAP이라는 서비스 제공이라는 두 가지 과제에 대해 중심점을 모호하게 두었기 때문이라고 생각했다.
이 중심점을 조금 더 서비스 제공이라는 쪽에 포커싱을 해보기로 했다. 좀 더 직관적인 레이아웃으로 명료하게 행동을 유도할 수 있는 방향으로 개선을 하기로 결정했다.
POAP의 당시 issuer page먼저 POAP을 발행하는 데 있어서 POAP이 좀 더 자연스러운 접근을 위해서 POAP 에 대한 이용 설명을 하고 CTA 버튼을 제공했다고 생각했다. 하지만 결론적으로 봤을 때 POAP을 자주 사용하는 사람들에게 있어서 이런 플로우는 효율성을 저해하는 절차가 될 거라고 판단이 됬다.
POAP이 자주 발행되는게 서비스의 목표라고 한다면 이런 플로우를 좀 더 직관적이게 단축시켜야 할 것 같았다. 그래서 how to use POAP의 Hero image 에 바로 POAP을 발행할 수 있는 CTA 버튼을 만들고 같은 맥락으로 상단 네비게이션 바에 SIGN in 버튼을 만들었다. 왜냐하면 POAP을 발행하기 위해서는 Sign in을 필수적으로 먼저 해야하기 때문이다.
또한 단순히 UI 상에서 변화가 아니라 POAP이 가지고 있는 가이드에 대한 고민을 UX 적으로 개선을 해보고 싶었다. “POAP이 뭔지도 모르고 어떻게 쓰는지도 모르는 유저가 발행을 할 수 있겠어? “라는 질문에 저는 “POAP이 뭔지는 몰라도 뭘 하고 싶은지는 알지 않을까?” 라는 니즈 중심적으로 UX 흐름을 풀어가보고자 했다.
그래서 현재 POAP의 플로우상에서 이런 방향으로 풀어나가기 위해서 다음과 같이 고민을 해보았다.
현재 POAP의 메인페이지의 구조에서 발행을 하기 전에 좋은 맥락, 가령 POAP을 설명한다던가 어떻게 POAP 이 작동되는지에 대한 정보가 제공될 때 POAP에 대해서 발행하러 가기 과정으로 바로 연결하는 플로우도 함께 고려를 해보았다.
현재 how to issue POAP에서 포압을 발행할 수 있도롣 되어있는데 이 플로우를 이 방향으로 개선을 해보았습니다.
첫번째 플로우는 우선 CTA 버튼에 접근성을 높여서 바로 발행을 할 수 있는 플로우로 이동시키는 것입니다. 그 이후 이것을 어떻게 이용할 것인지에 대한 설명부분을 유저가 자신의 목적에 맞게 선택을 할 수 있도록 유도하는 것이다. 이렇게 하는 이유는 사실상 POAP이라는 개념을 이해하는 것이 어려운 것이 아니라 사용할 때 어려운 점은 실제로 POAP을 작성하고 발행하는 팁에 있어서 어려움이 클 것이라고 생각을 했기 때문이다. 따라서 유저는 자신이 선택한 목적에 맞게 가이드를 받을 수 있게 설계를 해보았다.
Redesign) Make POAP을 누르고 나오는 모달예시로 POAP을 티켓 용도로 쓰고 싶다라고 선택을 하게 되면
내용을 작성하는 페이지에서 우측 팁을 통해서 내가 필요한 관련 팁들을 간략하게 볼 수 있다. 만약 팁이 더 필요하다면 하단의 버튼을 눌러서 좀 더 자세하게 써져있는 document 페이지로 이동합니다. 해당 UI는 링크드인을 많이 참고했다.
Redesign) POAP making page작성을 하는 부분은 기존의 POAP 발행부분과 크게 달라진 부분은 없지만 하단에 visibility를 좀 더 사용자가 사용하는 목적에 대해 명확해질 수 있도록 ‘테스트용’인지 아닌지를 직접적으로 물어보게 UI를 바꾸고 작성 도중 사용자가 나중에 더 이어 쓸 수 있도록 save draft 기능을 넣었었다.
그리고 distribution 단계에 있어 현재 한 페이지로 나오는 이 단계를 프리뷰를 보는 페이지 그리고 distribution 방법을 1 task per 1 page로 좀 더 집중할 수 있게 개선을 해았다.
이렇게 POAP의 내용을 작성하고 나면 프리뷰를 확인하는 페이지로 이동이 되고 만약 해당 내용들이 알맞게 기입이 되었다면 다음단계인 distribution을 정하는 단계로 넘어간다.
distribution의 방법을 정하는데 있어서 사용자가 어떤 방법을 어떻게 선택하면 좋을지에 고민이 되게 한다는 문제점이 있었는데 이 점은 서비스가 좀 더 추구하는 방향으로 유도를 할 수 있지 않을까라는 생각이 들었다.
CS 팀에게 자문을 구해서 distribution의 방법들에 대해서 좀 더 깊은 정보를 요구했고 mint 방식이 결국엔 가장 많이 쓰이는 방법이며 보안성도 좋기 때문에 서비스 쪽에서 mint를 적극적으로 보여주지 않을 이유가 없어보였다.
그래서 mint 쪽에 시선이 더 가게 하여서 distribution에 대해서 고민을 할 시간을 단축해보기로 했다.
Redesign) POAP distributing method selection page특정방식의 발행버튼을 누르게 되면 세부적으로 옵션을 선택하는 창이 뜬다. POAP은 특정개수 이상의 POAP을 발행을 하면 비용을 지불해야하는 형식으로 되어있는데 갯수를 입력하지도 않은 상태에서 보여주는 것이 아니라 정말 그 특정개수의 POAP이 넘겨진다는 것을 인지하는 순간 뜨게 해주는 것 UI로 바꾸었다.
Redesign) POAP distribution option detail pagedistribution이 끝나고 나서 보여지는 페이지을 말씀드리자면, 먼저 distribution이 끝나고 나면 가장 유저가 주의 깊게 보는 것은 그래서 내가 만든 POAP이 어떻게 절차를 밟고 있는지 승인이 되고 있는지 거절이 되었는지를 알려주는 정보일 것이다.
그래서 해당 정보를 좀 더 직관적으로 보여주기 위해서 프로그레스 바와 진행과정에 대한 정보만 보여주고 나머지 정보에 대한 부분은 아코디언 형식으로 따로 보여주는 UI로 구상을 했다.
Redesign) Distribution page워크샵 내용이 정말 웹 3 뉴비들에게 잘 맞춰졌다는 생각이 들었고 (물론 de-fi 쪽은 정말 어려움...) 덕분에 WEB3 디자인 온보딩 캠프를 재밌게 즐길 수 있었다. WEB3 디자인 세계에 대해 배울 수 있는 알찬 시간이었다. web2와 web3의 간격을 줄이려고 하는 시점에서 UXUI가 해볼 수 있는 일들이 많을 것 같은 생각이 들었다.
글리치 해커톤과 Ish DAO에게 정말 감사하다는 말씀을 드리고 싶습니다.
IshDAO Twitter
https://twitter.com/ishdao_eth?lang=en
