Share
Sign In
Work
❇️
year: 2021
at: tablemanager
role: product deisgn
teammate: 1 PM, 1 FE, 2 BE, 2 PD
프로젝트 개요
예약상품권은 예약을 한다는 전제하에 브랜드 상품권을 할인된 가격으로 구매하여 식사할 수 있는 서비스입니다.
기존에 예약상품권은 문자메시지 링크, 브랜드 카카오톡 채널, 네이버 블로그 등을 통해서 구매할 수 있었습니다.
이렇게 구매 채널이 파편화되어있다보니 아래와 같은 문제점들이 생겨났습니다. 그래서 이를 한 곳에 모아서 구매할 수 있는 화면이 필요성이 제기되었습니다.
디자인 방향성
앞선 문제를 바탕으로 아래의 프로젝트 목표를 수립하였습니다. 그에 따른 디자인 컨셉을 잡았습니다
🔍
판매중인 예약상품권을 한 곳에서 볼 수 있도록
예약상품권을 판매 및 구매하고 싶도록
예약상품권 구매를 간편하게
🎯
정보 파악이 용이한 일관된 카드 UI
외식업 사장님과 소비자 모두에게 매력적인 디자인
구매 여정이 매끄러운 디자인
제작 과정
일관성 있는 카드 UI로 통합적으로 보이게 하기
‘theyeyak.com’이라는 도메인을 만들어 예약 상품권을 한곳에서 볼 수 있게 하였습니다.
여러 상품들을 한 화면에 가시성 있게 보여주기 위해 카드 UI로 설계했고, 판매하는 브랜드 수가 많지 않아
풍부하게 보일 수 있게끔 세로 스크롤형으로 디자인하였습니다.
소셜 프루프 장치*를 통해 매력적인 제품 화면처럼 보이게 하기
전자 상거래에서 신뢰를 형성하고 제품 구매를 유도하기 위해서는 소비자를 안심하게 할 만한 동기가 마련되어야 합니다.
인플루언서의 후기, 하트 클릭 수, 알림 받는 사람 수 노출을 통해 매력적인 상품처럼 보이도록 설계하였습니다.
*소셜 프루프 : 데이터로 고객에게 신뢰를 주고 구매 욕구를 자극하는 장
판매하기 좋은 곳처럼 보여주기
예약상품권 홈은 소비자를 끌어들이기 위한 사이트이기도 하지만 외식업 사장님들의 상품을 판매할 수 있도록
하는 사이트이기도 합니다.
사장님들에게 이 사이트가 자사 상품을 판매하기에 매력적인 사이트임을 인지시켜주기 위해 하단에 ‘더 예약과
함께하는 브랜드’를 모두 모아 노출시켜주었습니다. 또한 라이브 커머스 문의 시 전문 호스트와 진행한다는 문구를 사용하여 신뢰감을 높였습니다.
간편 결제 도입으로 결제 쉽게 하기
기존에 가지고 있던 결제 방식은 카드정보를 일일이 다 입력해야 했어야 했는데 나이스페이와 카카오페이와 같은 간편 결제 방식을 추가로 도입하여 결제에 대한 부담을 덜어주었습니다.
구매 여정 부드럽게 하기
구매 목록에 들어가서도 다시 구매가 가능하도록 ‘재구매하기’ 버튼을 두었습니다.
회고
처음 스프린트를 도입하여 진행을 시작했지만 여러 이해가 둘러싸여 원활히 진행되지 못한 것이 아쉬웠습니다.
빠른 런칭을 위해 웹으로 제작 됐지만 웹보다는 앱 환경이 전환율도 높고 데이터 기반으로 사용자의 행동을 분석하는데 용이하기 때문에 앱으로의 전환 시도가 필요하다고 생각합니다. 그래서 각각의 화면의 퍼널을 분석해서 이탈율을 줄이고 전환율을 높여야합니다.
하지만 새로운 비즈니스 모델을 만드는데 참여할 수 있었다는 점과 라이브커머스라는 새로운 쇼핑 경험 제작을 시도해봤다는 점에서 의미있는 작업이었습니다.
Yi
Subscribe to 'yiseo'
Welcome to 'yiseo'!
By subscribing to my site, you'll be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to 'yiseo'!
Subscribe
👍
Other posts in 'Work'See all
yiseo
시스템으로 디자인 통일성 지키기
year: 2022 at: doctornow role: platform design teammate: 4 PD 1. 시작하게 된 배경은? 제품 개선이 동시 다발적으로 이루어지고 주기가 빠르다보니 디자인 리소스를 자주 변경해야 하는 상황이었습니다. 표준 규칙이 존재하지 않아 매번 다른 요소가 생성되다 보니 UI의 일관성이 떨어졌습니다. 디자인 작업 만큼이나 싱크를 맞추는 데 상당한 시간이 허비되고 있었습니다. 앞서 제작된 그리고 제작한 UI 요소들의 관리가 제대로 이루어지고 있지 않다보니 관리하는데 어려움이 있었습니다. 이렇다 보니 개발자는 매번 새로운 코드를 생성하게 되어 비효율적으로 개발하고 있었습니다. 2. 시스템을 만들어야 하는 이유 디자인 시스템을 만들어놓았을 때의 이점은 상당합니다. 반복되는 컴포넌트 제작에 소비되는 시간을 아껴서 사용자에게 더 집중할 기회를 주고 제품의 일관성을 유지할 수 있도록 도와줍니다. 디자인 시스템은 그 명칭 때문에 디자이너들을 위한 시스템이라고 오해될 수 있지만 개발자 입장에서도 모든 UI 요소에 대한 완전한 참조 가이드를 제공받기 때문에 개발자에게 도움이 될 수 있습니다. 3. 우리의 목표는?
yiseo
닥터나우 보이스앤톤 가이드
year: 2022 at: doctornow role: design lead, platform design, project lead teammate: pnly one 1. 실행하게된 배경은? 닥터나우의 앱과 웹 모든 곳에서 일관되지 않은 보이스앤톤이 사용자에게 전달되고 있었습니다. 또한 제품을 만들 때마나 글쓰기에 관한 규칙이 없다보니 고민하는 시간에 리소스가 많이 들어갔습니다. 2. 그것이 왜 문제였는지? 언어적 요소와 비언어적 요소가 일관되고 상호보완적일 때, 사용자는 서비스의 성격에 대한 일관된 그림을 그릴 수 있기 때문에 인터페이스가 똑똑하고 재미있으며 설득력 있다고 느낍니다. 또한, 서비스의 메시지를 더 잘 이해하고신뢰하며 서비스가 요구하는 행동을 하게 됩니다. 하지만 앞선 배경에서 볼 수 있듯이 닥터나우는 유저에게 격식을 차릴 때도 있고 그렇지 않을 때도 있습니다. 또한 한 메시지 안에서도 불협화음이 일어나고 있었습니다. 이처럼 닥터나우에서는 보이스앤톤과 UX writing에 대한 명확한 기준이 없었고 문구를 작성할 때 개인의 기준에 맞춰 작성하다 보니 일관성이 떨어졌습니다. 사람의 건강을 책임지는 헬스케어 플랫폼에서의 신뢰감을 주는 것은 기본자세입니다. 일관된 문구의 명문화를 통해 고객 만족도를 높일 필요가 있었습니다. 3. 목표는 무엇이었는지? 모든 프로젝트를 진행할 때 목표가 가장 중요하다고 생각합니다. 명확히 설정한 목표를 통해 프로젝트의 방향을 정해 나아가고, 선택이 필요한 순간에 빠른 판단을 할 수 있기 때문입니다. 아래와 같이 다음과 같은 목표를 정했습니다. 일관된 마이크로카피를 작성할 수 있도록 해주는 보이스앤톤 디자인을 정의한다. 이를 통해 모든 채널에서 유저에게 일관된 메시지와 브랜드 경험을 제공한다.
yiseo
예약솔루션 디자인 템플릿
year: 2021 at: tablemanager role: project lead, platform design teammate: only one 1. 어떤 문제가 있었는가? 테이블매니저는 자사의 예약 솔루션을 여러 파트너사와 제휴하여 서비스하고 있었습니다. 하지만 → 뚜렷한 기준이 없었기에 매 번 새로운 디자인 결과물 도출 → 원본을 각자의 해석으로 개발하여 효율성 하락 이라는 문제점을 가지고 있었고, 코어 가이드의 부채와 커뮤니케이션 비용이 떨어지지 않아 물 빠진 독에 한정된 리소스만 들이붓는 상황이었습니다. 따라서 디자인 가이드를 정립하여 개발 및 디자인 리소스를 줄이고 일관성있는 UI를 전달하고자 했습니다. 2. 어떤 방법을 사용했는가? 가이드 체계는 Material Guidelines, Adobe International design을 참고했으며, 예약 시스템 UI의 모든 요소들을 해부하여 아래 이미지와 같은 구조도로 표현할 수 있었습니다. 화면의 가장 작은 단위를 foundation, 각기 다른 foundation이 모아진 Elements, 하나 이상의 Elements로 이루어진 Modules을 합쳐component로 규정하였습니다. 3. 어떻게 해결했는가? ① 아토믹 시스템으로 체계화하기 foundation : Color & Typography 다수의 파트너사와 연동하기 때문에 이를 돕기 위해 미리 제작된 UI와 컬러 팔레트가 필요합니다.