사이드 게시판, 민트 쇼핑 리스트 UI 개선
제로베이스 프로젝트
1. 사이드 사이트의 커뮤니티 게시판 UI 개선
AS-IS
TO-BEUIUX 사이드 프로젝트를 모집하는 사이트인 SIDE의 Community 게시판을 개선해보았다.
1) 필터 추가
1,000개 이상의 많은 게시글과 수업, UIUX 디자이너 모집, 개발자 모집, 이벤트 등 다양한 종류의 글이 올라와 필터가 필요하다는 생각이 들었다.
일반적으로 자주 사용되는 라운드 모양의 버튼 필터를 추가하여 클릭하면 관련 글을 모아볼 수 있게 하였다.
2. 민티드 사이트의 상품 리스트 UI 개선
AS-IS
TO-BE평소에 잘 사용하고 있는 고체 치약 브랜드 민티드의 쇼핑몰이다.
1) 상단 GNB 바 개선
로고를 제일 왼쪽으로 배치하고 차례대로 브랜드 스토리, 쇼핑하기, 콜렉션, 커뮤니티를 추가하였다. 기존에는 오로지 쇼핑 기능만 있어서 전체 보기, 덴탈, 핸드, 리빙, 기타 이렇게만 분류되어 있었는데, 각 제품의 리뷰 갯수를 보면 10,000개 이상 되는 제품들도 꽤 있는 만큼 이용자 수가 많아 브랜드 스토리가 필요하다는 생각이 들었다.
이 부분은 평소에 자주 가는 데이지크와 롬앤 등의 쇼핑몰을 참고하였다.
기존에는 GNB 바 하단 부분에 까만색 선이 있었는데 그 부분을 없애고 살짝 섀도우를 넣어서 GNB라는 것을 알아볼 수 있게끔 하였다.
2) 로그인, 장바구니, 회원가입 추가
그리고 맨 오른쪽에는 로그인, 장바구니(cart), 회원가입을 기재해두었다.
특히 장바구니는 괄호 치고 몇 개를 담았는지 갯수를 바로 바로 확인할 수 있게 같이 표시해두었다.
3) 쇼핑 상세페이지 텍스트 개선
이제 쇼핑 리스트를 들어왔을 때의 화면이다. 기존과는 달리 All에 전체상품 한국어를 추가하였고 왼쪽으로 배치하였다.
4) 필터 추가
맨 오른쪽에는 최신순, 인기순으로 볼 수 있게끔 필터를 추가하였다.
5) 상품 리스트 개선
이제 상품 리스트는 기존에는 상품보다 겉의 까만 테두리가 더 돋보였다. 그래서 까만 테두리를 모두 없애고 이미지와 상품 정보를 보다 세세하게 정리하였다.
이미지는 기존의 무드에서 크게 벗어나지 않으면서 섀도우만 연하게 넣어서 잘 보이게 하였다.
또한 이미지 오른쪽 하단에 찜하기(하트), 장바구니 담기 버튼을 넣어두었다.
5) 상품 정보 개선
기존에는 깔끔하지만 전체적으로 매우 단순한 형태였다.
지그재그. 데이지크를 참고하여, 할인율과 원가와 할인가의 차이를 더 보여주고,
카드 형식으로 이 상품이 현재 어떤 이벤트가 걸려있는지 표시하였다. (예: 설 특가 할인, 무료배송 등)
할인율은 보통 쇼핑몰에서 표시하는 것처럼 빨간색으로 강조하였고,
옆에는 원가에 가운데 선을 그었고, 아래에 할인가를 적어 할인가를 강조하였다.
상품명 옆에는 평점과 리뷰수를 배치하였다.
