SUPER MART Brand Identity
슈퍼마트 최저가 저격 고객을 사로잡다!
기존의 티몬에서 제공되는 서비스보다 특정 고객을 위해 상품을최저가로 제공하고 빠르고 편리한 묶음배송 서비스와 전용 콜 센터를 통해 보다 차별화된 서비스를 제공하기 위해 시작된 슈퍼마트! 슈퍼마트는 어떻게 시작되었으며, 우리가 함께 만들어간 슈퍼마트를이야기 해보려고 합니다.
CONCEPT
슈퍼마트가 전달하고자 하는 이미지 방향의 키워드를 정의하였고이를 기반으로 키워드를 도출하였습니다. 내가 원하는 물건을 싸고, 빠르게, 부담 없이 상품을 배송 받는다! 간단 명료하지만 표현이 어려운 단어들이모여 슈퍼마트로 구성되기 시작했으며, 고객이 사용하기 편리한 UI, 적절한 정보를 제공하여 고객에게 친근하고 따듯한 느낌을 전달하기란 어려운 일입니다.하지만, 그 또한 우리가 해야 할 일이기에 다양한 사람들이 의견을 통해 천천히 슈퍼마트를 만들어가기 시작했습니다.
VALUE
슈퍼마트에 가장 적합한 형태의 비주얼을 고민하다 보니 어려움이생기기 시작했습니다. 상품을 중점으로 하면서도 친근하고 편안한 느낌을 줄 수 있는 비주얼을 선정해야 하는데.. 어떻게 하면 티몬에서 판매하고 있는상품들을 보여주면서 원하는 구도와 느낌을 찾을 수 있을까?에 초점을 맞춰 고민을 하기 시작했습니다.
[슈퍼마트 PC 시안]비주얼은 생각보다 찾기 어렵고, 원하는 것은 없고 그럼 어떻게해야 하나 고민을 하던 때에
그럼 우리가 원하는 비주얼을 만들 수 없을까? 이렇게 방향이전환되면서 불안이라는 요소를 갖고 시작된 촬영! 포토그래퍼분께 원하는 방향성과 예시를 찾아 촬영을 요청하게 되었습니다. 이런 구도에서! 이런 느낌으로!상품이 잘 보이도록! 이렇게 다양한 요구사항을 드렸음에 불구하고도 멋진 비주얼을 만들어 주셨습니다.
와! 촬영된 비주얼은 어느 비주얼과 비교해도 손색없는 훌륭하게나왔으며, 다시 한번 우리의 의지에 감탄하게 되었습니다. 비주얼이 전체의 느낌을 잡는 중요한 역할을 하기에 노심초사하며 과연.. 잘나올까? 라는생각을 무색하게 할 만큼 처음 시안에서 작업하고 연출한 느낌대로 티몬의 상품만으로 멋진 결과물이 나왔습니다.
[슈퍼마트 컨셉 이미지]
[최종 촬영 이미지]LOGO TYPE
슈퍼마트의 로고는 대표하는 얼굴이자 가장 중요한 디자인 요소이므로,슈퍼마트의 고유의 시각적 특징을 만들기 위해 많은 과정을 걸쳐 끝 없는 고민을 해야만 하였습니다. 그 오래 고민 끝에 슈퍼마트의 핵심가치를 고객에게전달하고자 브랜드 네임, 슬로건, 심벌 등이 슈퍼 히어로라는 모티브로 탄생하게 되었습니다.
슈퍼마트는 슈퍼 히어로를 모티브로 하여 프로젝트의 핵심인 ‘빠르고편리한 서비스’의 특성을 반영하여 제작되었습니다. 기존의 티몬 컬러와 슈퍼히어로를 상징하는 블루를 함께 사용하여 유니크 함을 더였으며, 이렇게제작된 로고는 다양한 형태로 접할 수 있게 되었습니다. “슈퍼히어로” 곧 달려올 것 같죠?
슈퍼 히어로라는 모티브를 다양하게 활용된 안들을 보시면 로고에서 경험하기 어려운 부분들을 쉽게 이해하실 수 있습니다. 슈퍼마트의 로고는 택배 자동차 티몬 슈퍼히어로, 슈퍼마트의 다양한 프로모션 등에 적용되고 있습니다.
[슈퍼마트로고가 적용된 예시]ICON DESIGN
사용자에게 좀더 직관적이고 쉽게 다가갈 수 있는 형태는 어떤것이 있을까? 여러 번의 테스트를 통해 심플한 라인 픽토그램으로 제작하게 되었습니다. 아이콘은 메뉴 명을 바로 인지 할 수 있도록 직관적인 형태로제작되었으며, PC/모바일 같은 형태로 가려고 하였지만 특성상 레이아웃, UI에 따라 라인형태와 비주얼 형태의 아이콘으로 제작되어 사용자에게 제공되었습니다.
[다양한 형태의 테스트]왜 이렇게 제작되었을까? 모바일에서는 PC에 비에 한 손으로모든 영역을 터치하여 볼 수 있는 형태이며, 한눈에 직관적으로 보이고 최적의 해상도에서 보여지는 부분이 전체 비율의 일부분이기에 비주얼 형태가더 사용자에게 직관적일 수 있다는 판단에 의해 제작이 되었습니다.
[최종 모바일 아이콘]그렇다면 PC에서도 모바일과 같은 아이콘을 동일하게 사용하면안될까? 라는 의문을 갖게 됩니다.
모바일과 달리 PC에서는 한 화면에 보여지는 부분이 많으며상단의 비주얼 영역과 부딪히게 되는 형태가 됩니다. 명확하게 구분되는 형태에 사용자가 알기 쉽도록 하기 위해 텍스트형태, 비주얼 형태, 라인형태로다양하게 테스트한 결과 라인형태가 좀더 직관적이며 한눈에 인식하기 쉽다는 판단에 의해 제작하게 되었습니다.
[최종 PC 아이콘]슈퍼마트 UI/UX
버튼 하나, 라인처리, 컬러, 정보의 구성, 컨텐츠의 배열하나하나 어떻게 하면 사용자가 더 편리하게 사용할 수 있을까? 우리가 가장 중점적으로 고민해야 하는 부분들 이였습니다. 현재 티몬에서 운영되고있는 썸네일의 이미지들은 너무 다양하고 저마다 제 각각의 색이 입혀져 있는 형태이므로 다소 복잡해 보이고 어떤 것을 가장 중요하게 이야기 하고자하는지 알 수 없었습니다. 그럼! 슈퍼마트에는 상품이 잘 보여 지도록 하자! 많은 요소를 제거하고 깔끔하게 가면 좋겠다! 그렇게 시작된 썸네일의운영가이드를 통해 지금의 정리된 슈퍼마트 상품을 보실 수 있습니다.
[슈퍼마트 썸네일 운영가이드 초안]잘 정리된 상품이미지를 보고 잘 구매할 수 있도록 쉽고 편리한구조, 이해하기 어렵지 않은 형태를 만들기 위해 테스트를 진행하였습니다. 많은 분들의 의견을 취합하고 정리하여 버튼 하나까지 위치까지 고려하여적용되었으며, 차츰차츰 슈퍼마트의 제 모습을 찾아갔습니다.
[슈퍼마트 모바일 구매는 이렇게!]
[슈퍼마트 PC 구매는 이렇게!]슈퍼마트 디자인
슈퍼마트의 편하고 친근한 느낌을 중점으로 비주얼을 선정하였으며,담백한 픽토그램을 이용하여 서비스와 브랜드를 노출시키는 점에 주력하였습니다. 페이지 전체에 일관성 있도록 모바일과 PC의 특성에 맞춰 고객의 사용성을고려하여 구성하였습니다.
[슈퍼마트 모바일 시안]
[슈퍼마트 PC 시안]마치며
슈퍼마트는 고객에게 좀더 쉽고 빠르게 구매할 수 있는 환경을만들어 주기 위한 하나의 루트라고 생각됩니다. 이렇게 분야마다의 특색을 갖고 있는 UI가 있다면 더 편리하지 않을까라는 생각을 합니다. UI기능뿐아니라 고객이 만족할 수 있는 환경을 좀더 고민하고 이루어 나간다면 만족도 높은 마트의 형태를 만들 수 있지 않을까 생각해 봅니다.
