리디자인 작업 Before 원본 사이트 → <어프어프>
반응형웹, 크로스브라우징 테스트 완료
사용 툴 : Figma, HTML, CSS, Javascript
Process : Swiper Js, Php include
제작기간 : 6일
참여도 : 100%(개인작업)
https://www.figma.com/file/wPFOnVt0Ish4997kEoHbEw/리디자인-|-어프어프?node-id=0%3A1&t=gflQjWgjHEorJpK0-1
SNS를 통해 어프어프 케이스 광고를 많이 접했다. 주로 어프어프 사이트가 아닌 다른 대행 쇼핑업체를 통해 주문했었는데 다양한 종류의 케이스를 구경하고 싶어서 처음으로 어프어프 사이트에 접속해봤다. 어프어프 사이트는 전체적으로 사용자를 위한 UI/UX가 아닌 디자이너의 특징을 많이 살린 사이트라는 느낌이 강하게 들었다. 메인 사이트에서 사용된 디자인적 요소들이 반응형 사이트에서 사용되기엔 부적합 하다는 느낌을 주었다. 제품을 선택할때 동적인 요소들이 부족해 사용자에게 정확하게 어떤 제품을 선택하고 있는지 정확하게 알려주고 있지 않다는 느낌을 주었고, 메인 페이지에서 카테고리 페이지로 넘어갈 수 있는 방법이 내비게이션을 이용한 방법밖에 없다는 것이 조금 아쉬웠다.
반응형에 사용되기엔 적절하지 못한 디자인적 요소
동적요소의 부재
다양한 방법의 경로 선택 부재
전체적으로 깔끔하게 보이며 어프어프의 브랜드 컬러를 활용한 사이트로 디자인하고자 했다. 또 원하는 카테고리를 클릭하면 해당 카테고리와 관련된 제품목록을 다양한 경로로 확인 할 수 있도록 했으며, 다양한 종류의 디바이스를 이용하더라도 사이트 이용에 불편함이 없도록 부적절한 디자인 요소를 제거했다. 또한 제품을 선택하고 주문할때 기종별로 옵션을 나눠서 빠르게 기종을 선택할 수 있도록 했고, 메인 페이지에는 사용자가 주로 선택하는 카테고리 3개와 추천 카테고리의 베스트 제품을 먼저 보이도록 배치했다.
깔끔, 모던함
사용자의 편의를 위한 동적 요소 추가
기종 선택시, 브랜드별로 나눠 보다 빠르게 선택할 수 있도록 수정
1020 여성
사용자가 선호하는 카테고리별 베스트 상품을 메인페이지에 안내
프로젝트 작업을 진행하기 전 페르소나를 4명 구성하여 조사하였습니다.
강하린씨는 20대 중반의 미혼여성이다. 주로 모바일과 노트북을 사용하는 편이고 하루 평균 4시간 이상 인터넷 쇼핑몰을 구경한다.
20살이후로 등록금 이외엔 집안의 도움을 받지 않고 아르바이트를 통해 생활을 하고 있다. 항상 생활비가 부족해 20살때 산 핸드폰을 5년째 사용하고 있으며, 다양한 케이스를 사용하면서 핸드폰 구매 욕구를 억누르고 있다.
“노트북으로 사이트를 구경하는데 사이드에 메뉴나 문의하기 안내 문구가 있어서 불편했습니다ㅠ 화면이 작은데 사이드에 이것저것 많이 있어서 케이스 구경하는것도 힘들고, 잘못 움직이다가 클릭해서 원치 않은 페이지로 이동되거나 하더라구요ㅠ“
사용자의 편의를 위한 디자인적 요소 재배치 및 불필요한 다지인 요소 제거
박지영씨는 30대 초반의 직장인이다. 업무 스트레스를 주말에 야구경기를 보면서 풀어주고 있다. 15년째 LG 트윈스를 응원하고 있는 지영씨는 LG 트윈스의 우승만을 기다리고 있다.
LG 트윈스의 굿즈들을 사모으는 것을 좋아하며, 평일에는 업무로 인해 시간이 없어 주로 온라인 쇼핑을 한다. 회사와 집에서 같이 사용할 수 있는 굿즈들을 위주로 구매하는 편이다.
“콜라보한 제품들만 따로 확인할 수 있는 이미지가 따로 있었으면 좋겠어요ㅠ 메인페이지에 따로 없어서 조금 불편해요!“
콜라보 제품관련 내용 메인 페이지에 추가 및 바로가기 링크 걸기
이영희씨는 30대 후반의 기혼여성이다. 최근 핸드폰을 새로 구매하면서 케이스를 변경하기 위해 오프라인 매장을 구경하는 등 다양한 방법으로 케이스를 고르고 있다.
할인 쿠폰이 있어 온라인으로 구매할 예정이며, 안드로이드 핸드폰을 사용하고 있어 예쁜 디자인의 케이스를 구매하는데 어려움을 느끼고 있다.
어린 아이를 키우고 있어서 빠르고 간편하게 주문하고자 한다.
“핸드폰 케이스를 주문하려는데 제 핸드폰 기종을 찾는게 조금 힘들더라구요~ 삼성, 애플의 기종이 한번에 나열되어 있어서 스크롤이 길었는데, 조금 더 간편하게 이동할 수 있도록 되어있으면 좋겠습니다~“
브랜드 선택 후 해당 브랜드의 기종을 선택해 스크롤을 줄이고 실수 없이 선택할 수 있도록 수정.
이하나양은 18살 고등학생이다. 귀여운 고양이나 곰돌이 캐릭터를 좋아하고 다이어리나 스티커 등 문구류를 매우 좋아한다. 좋아하는 캐릭터와 관련된 제품들을 구매하는것을 좋아한다.
학교에서는 핸드폰을 사용하지 않기 때문에 주로 태블릿PC를 통해 인터넷을 한다. 하루 평균 7시간정도 태블릿PC를 사용하고 핸드폰은 2시간 정도 사용한다. 또 좋아하는 아이돌과 같은 제품을 구매하기도 한다.
“귀여운 캐릭터들과 관련된 제품들이 많았으면 좋겠어요! ”
메인페이지 상단에 시그니처 캐릭터와 관련된 제품을 보여주고 링크를 연결에 해당 캐릭터와 관련된 제품들의 목록을 보여준다.