MARIOMALL UI/UXeXperience Design
Period 2022. 02 Tool Figma, Photoshop
마리오아울렛은 국내외 유명브랜드를 보유한 프리미엄 아울렛입니다. 마리오몰은 '마리오아울렛의 공식 온라인 커머스 플랫폼'입니다.
마리오아울렛 오프라인 매장의 다양한 이월 상품과 높은 할인율 그대로 온라인에서 만날 수 있는 서비스를 제공하고 있습니다. 365일 합리적인 가격의 ‘가치소비’ 철학 을 온라인으로 확장해 오프라인과 온라인의 시너지 효과를 극대화 하고 있습니다. 마리오몰은 2030세대가 주요 고객층으로 830여개 브랜드와 19만개 상품을 갖추고 있으며, 패션 중심에서 리빙, 뷰티, 전자가전 등으로 카테고리 확장을 통해 소비자 들에게 다양한 라이프스타일을 제안하는 종합쇼핑몰로 성장 목표로 운영하고 있습니다.
저는 마리오몰 온라인 커머스 플랫폼 PC, Mobile Web, APP UI/UX 개선 디자인과 더불어 쇼핑몰 독자적인 아이덴티티 부여를 위한 BI / BX리뉴얼 디자인을 진행 했으며 온라인 서비스 컨텐츠 이벤트, 프로모션, 마케팅 디자인 등 커머스 운영과 유지 보수에 필요한 전반적 디자인 업무에 참여했습니다. 마리오몰을 이용하는 소비자들이 쉽고 편리한쇼핑을 즐길 수 있도록 지속적으로 문제점과 개선 사항을 파악하여 UI 설계 하고 디자인 하는 것에 초점을 두고 진행했습니다.
카테고리 메뉴 개선
카테고리와 브랜드 메뉴를 두개의 탭으로 나눠 원하는 페이지로 빠른 이동을 할 수 있도록 개선했으며, 카테고리 메뉴는 아이콘 타입, 전문관은 배너 타입으로 직관성을 높혔습니다.
기존에는 브랜드 메뉴를 찾기 어려운 불편함이 있었고, 신규 오픈한 테마/전문관 노출 구좌를 추가 해야하는 조건이 생겼습니다. 먼저 카테고리와 브랜드 메뉴 탭을 상단에 노출시켜 접근성을 높혔으며, 메뉴는 아이콘화하고 전문관 영역은 배너 타입 직관성을 높혔습니다.
카테고리 & 브랜드 메뉴 전체 화면
카테고리 화면에서는 카테고리 및 주요 전문관 페이지로 이동 할 수 있으며, 브랜드 탭을 선택 했을때는 영문 or 국문 그룹핑 되어 있는 브랜드 목록 확인 가능 하며, 검색 기능을 통해 원하는 브랜드 페이지로 빠른 이동을 도와줍니다. 또한, 찜한 브랜드 목록 및 우수 브랜드 리뷰 후기를 보여주는 서비스를 제안 합니다. 공통적으로 하단에 로그인 영역을 두어 배송 및 쿠폰 등 개인 서비스 정보를 빠르게 확인 할 수 있습니다.
카테고리 메인
카테고리별 행사 및 상품 노출구좌 확보를 위한 메인 페이지 디자인을 진행했습니다. 다양한 컨텐츠로 소비자들의 구매 심리 자극에 중점을 두었습니다.
카테고리 상품 리스트
작은 모바일 환경에서 다양한 브랜드의 상품을 정돈되게 보여 줄 수 있는 레이아웃 개선과 상품정보의 가독성 향상을 중점으로 개선했습니다.
또한 매장에서 촬영한 상품과 온라인 상품 비율이 각기 다른 두 타입의 이미지가 모두 잘 보일 수 있도록 하기 위한 방향을 고민했습니다.
상품 이미지를 효과적으로 보여주기 위해 리스트 페이지만 예외적으로 사이드 여백을 없애 시원하고 직관적인 레이 아웃으로 개선 했습니다.
또한, 상품을 가리며 시선을 분산시켰던 컬러칩과 할일율을 상품정보와 함께 그룹핑 하여 정돈했으며 상품 정보 영역 텍스트 가독성 높혔습니다.
페이지 속성에 따라 2가지 타입의 리스트를 사용했습니다.
A타입 경우 전체 상품이 노출되는 리스트 페이지에서, 매장 상품과 온라인 상품 이미지 모두 커버 가능 하도록 세로가 더 길어진 타입의 썸네일을 기본 타입으로 적용했으며,B타입 경우, 매장 상품 노출이 많은 페이지에서 각기 다른 이미지 비율에 맞춰 썸네일이 가변 적용되는 카드타입을 적용했습니다. 단, 로딩 이슈 문제로 인해 일부 페이지에서만 사용했습니다.
카테고리 필터
모바일 카테고리 리스트 페이지 내 필터 기능 리뉴얼을 진행했습니다. 필터 기능을 활용하여 원하는 조건의 상품만 빠르게 확인 가능할 수 있도록 개선했습니다.
기존에는 필터에서 선택한 항목이 노출 되지 않아, 선택 액션에 대한 피드백이 없어 사용성이 떨어지는 문제점이 있었습니다.
화면 전체를 덮지 않는 레이어 팝업으로 페이지 이동에 대한 거부감을 줄이고, 선택된 항목 노출 시켜 즉각적 피드백 을 얻을 수 있도록 사용성을 강화했으며
스크롤 이동을 최소화하여 한 프레임 안에서 항목 확인이 가능하도록 개선했습니다.
