Figma로 그려본 나의 첫 와이어프레임
프레제뉴 개선 Wireframe 그려보기 #코드스테이츠 PMB 8기
아래 프레제뉴 UX 분석과 이어지는 글입니다.
이번 글에서는 UX 분석을 바탕으로 개선점을 도출하고, 페이퍼 프로토타입과 Wireframe을 그려봅시다!
프레제뉴 UX/UI 개선점
(개선 포인트에 대한 설명/이유는 이어지는 이전 글 참고 부탁드립니다)
1. 서비스에 대한 충분한 사용 설명이 이미지로 제시되어야 할 필요가 있다.
2. 펀딩 성공 후기 개선, 펀딩 페이지 실사용 예시를 이미지로 드러내야 한다.
3. 용도에 따라 진입 경로 구분이 필요 (Microcopy 개선 용도)
4. 펀딩 페이지 편집기 개선이 필요
5. 1/N 금액 시뮬레이션 제공이 필요
6. 타겟에 맞는 UX Writing
7. 펀딩 개설 후, 공유의 어려움을 UX/UI로 풀 방법 찾기
(중요 순은 아니다ㅎㅎ) 이 중 가장 먼저 개선되어야 할 부분은 유저가 공유를 편하게 할 방법을 찾는 거라 생각했지만.. 이 부분에 대한 개선책을 생각해내지 못했다.. 그래서 오늘 글에서는 펀딩 개설 과정에서 찾은 개선점 위주로 페이퍼 프로타입 작성, 와이어프레임을 그려볼 것이다.
기존 펀딩 진행 과정 flow
기존 펀딩 개설 과정의 플로우다. 개설자에 대한 필수 정보와 펀딩에 필요한 정보가 섞여있다는 느낌이 있었고, 정확히 내가 무엇을 위해 이 정보를 기입하는지 모호했던 질문도 있었다. 예를 들어 본인의 선물을 펀딩 할 때도, 친구의 선물을 펀딩 할 때도 동일하게 "누가 선물을 받게 되나요?"라는 질문을 받게 된다. 이 질문은 펀딩 완료 랜딩페이지의 프로필 정보를 위한 질문인데, 본인 선물을 위해 펀딩 개설을 하고 있던 사용자라면 이게 무슨 소리인 건가 싶을 것이다..!
그래서 위에서 언급한 문제들을 해결하기 위해
선물 펀딩 목적에 따라 진입 경로 구분 (본인/친구)
가입 정보를 그룹핑해 내비게이션을 표시
각 단계가 어떤 정보를 위한 질문인지 화면마다 메인 카피 배치
1/N 계산하기 기능 추가
펀딩 페이지 작성 화면에서 완료 화면이 예측 가능하도록 개선
이 포인트들에 중심을 두고 개선 페이퍼 프로토타입을 작성해보았다.
개선 flow 페이퍼 프로토타입
처음 그려본 페이퍼 프로토타입!!정보 그룹핑, 내비게이션 표시
기존에 흩어져 있던 [펀딩 페이지로 노출되는 내용], [필수 기본 정보]를 구분해 묶고, 단계를 구분했다. 구분한 단계는 상단에 진행 내비게이션으로 표시해, 펀딩 완료까지 얼마나 남았는지 표시했다. 그리고 각 화면에서 정보 기입의 목적을 명확하게 전달하기 위해, 메인 카피로 설명을 도왔다. (그리고 여기에선 따로 작성하지 않았지만, 본인/친구 진입경로에 따라 메인 카피, 마이크로 카피들이 변화한다고 설정했다)
본인/친구 진입 경로 구분
페이퍼 프로토타입에는 잘 표현되지 않았지만, 을 통해 각 케이스가 다른 마이크로 카피를 볼 수 있게 기획했다. (아이패드로 글씨를 잘 안 쓰다 보니 글씨가 멍멍판이다 8ㅅ8)
1/N 계산하기 기능 & 펀딩 페이지 작성란 개선
펀딩 모금액 설정 페이지 아래에 1/N 시뮬레이션이 가능한 계산기를 넣었다. 그리고 펀딩 페이지 작성란을 최대한 실제 노출 화면과 비슷한 화면에서 작성하도록 개선했다. 그리고 임시저장도 넣었다. (ㅋㅋ잘 꾸미고 싶으면 임시저장 필요하니까)
Figma 사용해서 Wireframe 그려보기
언급한 것처럼 정보 그룹핑, 내비게이션으로 화면별 내용 구성을 다시 했다. 화면[1]에서 본인/친구 경로 구분, [4]에서 1/N 계산기, [6]에서 펀딩 편집기 개선 내용을 확인할 수 있다. 그리고 [8]은 흩어져있는 약관, 동의 필요 항목을 모았고, 이 화면에서 중요한 점은 '쉬운 언어'의 사용이라고 생각한다. 1020이 주로 사용할 서비스인 만큼, 수수료와 결제에 대한 내용은 쉽고 편안한 단어를 사용해 전달해야 할 것이다. 갑자기 등장하는 '법적 처벌'같은 단어 대신에 말이다ㅠㅠ
Figma로 화면 설계서 작성하기
서비스 기획에 필요한 다양한 문서를 거쳐보는 김에, 와이어프레임에서 한 발짝 더 나가 화면 설계서를 작성해보기로 한다. 와이어프레임으로 그려본 개선 페이지 중, 개인적으로 설명이 필요할 것 같은 '펀딩 금액 설정' 페이지를 화면 설계서로 표현해보았다. 물론 현업에서는 전 페이지를 다 작성해야 하겠지만, 오늘은 여까지만..
검은색 원은 영역을 크게 나누는 용도, 빨간 원은 클릭 가능한 영역, 파란 원은 클릭 불가능한 영역을 표시하기 위해 사용했다.
화면 설계서를 작성하면서 재미있었던 점은 '내가 나와 싸운다'는 느낌이었다 ㅋㅋㅋ 다 했다. 하고 다시 돌아보면 '어 이거 이렇게 하면 저렇게 문제 생기는데?' 몇 분 전의 나에게 시비를 걸고 다시 와이어프레임으로 돌아가 문제를 점검, 해결하거나 디스크립션을 추가하는 과정을 몇 번 거쳤는데 이 '따지고 드는' 과정이 꽤 재밌었다. (과연 현업에서도 그럴까? 심장이 떨어지는 경험으로 바뀌지 않을까?^^)
피그마
쉽게 배우고, 가볍다! 피그마는 제대로 사용해본 것이 이번이 처음인데, 그간 PPT를 사용하면서 느꼈던 불편함을 많이 해소시켜주는 툴이었다. 나는 전체 결과물을 한눈에 보면서 작업하길 좋아해서 가끔은 PPT의 화면이 제약으로 느껴질 때가 많았다. 그런다고 포토샵을 쓰기엔 너무 프로그램이 무겁고 느려 답답했는데... 넓고 가볍게 사용할 수 있다는 점에서 속 시원한 툴이라고 느껴졌다! 피피티나 포토샵을 다룰 수 있다면 배우기도 쉬운 툴이기도 했다. 다른 툴들에 대한 궁금증도 생긴다! 어도비 XD나 다른 툴을 경험해보진 못했지만 ㅎㅎ 피그마가 익숙해지면 다른 툴도 도전해봐야겠다.
첫 화면 설계서의 추억
글 제목을 첫 와이어프레임이라고 적었으나, 나는 이전에 화면 설계서 비스므레한 것을 작성해본 경험이 있다. 때는 19년도 마케팅 인턴을 하던 시절. 이러이러한 문제가 있으니 서비스 소개 페이지 개편이 시급(ㅎㅎ)하다는 아이디어를 냈고, 리더님과 이사님의 오구오구 아래 페이지 기획의 콘텐츠 선정부터 카피라이팅까지 A to Z를 맡아볼 수 있었다.
키노트로 한 땀 한 땀 만들었던 나의 첫 화면 설계서(라고 스스로 불렀던 것) 몇 장을 가져와봤다. 당시에는 저 결과물을 만들어 낸 것에 자신감 뿜뿜 내 새끼 너무 자랑스럽다!의 마음이었는데, 지금 화면 설계서, 와이어프레임에 대해 제대로 배워보고 나니 이렇게도 부끄러울 수가 없다 ㅋㅋㅋ 심지어 몇 년 전 한참 신입 서비스 기획자 포지션 공고에 지원했을 때는 이 결과물을 '화면 설계서' 또는 '스토리보드' 결과물이랍시고 자랑스레 포트폴리오에 넣었더랬다 8ㅅ8
개발자, 디자이너가 보고 어떻게 구현해야겠구나-는 잘 보이지 않는, '예뻐 보이는 문서'와 그리드에만 집중해 만들었던 내 첫 '화면 설계서'. 그래도 잘한 건 잘했다, 이건 이렇게 고치면 좋겠다 가르쳐주신 많은 분들의 도움으로 세상에 나올 수 있었던 건 정말 큰 행운이었다. 덕분에 좋은 포트폴리오가 생겨 또 다른 기회를 만나기도 했다. 서비스가 개선되고, 모습이 변화하면서 서비스 소개 페이지도 그때와는 모습이 많이 바뀌었지만, 탄생의 과정에 제 노력이 듬뿍 들어간 VIBE 서비스 소개 페이지가 궁금하시다면 아래를 Click 해주세요 <3
땡스 투 서핏! 벌써 5000명❓
크롬 익스텐션으로 서핏을 잘 사용하고 있는 유저라 안 그래도 서비스에 대한 감사함이 컸는데!! 서핏에 꾸준히 글이 소개되면서 제 글을 읽어주시는 분들이 많이 늘어났네요.
덕분에 벌써 오천명이나 되는 분들이 제 브런치 글들을 읽어주셨습니다. 조만간 서핏에서 느꼈던 편리한 사용성을 제 관점으로 정리해보면 어떨까 하는 생각도 듭니다! 조금 더 부지런해져야겠어요 ㅎㅅㅎ 읽어주신 분들 감사합니다 (하트)(하트)
