올스틸을 사진이 아닌 규격으로 고르는 쇼핑몰로, 같은 자재를 반복 구매하는 기업 고객의 기준에 맞춰 다시 설계하였습니다.

상황

올스틸은 2009년부터 철골공사를 해 온 회사가 만든 철강과 철물 온라인몰입니다. 모든 철을 취급한다는 뜻을 이름에 담았고, 철골공사 업체에 필요한 자재와 부자재를 한곳에서 공급하는 것에서 출발하였습니다. 볼트, 앙카, 화스너 같은 부품과 공구를 판매하는 동시에 철골공사 주문도 받습니다.

꾸준히 개선해 왔음에도 불구하고 쇼핑몰은 3년 동안 카페24, 고도몰, 자체 개발 몰로 세 번 자리를 옮겼고, 그때마다 화면의 기준이 달라졌습니다. 프로젝트는 2022년 1월, 메인페이지의 컬러와 서체, 배너, 상품 진열을 정돈해 달라는 요청에서 출발하였습니다.

요청서에는 바라는 첫인상이 분명하게 적혀 있었습니다.

“딱 클릭해서 들어왔을 때 ’온라인 철물점이네. 건축자재점’이라는 느낌이 들기를 바랍니다.”

메인을 분석하는 과정에서 첫 화면에 상품과 가격이 보이지 않고, 상품 카테고리와 서비스 메뉴가 같은 줄에 섞여 있다는 점을 확인하였습니다. 이는 메인의 꾸밈이 아니라 상품 구조에서 비롯된 문제입니다. 이에 따라 메인 시안과 함께 상품과 카테고리 분석을 먼저 제안하였고, 범위를 쇼핑몰 전체 화면 설계로 넓혔습니다. 장바구니를 상품 그룹이나 배송일별로 묶는 기능처럼 현재 데이터베이스 구조로 구현할 수 없는 기능은 이번 범위에서 제외하였습니다.

발견

요청서와 다섯 차례의 피드백을 통해 확인한 내용은 다음과 같습니다.

• 고객이 가장 자주 묻는 것은 두 가지입니다. “얼마인지, 언제오는지”
• 기업 고객은 쓰던 제품만 반복해서 구매합니다. 같은 규격의 화스너를 한 달에 수백 개씩 주문합니다.
• 온라인몰이지만 전화와 팩스로 주문하고 서류를 받는 고객이 대부분이며, 평균 연령대가 높습니다.
• 상품은 모양이 같고 재질, 두께, 직경만 다른 옵션이 대부분입니다. 사진으로 진열하면 같은 사진이 반복되어, 상품이 다양함에도 다양하지 않은 것처럼 보입니다.

상품 데이터를 직접 분석한 결과, 2,454개의 상품이 3단계로 잘게 나뉘어 있었고 상품이 한쪽에 몰리거나 하나도 없는 카테고리가 함께 존재하였습니다. 또한 서로 다른 수준의 분류가 1단계에 나란히 놓여 있어, 함께 쓰이는 상품을 함께 사도록 이끌기 어려운 구조였습니다.

이를 바탕으로 올스틸의 쇼핑몰을 사진을 보고 고르는 곳이 아닌, 규격을 확인하고 바로 담는 곳으로 정의하였습니다.

방향을 정립하는 과정

카테고리는 고객이 하는 일의 단위로

메뉴를 공사, 자재, 부품, 공구라는 네 가지 일의 단위로 다시 묶고, 서비스 성격의 개인결제를 따로 두었습니다. 최종 대카테고리는 철골공사, 철강/건축자재, 볼트/너트/앙카/화스너, 공구/MRO, 개인결제의 다섯 개입니다. 상품 수가 비슷한 수준으로 나뉘도록 조정하여, 어느 카테고리에 들어가도 필요한 상품을 언제든 살 수 있다는 신뢰를 전달합니다.

대카테고리와 중카테고리는 역할을 다르게 설계하였습니다. 대카테고리는 함께 쓰이는 상품을 연결해 보여 주는 화면이며, 중카테고리는 재질, 직경, 두께 같은 필터로 필요한 규격을 빠르게 찾는 화면입니다. 하위 단계가 깊은 볼트/너트/앙카/화스너와 공구/MRO에만 메가 메뉴를 두어, 원하는 세부 카테고리로 한 번에 이동할 수 있도록 하였습니다.

익숙하고, 숫자가 잘 읽히는

올스틸이 원한 첫인상은 세련된 쇼핑몰이 아니라 익숙한 온라인 철물점입니다. 이에 따라 화면은 절제하되, 규격과 가격처럼 숫자가 많은 정보가 잘 읽히도록 숫자 가독성이 높은 서체를 기준으로 정하였습니다. 로고의 푸른색을 기준으로 컬러를 정리하고, 가격을 붉은색으로 강조하던 방식은 덜어 냈습니다.

메인 시안 | 기존 메뉴 구조를 유지한 안 (2022.02)

최종 메인 | 다섯 개 대카테고리, 공사 종류 바로가기로 정리 (2022.03)

한 일

메인은 처음 들어온 고객이 가격과 탐색 방법을 바로 확인할 수 있도록 구성하였습니다. 첫 화면에 철골공사 간편견적과 공사 종류 바로가기, 대표 상품의 시작 가격을 두고, 전화 주문이 많은 업종의 특성에 맞춰 고객센터 전화번호를 크게 배치하였습니다. 그 아래로 카테고리별 베스트와 공사 포트폴리오가 이어집니다. 공사 종류 바로가기의 아이콘과 이름은 관리자 화면에서 바꿀 수 있도록 하여, 운영하면서 공사 품목을 조정할 수 있습니다.

목록과 상세는 반복 구매하는 기업 고객을 기준으로 설계하였습니다.

• 카테고리 목록 | 상품마다 옵션을 펼쳐 볼 수 있어, 상세로 이동하지 않고 규격을 확인하고 담을 수 있습니다. 재고와 배송 조건으로 거르는 필터는 스크롤을 따라다니도록 하였습니다.
• 상품 상세 | 전화와 팩스로 주문할 때 필요한 상품명과 규격, 품번을 맨 위에 두고, 발송일과 배송비를 바로 아래에 두어 “얼마인지, 언제오는지”에 먼저 답합니다. 비슷한 규격을 표로 나열하여 여러 옵션의 수량을 한 번에 입력하고 장바구니에 담을 수 있습니다.
• 함께 구매한 상품 | 같은 상품을 산 고객이 함께 담은 상품을 묶어 보여 주어, 철골공사에 필요한 부품을 한 번에 갖출 수 있도록 하였습니다.
• 즐겨찾는 상품 | 자주 사는 상품을 따로 모아, 쓰던 규격을 다시 찾지 않고 바로 주문할 수 있습니다.
• 장바구니와 마이페이지 | 판매가는 부가세 포함가로 보여 주고, 합계에서만 공급가와 부가세를 나누어 표시합니다. 마이페이지에는 거래원장, 여신내역, 세금계산서 조회처럼 기업 고객이 실제로 쓰는 메뉴를 두었습니다.

모바일은 데스크톱과 같은 흐름을 유지하되, 메뉴와 상품 정보를 한 손으로 확인할 수 있는 순서로 다시 배치하였습니다.

결과물

• 메인화면 분석서와 개선 방향
• 상품페이지 디자인 제안서(상품 분석, 카테고리 재구성, 타사 조사)
• 메인, 대카테고리와 중카테고리, 메가 메뉴, 검색, 상품 상세, 간편견적, 공사실적, 장바구니, 주문, 마이페이지, 고객센터, 회원가입, 약관 화면 디자인(데스크톱과 모바일)
• 아이콘과 서체 소스