배란 테스트 검사

기존의 타 어플의 배란테스트와 달리 오프라인에서의 행동이 온라인으로 연결될 수 있게 기획 변경 및 디자인 하였습니다.

검사 메인

타사와 동일하게 기존 배란 테스트 검사방법을 나열 하는 방식의 기획은 사용자가 해당 내용을 확인하지 않을 가능성을 파악하지 않고 기획된 내용이며, 이미 기존에 나와있던 다른 어플들과 비슷한 방식이었습니다.

이는 하루하루만의 독자적인 테스트 검사 방식과는 어울리지않아 해당 페이지는 기다리는 시간을 보여주는 타이머 페이지로 제작되었으며, 만약 하루하루 배란테스트를 한 번도 해보지 않았다며 튜토리얼이 나타나며 쉽게 따라해 볼 수 있게 도와줍니다.

알림 설정의 경우, 기존 기획서 상에서는 사용자가 화면을 끝까지 내려보지 않을 것을 생각하여 타이머 하단에 배치하여 알림을 설정할 수 있도록 유도하였습니다.

변경된 기획 디자인에서는 사용자가 타이머 시작을 누르고 알림 설정을 화면을 스크롤하지 않고도 액션을 취할 수있도록 타이머 하단에 배치하였습니다.

검사 촬영

기획서 상에서 가로 배열로 되어있었지만 기획과 디자인 논의를 하던 도중 해당 영역을 좀 더 정확하게 잡아낼 수 있는 로직을 개발하신 개발자분의 도움으로 사용자에게 좀 더 친숙한 UX로 변경할 수 있었습니다.

사진찍어 카드 등록 혹은 주민등록증 입력 등의 촬영화면과 동일한 UI를 가졌으며, 타이머 시작 이후 몇 분이 지났는 지에 대해 알려주는 텍스트 타임이 상단에 노출됩니다.

시선의 순서에 따라 중요도가 높은 텍스트를 상단에 배치하였으며, 10분이 지난 이후에는 박스 상자가 빨간색으로 변하며 하단 텍스트의 내용이 변경됩니다.

사진 확인

사용자가 촬영하는 것에만 집중할 수 있도록 해당 영역을 확대하여 보여주는 형태로 변경되었습니다.

기획서상 하단에 있던 TIP의 경우 하단 텍스트보다 먼저 확인되어야 하는 내용이므로

시선의 흐름에 따라 상단에 배치하였으며, 재촬영과 분석 시작 버튼을 2버튼 형태로 배치하여 사용자가 쉽게 클릭할 수 있도록 변경하였습니다.

기존에는 없던 분석 실패화면이 들어가면서 상단의 Tip을 보고도 애매한 경우, 분석 시작을 누른다면 해당 화면이 나타나며 좀 더 상세하게 알려줍니다.

분석완료

분석 화면의 경우, 규제에 관련된 민감한 사항이기때문에 간략한 앞면으로 설명을 요약하였으며, 기획서 하단의 내용을 카드 뒷면으로 옮겨 사용자가 내용을 좀 더 쉽게 확인 할 수 있도록 디자인 하였습니다.

아쉬웠던 점

카드의 일러스트를 제작할 때, 랜덤한 일러스트가 나타나야해서 어떤 형태의 디자인으로 그려야하는 지가 가장 어려웠습니다.

배란이 아닐 경우, 사용자가 해당 일러스트를 보고 안좋은 경험을 한다고 느낄 수 있는 것들을 피해 만들어야해서 표현하는 것에 어려움이 컸던 것 같습니다.

Last updated