[문제해결스터디] 01

01. 요금제 페이지 카드 디자인

 

 

1. 아래 요금제들을 설명하기 전, 무료를 강조한 후킹 문구를 정중앙에 위치시킴으로써 관심을 유도했습니다.

 

2. 가장 인기가 많은 요금제를 사용자가 한눈에 알아볼 수 있도록, 인기추천 배지와 스토로크를 적용하였습니다. 색상은 흰색 배경에 대비가 강한 파란색을 사용해 주목도를 높였으며, 다른 요금제와 확실히 구분될 수 있도록 전체 크기를 키우고, 은은한 그림자 효과를 추가해 인기 요금제임을 더욱 강조하였습니다.

 

3. 요금제 이름 바로 아래에 각 요금제에 대한 간단한 설명을 추가하여, 해당 요금제가 어떤 사용자에게 적합한지 먼저 안내하였습니다. 관련 있는 정보를 하나로 묶어 배치함으로써, 사용자가 각 요금제의 특징과 적합 대상자를 직관적으로 파악할 수 있도록 정보를 제공하였습니다.

4. 무료 요금제의 경우, 0원이라는 점이 가장 중요한 정보이기 때문에, ‘1인당 1개월’과 같은 메타 정보는 제외하였습니다. 이를 통해 사용자는 가장 핵심적인 정보만 직관적으로 확인할 수 있습니다.

5. 각 요금제에 포함된 기능이 많아 점선 밑줄이 오히려 복잡해 보이고 가독성을 저해하여, 밑줄을 제거하였습니다. 이를 통해 더 깔끔한 디자인과 사용자가 내용을 한눈에 쉽게 파악할 수 있도록 했습니다.

6. Notion AI라는 중복된 단어는 제외하여 정보를 간결하게 전달하였습니다. 공통 단어이면서 핵심 정보인 ‘Notion AI 체험판’과 ‘Notion AI 포함’은 볼드체로 강조하였고, 체험판 부분은 회색으로 처리해 비활성화된 느낌을 주어 기능 사용이 제한적임을 나타냈습니다. 또한, 비즈니스와 엔터프라이즈 요금제에서만 제공되는 AI 기능은 포인트 컬러(블루)와 비슷한 톤의 배경색으로 처리해 눈에 부담을 주지 않으면서도 자연스럽게 눈에 띄게끔 결제를 유도하였습니다.

 

 

02-1. 상품 카드 리스트

 

1. 기존 대카테고리의 폰트 크기가 일반적인 모바일 폰트(15-16pt)보다 1~2pt 컸습니다. 특히 립메이크업, 아이메이크업 처럼 weight가 regular인 경우, 상대적으로 두께가 얇아보이고 자간이 넓게 보여서 단어와 단어 사이의 구분이 명확하지 않은 느낌을 주었습니다. 이에 폰트 크기를 한 단계 줄여 각 단어가 더욱 뚜렷하게 구분되도록 하여 전체적인 가독성을 높였습니다.

 

2. 좀 더 친근한 UX라이팅으로 변경하였습니다.

 

3. 상품 리스트에는 표시해야 할 정보가 많아 공간을 효율적으로 사용하는 것이 중요하다고 판단 했습니다. 기존에 큰 영역을 차지하던 찜하기(하트)와 장바구니 아이콘 중, 찜하기 아이콘은 썸네일 사진의 오른쪽 하단에 작게 배치하고, 장바구니 아이콘은 삭제하여 리스트를 더 간결하게 구성하고, 꼭 필요한 정보만을 제공하였습니다.

 

4. 기존 상품 리스트의 타이틀에는 홍보글과 브랜드명과 제품명까지 모두 포함, 작은 카드 리스트에 과다한 정보가(최대 3줄까지)표시되어 복잡하였습니다. 화장품은 브랜드 인지도가 중요하기 때문에 상품 리스트에 브랜드명을 표시하여 사용자가 어떤 브랜드의 제품인지 쉽게 파악할 수 있도록 하였고 해당 브랜드 페이지로의 접근을 용이 하게 하여 사용자 경험을 한층 향상시켰습니다. 아울러 정보 전달의 효율성을 높이기 위해 브랜드명과 상품명, 가격, 뱃지 정보를 각각 한 묶음씩 크게 세 구역으로 나누어 구성함으로써 사용자가 필요한 정보를 빠르고 명확하게 인지할 수 있도록 하였습니다.

 

 

 

5. 화장품은 해당 브랜드 모델이나 깨끗한 피부 표현 등 사실적인 이미지를 보여주는 것이 매우 중요하기 때문에, 썸네일 이미지를 크게 배치하여 제품을 보다 명확하게 전달하고자 하였습니다. 이를 통해 사용자가 상품에 대한 신뢰를 높이고 구매 결정을 보다 쉽게 할 수 있도록 하였습니다. 그리고 위와 동일하게 기존에 큰 영역을 차지하던 찜하기(하트)와 장바구니 아이콘 중, 찜하기 아이콘은 썸네일 사진의 오른쪽 하단에 작게 배치하고, 장바구니 아이콘은 삭제하여 꼭 필요한 정보만을 효율적으로 제공하였습니다.

 

6. 상단 인기상품 리스트와 동일한 정보로 구성하여, 사용자들이 혼란을 느끼지 않고 일관된 경험을 할 수 있도록 통일감을 주었습니다. (기존엔 판매가와 할인가의 위치가 다름)

 

 

 

 

02-2. 상세페이지

 

1. 일반배송과 오늘드림의 문구가 서로 달라 이질감이 들어, 두 문구를 동일하게 적용하여 사용자에게 일관된 느낌을 줄 수 있도록 하였습니다. → ‘20,000원 이상 무료배송’을 ‘2만원 이상 무료’로 수정

그리고 증정품 사진이 너무 작아 어떤 제품인지 파악하기 어렵기 때문에, 사진은 상세보기에서 별도로 확인할 수 있도록 분리하였습니다. 또한, 대신 안내 문구에는 볼드체를 적용하여 강조함으로써 증정품에 대한 안내를 쉽게 인지할 수 있도록 하였습니다.

 

 

2. 화장품 상품설명은 보통 길기 때문에, 상품정보 제공고시, 배송 안내, 교환/반품/환불 안내 등 공통된 성격의 상세 정보를 별도의 탭으로 나누어 제공하였습니다. 이를 통해 관련 정보끼리 체계적으로 묶어 사용자에게 보다 명확하게 안내하였습니다.

 

3. 기존 연관 기획전의 작은 썸네일과 텍스트 조합보다, 사용자 시선을 한눈에 사로잡을 수 있는 화려한 배너 형태로 제작하여 기획전의 매력과 주요 정보를 효과적으로 전달하여 사용자 클릭률을 높일 수 있도록 구성하였습니다.

 

 

4. 화장품은 브랜드 인지도가 중요한 만큼, 상품 리스트에 브랜드명을 명확히 표시하여 사용자가 어떤 브랜드의 제품인지 쉽게 파악할 수 있도록 하였습니다. 또한, 해당 브랜드 페이지로의 접근을 용이 하게 하여 사용자 경험을 한층 향상시켰습니다.

 

 

 

5. UX라이팅을 전체적으로 통일시켜 일관된 경험을 할 수 있도록 도왔습니다.

 

6. 화장품은 브랜드 인지도가 중요한 만큼, 상품 리스트에 브랜드명을 명확히 표시하여 사용자가 어떤 브랜드의 제품인지 쉽게 파악할 수 있도록 하였습니다. 또한, BEST 제품의 경우 타이틀에 넣지 않고 대신 뱃지를 사용하여 시각적으로 돋보이게 함으로써 사용자에게 해당 제품의 우수성을 효과적으로 전달하였습니다.

 

7. 추천 상품을 새로고침할 수 있는 직관적인 아이콘으로 변경 하였습니다.