[디자이너스타입 유니온 릴레이 프로젝트] 비하인드 스토리 첫 번째, Remain

관리자
2021-03-25
조회수 116

디자이너스타입은 검증된 디자인 스튜디오, 전문 브랜드 에이전시와 윤디자인그룹이 함께운영하여 신뢰할 수 있는 연합형 크리에이티브 컨설턴시 입니다. 오늘은 디자이너스타입 유니온 중 웹 에이전시에서 브랜드 경험에이전시로 진화하고 있는 리메인 프로젝트 매니저로부터 작년에 진행되었던 반찬 배달 플랫폼 리뉴얼 비하인드 스토리를 들려 드릴까 합니다.


각설하고 그럼 한 번 보실까요! ^^;




집반찬연구소 x 리메인


01


프로젝트 개요 및 배경

Background & Issue


브랜드 경험 에이전시인 리메인은 집반찬연구소의 기존 푸드 커머스의 문제점을 정확히 진단하고, 

사용성을 개선하기 위하여 웹 및 앱의 UX / UI 작업을 진행하였습니다.


집반찬연구소는 식사 준비 시간을 좀 더 행복한 곳에 사용할 수 있도록 시간을 선물한다는 철학으로 30여 년간 한식만을 연구해온 전문가의 노하우로 만들어진 프리미엄 반찬이라는 차별화된 포인트를 갖고 있는 반찬 배달 플랫폼입니다. 집반찬연구소는 현재 외부적으로는 소비자에게 브랜드의 이미지를 성공적으로 노출시키고 있지만, 내부적으로 브랜드가 정립되지 않아 사용에 혼란을 겪고 있었습니다. 집반찬연구소의 이번 프로젝트를 전담하게 된 리메인은 오프라인과 온라인 통합의 시장 확장을 바라보는 집반찬연구소의 문제점을 파악하고 사용성을 개선하여 사용자에게 일관성 있는 브랜드 경험을 제공하고자 하였습니다. 



02


프로젝트 목표 및 과제

task & project goal


사회적 이슈와 현재 트렌드에 발맞춰 반찬 시장의 규모 및 수요는 늘어나고 있고, 그에 맞춰 소비자는 브랜드의 대외적인 이미지를 보고 상품 구매를 진행하는 경우가 점차 증가하고 있습니다. 리메인은 수많은 경쟁자들 속에서 집반찬연구소의 기존 소비자 층을 굳건히 하고 더 큰 소비자 층을 잡기 위해서는 대내외적으로 정립된 브랜드 이미지가 필요하다는 판단을 하였습니다.

이번 프로젝트는 집반찬연구소의 사용성을 개선하고, UI 가이드라인을 정의하며, 브랜드를 시각화하여 소비자가 브랜드를 접하는 모든 접점에서의 브랜드 경험을 통합하는 목적을 위해 기획되었습니다.



03


프로젝트 과정

Project process


리메인은 집반찬연구소의 UX / UI 작업을 본격적으로 진행하기에 앞서, 프로젝트의 주 목적인 사용성 개선을 위해 이에 맞는 맞춤형 컨설팅을 진행하였습니다. 



04


리서치

Research


컨설팅 진행 후 리메인은 집반찬연구소의 소비자를 직접 만나고, 조사하고 분석해보며
문제를 도출해냈습니다.



사용성 테스트를 통해 도출될 수 있는 결과들

사용성 테스트를 통해 도출될 수 있는 결과들


먼저 집반찬연구소의 내외부 고객을 대상으로 정량적 조사와 정성적 조사를 진행하였고, 브랜드에 대한 이해 및 브랜드가 보완해야 할 점에 대해 체계적으로 파악하였습니다. 이번 프로젝트에서 사용성이란, 사용자가 미리 설계된 시나리오를 벗어나지 않고 빠르게 필요한 정보를 도출하는 것과, 대표 서비스 기능이 사용자의 니즈를 충족시킴과 동시에 편리함을 제공하는가를 의미합니다.



사용성 테스트 검토 범위

사용성 테스트 검토 범위



먼저, 인지과정 위주로 문제점을 판단하여 개선안을 제안하였습니다.

사용성 테스트 기준

사용성 테스트 기준



그다음, 사용자가 앱 화면을 보고 각 요소를 제대로 이해하는지
인지과정 위주로 검토하였습니다.


사용자가 앱을 쉽게 사용하려면, 앱을 보는 사용자의 시선 흐름 안에 필요한 원하는 버튼이 제대로 위치해야 하고, 각 요소들이 성격에 맞는 비주얼 패턴을 가지고 있어야 쉽게 인지가 됩니다. 사용자는 이러한 인지 과정을 거친 후 과거 다른 앱이나 자사 앱을 사용했던 기억을 떠올려 행동하는데, 이러한 행동 과정이 수월히 진행되기 위해서는 자사 앱의 일관성과 타 앱과의 표준성을 유지하고, 앱을 사용하는 상황이나 컨텍스트를 고려하여 고객이 인터랙션 하기 편하게 만들어 줘야 합니다.



앞서 서술한 과정들을 토대로 사용성 개성 검토를 진행하는 과정


앞서 서술한 과정들을 토대로 사용성 개선 검토를 진행하는 과정



Research insight


집반찬연구소는 반찬을 고르고 구매하는 새로운 UI가 필요하였습니다. 새로운 UI는 기존 자사 앱 사용자에게 다소 불편함을 느끼게 할 수 있으며 이와 같은 불편함을 통해 구매 동기가 저하될 수 있어, 사용자가 무의식적으로 UI에 적응되어 사용할 수 있도록 각 요소들의 비주얼적인 패턴을 앱의 성격에 맞춰 정립하는 작업을 진행하였습니다. 



05


브랜드 전략 수립

Strategy



집반찬연구소의 중심가치

집반찬연구소의 중심 가치



집반찬연구소는 반찬이라는 제품을 제공하는 커머스 서비스로 훗날 오프라인(키오스크)과 온라인(모바일 앱, 웹)에 동시에 사용이 가능한 UI를 기획하고 있습니다. 리메인은 집반찬연구소의 새로운 UI가 소비자에게 자연스럽게 녹아들 수 있도록 서비스에 대한 명확한 정의를 내리고, 이를 통해 소비자의 사이트 내 체류 시간 증가 및, 소비자가 앱 내 콘텐츠와 소비 영역의 구분을 확실하게 인지할 수 있도록 하는 긍정적인 효과를 얻을 수 있도록 설계하였습니다. 


06


웹&앱 UI 디자인

UI Design


웹사이트와 앱에 필수적인 요소만 남기는 모바일 사용자 경험에 최적화된 디자인을 위해 

모바일 우선화 디자인을 진행하였습니다.


index(main)page


Index (main) page

제품에 관련된 정보 및 소비가 진행되는 콘텐츠의 영역을 명확하게 구분시키기 위해, 각 영역마다 디자인 가이드를 지정하여 집반찬연구소를 이용하는 고객이 그것을 암묵적으로 인지할 수 있도록 설계하였습니다.


News page

News page


집반찬연구소의 뉴스 페이지는 A형, B형, C형의 콘텐츠가 로테이트 되는 형식의 리스트 페이지로, 사용자는 해당 규칙을 통해 다양한 정보를 인지하고 선택적으로 자신이 원하는 정보를 얻을 수 있습니다.


Food list page

Food list page



고객들의 재구매율이 높은 집반찬연구소는 다양한 제품을 한눈에, 그리고 손쉽게 볼 수 있는 리스트형 제품 페이지를 제공합니다. 고객은 관심 있는 제품이나 신제품에 대한 정보를 손쉽게 인지할 수 있으며 제품에 대한 결제가 용이하도록 장바구니로의 이동이 편하게 설계되었습니다.



Cart page

Payment page

Payment page



집반찬연구소의 장바구니와 주문서의 경우 일반 배송, 정기 배송 등의 특수 상황이 있기 때문에 특수한 결제 상황에 맞춰 소비자가 단계적으로 결제를 할 수 있도록 설계되었습니다. 자신이 구매한 금액을 직관적으로 확인함과 동시에 결제가 이루어지기 때문에 소비자는 구매에 대해 정확성과 편의성을 느낄 수 있습니다.




Account page

Account page



기본적인 로그인 및 회원가입, 아이디/비밀번호 찾기를 진행할 수 있습니다. 사용자가 아이디 및 비밀번호를 찾는 과정에서 동일한 비주얼 패턴을 인지할 수 있도록 설계되었습니다. 이를 통해 사용자는 보다 손쉽게 계정 관련 개인정보를 찾아볼 수 있습니다. 




집반찬연구소에서 구매한 내역과 적립 및 배송에 대한 내역을 확인할 수 있습니다. 내역과 더불어 마이페이지에서는 정기 배송, 정기 결제 등의 특수상황에서의 사용자 경험을 확인할 수 있도록 설계하였습니다.