WOWPAY
간편결제 앱 서비스로 UIUX Design 작업에 참여 했으며, UX측면에서 동선 최적화 및 터치 접근성 관련 사용성 관련 작업들을 수행하고, 개발과 디자인의 일관성을 위하여 피그마의 파운데이션 요소들을 구조화(variable)하였습니다.
2024
Year
3 Weeks
Duration
UX/UI
Category
Figma, Bootstrap
Stack
Problem
와우페이(WowPay)는 결제하거나 충전할 때마다 10% 보상이 돌아오는 간편 결제 서비스로, 점심시간에 빠르게 결제하고 혜택도 챙기고 싶은 직장인들을 위해 기획된 서비스입니다. 초기에는 기획자가 기본 와이어플로우를 구성한 상태였고, 저는 그 기반 위에서 사용성이 잘 살아 있는 UI/UX를 만드는 데 집중했어요. 회원가입시 컨텐츠 영역의 스크롤로 인해 사용성이 문제가 있었으며 한눈에 서비스들을 확인할수 있는 네비게이션이 많이 불편한 상태였습니다.
Solution
첫째, 회원가입시 길게 아래로 내려야 하는 불편한 사용성은 약관동의와 본인인증절차를 두페이지로 나누고 인증시 여러 페이지를 넘김이나 기본 모달창이 아닌 하단모달-바텀 시트(Bottom Sheet)로 구성해 흐름을 유지하면서도 페이지 이탈을 최소화했어요. 둘째, 직관적인 서비스 사용성을 위해 하단 네비게이션을 배치 했어요. 셋째, 디자인의 일관성을 위해 피그마로 작업시 컬러, 텍스트 스타일, 간격 같은 기본 요소들을 변수로 정리해 디자인 토큰으로 구성했어요. 이렇게 파운데이션을 미리 정리해두면, 화면마다 스타일이 달라지는 걸 막고 전체 디자인의 일관성을 유지할 수 있어요.
