[Daily UI 002] - Credit Card Checkout

저는 요새 Daily UI 라는 뉴스레터를 이용해서 UI 스터디를 진행중인데요 (1편 참고)

 

2번째 과제를 받았습니다.

 

신용 카드 결제 화면 과제군요, 첫 과제 Sign Up에 이어 정말 중요한 화면이죠, 점점 이 뉴스레터에 신뢰가 갑니다.

저는 개인적으로 비즈니스에 도움되는 디자인에 좀 더 높은 점수를 줘야 한다고 생각하고 있거든요.

 

아 참 Authoring Tool을 Framer에서 Figma로 바꿨습니다.

Framer 초보라 빠르게 디자인하기에는 Figma가 낫겠더라고요,

프로토타이핑에 특화된 툴이라 그런지 화면 설계는 불편했습니다. 그냥 제가 Framer를 잘 못써서 그런 것 같기도..

 

그리고 타겟 해상도도 iPhone 11 Pro로 바꾸었습니다.

맨날 최저 해상도만 가지고 작업하다가 최신 해상도에 도전해본 기억이 없어서 이번에 도전해보려고요!

 

이번에도 서론이 길었군요. 각설하고, 2번째 과제의 프로토타입을 보시겠습니다.

 

신용카드 등록 플로우

 

이제 한 화면 한 화면 볼까요?

 

멤버십 업그레이드 배너

결제 유도가 아무 곳에나 있다보면 아무래도 거슬릴 것 같아서, 결제가 하고싶어질 수 있는 화면에서 배너로 노출해봤어요.

뭔가 기능의 부족함, 답답함을 느낄 때 슬그머니 접근하는 전략

업그레이드, 멤버십 가입 보다 더 좋은 버튼 텍스트가 있을 것 같지만.. 다음에 고민해보도록 하겠습니다.

 

멤버십 가입 모달

멤버십 가입 안내 모달을 띄우고,

멤버십에 가입하면 얻을 수 있는 이득을 설명합니다.

 

사실 제목부터 "멤버십에 가입하세요" 보다는 직접적인 혜택을 제목에 쓰는 게 더 좋을듯하지만, 제 서비스 상세 feature 들이 아직 정해진 상태가 아니라서 일단은 얌전하게 제목을 썼어요

 

일러스트레이션의 경우에도, 일러스트레이션 대신 멤버십이 이용할 수 있는 화면, 기능을 GIF로 보여주는 게 효과적일 것 같아 보여요. 하지만 역시나 상세 feature 가 정해지지 않았기 때문에 이번에는 이 정도로 마무리 할게요ㅎㅎ

 

그리고 스크롤하면 아래와 같이 멤버십에 대한 자세한 내용을 제공하고 있어요.

멤버십의 자세한 내용

원래 여기서 2가지 업그레이드 버튼(구매)을 누르면 애플의 경우 앱스토어 인앱결제 모달이 나오는 게 가장 자연스럽지만,

오늘은 자연스럽지는 않지만 과제를 연습할 겸, 신용카드 등록하는 화면으로 연결시켜볼게요.

 

신용 카드 등록

짠, 간단해보이지만 사실 벤치마킹을 많이 한 신용카드 등록 화면이에요. 한 줄에 카드번호와 등록년월, CVC값을 등록하게 하려는 의도가 들어있어요.

"이 카드를 주로 사용합니다"를 누르면서 다음에는 카드 등록 없이 결제로 안내하려고 하고 있고요.

 

신용카드 등록 완료

Uber, Lyft, Shakeshack, Instacart 등 9개의 서비스의 신용카드 등록화면을 보면서 느낀 점은

아.. 우리만 애플페이 없어.. 였습니다.. (의외의 느낀점..)

아이러니하게도 오늘의 과제인 신용카드 등록은 애플페이가 런칭된 국가에서는 크게 필요 없을 수 있겠다 싶더라고요.(애플페이가 그만큼 강력해보였습니다.) 하지만, 우리나라에서는 여러 사정으로 아직 애플 페이가 없으니 신용카드 등록이 쓰일 수 있겠어요.

 

결제 내용

결제를 마무리하기 전에 무엇을 결제하는지 정리해서 보여주고, 결제 수단과 합계, 그리고 안전을 위해서 결제관련 약관을 소개합니다.

 

결제 완료 얼럿

결제 완료 버튼을 누르면 빠르게 닫을 수 있는 Alert 으로 결제 완료 다음의 액션을 유도하도록 해봤어요.

---

오늘의 #DailyUI 한 줄 코멘트

애플페이가 등장하면,
신용카드를 등록할 필요가 없어질지도