모바일 이커머스 제품 필터링 기능 설계하기

모바일 이커머스 제품

필터링 기능 설계하기

문제

모바일 의류 이커머스 사이트에서 제품 목록 페이지의 필터링 기능 개선을 설계합니다. 해당 사이트는 여성복 상의 티셔츠류, 하의 청바지류를 미국, 유럽, 국내 브랜드로부터 수입하여 판매합니다.


현재의 사이트에서는 티셔츠류, 청바지류 제품 목록이 구분되어있고 필터가 아래 화면들과 같이 제공되고 있다. 또한 사이트에서 판매되고 있는 상품의 예시는 아래와 같습니다.


주어진 내용을 바탕으로 제품 목록을 사이즈로 필터링하는 플로우를 더 쉽게 만들기 위한 필터링 기능을 기획하세요. 

케이스 풀이시 고려사항

여러 사용자의 어려 정황을 고려하려면 사용자에게 제공되는 정보를 파악하여 구조화 해야합니다.

구조화된 정보를 사용자에게 제공할 수 있는 적합한 인터페이스를 설계합니다.

필터에 대한 이해가 필요하면 이 글을 참고합니다. https://brunch.co.kr/@heykwak/97

케이스   |   힌트   |   솔루션·피드백

문제

모바일 의류 이커머스 사이트에서 제품 목록 페이지의 필터링 기능 개선을 설계합니다. 해당 사이트는 여성복 상의 티셔츠류, 하의 청바지류를 미국, 유럽, 국내 브랜드로부터 수입하여 판매합니다.
현재의 사이트에서는 티셔츠류, 청바지류 제품 목록이 구분되어있고 필터가 아래 화면들과 같이 제공되고 있다. 또한 사이트에서 판매되고 있는 상품의 예시는 아래와 같습니다.


주어진 내용을 바탕으로 제품 목록을 사이즈로 필터링하는 플로우를 더 쉽게 만들기 위한 필터링 기능을 기획하세요. 

케이스 풀이시 고려사항

  • 여러 사용자의 어려 정황을 고려하려면 사용자에게 제공되는 정보를 파악하여 구조화 해야합니다.
  • 구조화된 정보를 사용자에게 제공할 수 있는 적합한 인터페이스를 설계합니다.
  • 필터에 대한 이해가 필요하면 이 글을 참고합니다. https://brunch.co.kr/@heykwak/97 


케이스 힌트

이 케이스가 어떤 케이스인지,

어떻게 접근해야 하는지 알 수 있어요.

이 케이스를 풀기 위한 접근법

이 케이스는 커머스 분야에서 자주 수행하는 업무 형태입니다. 목표는 원하는 상품을 빠르게 찾을 수 있게 해서 전환율 Conversion Rate를 올리는 것입니다.
 
문제는 보여줄 상품이 너무 많다는 것이죠. 사용자가 원하는 상품을 빨리 찾기 위해서 필터를 활용할 수 있게 디자인하는 것입니다.

먼저 이 페이지에서 보여지는 상품에 대한 이해가 필요해요. 여러 브랜드의 티셔츠와 청바지가 있기 때문에 상품 수가 많은 것은 당연합니다.

필터도 가격/사이즈/컬러/소재/브랜드 4가지가 존재하는 상황을 감안하여 현재 UI의 문제를 찾으세요. 특히 여러 나라의 브랜드를 판매하기 때문에 생기는 사이즈 표시의 다른 점에 집중해보세요. (S/M/L/XL와 32/34/36이 각자 사용됨.)

사용자들도 여러 나라에서 들어온다는 점을 잊지 마세요.
 
의류 쇼핑몰 서비스들을 벤치마킹해 보세요. 우리나라만 서비스 대상으로 하는 국내 서비스보다는 여러 나라에서 여러 언어로 서비스를 제공하는 유럽 서비스를 이용하는 것이 좋습니다 (미국보다 유럽이 더 다양함). 다른 UI를 사용하고 있으면 그 이유에 대해 생각해 보세요.

사용성 문제와 벤치마킹을 통해 찾은 인사이트를 통해 생각난 아이디어를 스케치하세요.

 
스케치한 아이디어가 사용성 문제를 해결하는지, 더 나은 경험을 제공하는지 검증해 보세요.

 
충분히 좋은 안을 찾을 때까지 이 과정을 반복하세요. 


케이스를 풀기 위한 접근법


  • 이 케이스는 커머스 분야에서 자주 수행하는 업무 형태입니다. 목표는 원하는 상품을 빠르게 찾을 수 있게 해서 전환율 Conversion Rate를 올리는 것입니다.
  • 문제는 보여줄 상품이 너무 많다는 것이죠. 사용자가 원하는 상품을 빨리 찾기 위해서 필터를 활용할 수 있게 디자인하는 것입니다.

  • 먼저 이 페이지에서 보여지는 상품에 대한 이해가 필요해요. 여러 브랜드의 티셔츠와 청바지가 있기 때문에 상품 수가 많은 것은 당연합니다.
  • 필터도 가격/사이즈/컬러/소재/브랜드 4가지가 존재하는 상황을 감안하여 현재 UI의 문제를 찾으세요. 특히 여러 나라의 브랜드를 판매하기 때문에 생기는 사이즈 표시의 다른 점에 집중해보세요. (S/M/L/XL와 32/34/36이 각자 사용됨.)
  • 사용자들도 여러 나라에서 들어온다는 점을 잊지 마세요.
  • 의류 쇼핑몰 서비스들을 벤치마킹해 보세요. 우리나라만 서비스 대상으로 하는 국내 서비스보다는 여러 나라에서 여러 언어로 서비스를 제공하는 유럽 서비스를 이용하는 것이 좋습니다 (미국보다 유럽이 더 다양함). 다른 UI를 사용하고 있으면 그 이유에 대해 생각해 보세요.

  • 사용성 문제와 벤치마킹을 통해 찾은 인사이트를 통해 생각난 아이디어를 스케치하세요.
  • 스케치한 아이디어가 사용성 문제를 해결하는지, 더 나은 경험을 제공하는지 검증해 보세요.
  • 충분히 좋은 안을 찾을 때까지 이 과정을 반복하세요. 

솔루션·피드백

다른 회원은 이 케이스를 어떻게 풀었는지,

어떤 피드백을 받았는지 볼 수 있어요.

이XX 회원님이 제출하신 솔루션 예시입니다.

케이스를 출제한 전문가의 피드백 입니다.

👍 잘한 점 
주어진 문제점을 잘 파악하고 적절한 UI를 적용하여 사이즈 옵션 선택을 빠르게 할 수 있도록 설계하셨습니다. 

Drawer UI와 탭 UI 적용, 선택 초기화, 필터된 제품 수 표시 등 전반적인 UI 개선을 제시하여 문제 해결을 위한 UI가 잘 작동할 수 있도록 고려하신 점 잘하셨습니다.   
 
📌 부족한 점 
Wireframe 단계에서 모바일 UI에 대한 고려가 표현이 되지 않았습니다. (터치를 고려한 컴포넌트 크기 및 배치)

목록형 UI를 탭 UI로 변경했을 때, 기존에 빠르게 사용 가능했던 기능(예, 가격 필터, 색상 필터)에 대한 접근성이 상대적으로 떨어질 수 있습니다. 이에 대한 고려사항 및 근거를 마련하였다면 더 좋은 기획이 되었을 것입니다.
📘 총평 
이 문제는 비교적 간단한 사용자 문제점과 문제 조건을 고려하여 적절한 UX적 해결방안과 알맞은 UI컴포넌트를 적용할 수 있는지 여부를 확인하고자하는 과제입니다.
회원님의 경우 주어진 사이즈 필터 기능이 여러 유형의 사이즈 체계로 인해 사용성이 떨어지는 점을 분석하여 적절한 개선점을 제시하였습니다.
다만 모바일 UI설계에 있어서 필요한 사용성에 대한 고려(터치 영역을 감안한 컴포넌트 크기 등)가 부족한 점이 아쉬우며, 이는 wireframe 설계 단계에서도 표현 가능한 부분이라고 생각됩니다.  


전문가의 평가: C
S: 감탄할 만한 수준입니다.
A: 실제 상품에 바로 적용할 수 있어요.
B: 부족함이 조금 있습니다.
C: 노력이 필요해요. 

답안 제출을 망설이지 마세요. 디자인에 정답은 없습니다. 

머뭇거리는 것 보다는 전문가의 1:1 피드백을 받는 것이 

 역량 향상에 훨씬 도움이 됩니다.


일곱시로 실무 UX 역량을,

특히 채용 과정에서 중요한 문제해결 역량을 쌓아가세요.

케이스를 출제한 전문가의 피드백 입니다.

👍 잘한 점

  • 주어진 문제점을 잘 파악하고 적절한 UI를 적용하여 사이즈 옵션 선택을 빠르게 할 수 있도록 설계하셨습니다. 
  • Drawer UI와 탭 UI 적용, 선택 초기화, 필터된 제품 수 표시 등 전반적인 UI 개선을 제시하여 문제 해결을 위한 UI가 잘 작동할 수 있도록 고려하신 점 잘하셨습니다.

📌 부족한 점 

  • Wireframe 단계에서 모바일 UI에 대한 고려가 표현이 되지 않았습니다. (터치를 고려한 컴포넌트 크기 및 배치)
  • 목록형 UI를 탭 UI로 변경했을 때, 기존에 빠르게 사용 가능했던 기능(예, 가격 필터, 색상 필터)에 대한 접근성이 상대적으로 떨어질 수 있습니다. 이에 대한 고려사항 및 근거를 마련하였다면 더 좋은 기획이 되었을 것입니다.

📘 총평 


이 문제는 비교적 간단한 사용자 문제점과 문제 조건을 고려하여 적절한 UX적 해결방안과 알맞은 UI컴포넌트를 적용할 수 있는지 여부를 확인하고자하는 과제입니다. 회원님의 경우 주어진 사이즈 필터 기능이 여러 유형의 사이즈 체계로 인해 사용성이 떨어지는 점을 분석하여 적절한 개선점을 제시하였습니다. 다만 모바일 UI설계에 있어서 필요한 사용성에 대한 고려(터치 영역을 감안한 컴포넌트 크기 등)가 부족한 점이 아쉬우며, 이는 wireframe 설계 단계에서도 표현 가능한 부분이라고 생각됩니다.

전문가의 평가: C
S: 감탄할 만한 수준입니다.
A: 실제 상품에 바로 적용할 수 있어요.
B: 부족함이 조금 있습니다.
C: 노력이 필요해요. 

답안 제출을 망설이지 마세요. 디자인에 정답은 없습니다. 

머뭇거리는 것 보다는 전문가의 1:1 피드백을 받는 것이 역량 향상에 훨씬 도움이 됩니다.

일곱시로 실무 UX 역량을, 특히 채용 과정에서 중요한 문제해결 역량을 쌓아가세요.