brunch

라이킷 34 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 디자이너스타입 UNION Mar 24. 2021

집반찬연구소 Web , App UXUI Design

by Remain-CT

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

집반찬연구소 x 리메인

01 프로젝트 개요 및 배경

Background & Issue

안녕하세요, 저희는 브랜드 경험 에이전시인 리메인입니다.

저희는 이번 프로젝트에서 집반찬연구소의 기존 푸드 커머스의 문제점을 정확히 진단하고,

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

우선 집반찬연구소에 대해 간략히 알아보자면, 집반찬연구소는 식사 준비 시간을 좀 더 행복한 곳에 사용할 수 있도록 시간을 선물한다는 철학으로 30여 년간 한식만을 연구해온 전문가의 노하우로 만들어진 프리미엄 반찬이라는 차별화된 포인트를 갖고 있는 반찬 배달 플랫폼입니다.

집반찬연구소는 현재 외부적으로는 소비자에게 브랜드의 이미지를 성공적으로 노출시키고 있지만, 내부적으로는 브랜드가 정립되지 않아 사용에 혼란을 겪고 있었죠. 리메인은 오프라인과 온라인 통합의 시장 확장을 바라보는 집반찬연구소의 문제점을 파악하고, 사용성을 개선하여 사용자에게 일관성 있는 브랜드 경험을 제공하고자 하였습니다.

02 프로젝트 목표 및 과제

task & project goal

요새 반찬 사 드시는 분들 많으시죠? 1인 가구가 늘어나고, 따로 집에서 반찬을 직접 만들어먹기엔 너무나 바쁜 소비자들이 점차 많아지고 있습니다. 이런 사회적 분위기에 편승해 반찬 시장의 규모 및 수요는 늘어나는 추세죠. 이런 사회적 트렌드에 맞춰 소비자는 상품을 구매할 때, 브랜드가 보여주는 대외적인 이미지를 보고 상품을 구입합니다. 리메인은 수많은 경쟁자들 속에서 집반찬연구소의 기존 소비자 층은 물론, 더 큰 소비자를 사로잡기 위해서 대내외적으로 브랜드 이미지를 정립해야겠다는 생각을 하게 되었습니다.

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

03 프로젝트 과정

Project process

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

집반찬연구소 프로젝트 프로세스

04 리서치

Research

컨설팅 진행 후 리메인은 집반찬연구소의 소비자를 직접 만났습니다. 만나서 함께 이야기를 나누고, 사용성 테스트를 진행하였죠. 테스트에서 도출된 결과를 조사하고 분석해보며 현재 집반찬연구소가 가지고 있는 문제를 이끌어내는 과정을 진행하였습니다.

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

먼저 집반찬연구소의 내외부 고객을 대상으로 정량적 조사와 정성적 조사를 진행하였고, 브랜드에 대해 확실히 이해한 후 브랜드가 보완해야 할 점에 대해 체계적으로 파악하였습니다.

이번 프로젝트에서 "사용성"이란 무엇을 의미하는 것일까요?

바로 사용자가 미리 설계된 시나리오를 벗어나지 않고 빠르게 필요한 정보를 도출하는 것과, 대표 서비스 기능이 사용자의 니즈를 충족시킴과 동시에 편리함을 제공하는가를 의미합니다.

사용성 테스트 검토 범위

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

사용성 테스트 기준

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

사용자가 앱을 쉽게 사용하려면, 앱을 보는 사용자의 시선 흐름 안에 필요한 원하는 버튼이 제대로 위치해야 하고, 각 요소들이 성격에 맞는 비주얼 패턴을 가지고 있어야 쉽게 인지가 됩니다. 보통 사용자는 이러한 인지 과정을 거친 후 과거 다른 앱이나 자사 앱을 사용했던 기억을 떠올려 행동하곤 하죠.

이러한 행동 과정이 수월히 진행되기 위해서는 자사 앱의 일관성과 타 앱과의 표준성을 유지하고, 앱을 사용하는 상황이나 컨텍스트를 고려하여 고객이 보다 손쉽게 앱을 사용할 수 있도록 만들어야 합니다.

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

Research insight

집반찬연구소는 반찬을 고르고 구매하는 새로운 UI가 필요하였습니다. 기존에 잘 사용하던 UI가 달라지면 어색하고 불편했던 느낌 다들 한 번쯤은 경험해보셨을 겁니다. 이처럼 새로운 UI는 기존 자사 앱 사용자에게 다소 불편함을 느끼게 할 수 있으며 이와 같은 불편함을 통해 구매 동기가 저하될 수 있어, 사용자가 무의식적으로 UI에 녹아들어 사용할 수 있도록 각 요소들의 비주얼적인 패턴을 앱의 성격에 맞춰 정립하는 작업을 진행하였습니다.

05 브랜드 전략 수립

Strategy

집반찬연구소의 중심 가치

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

06 웹&앱 UI 디자인

UI Design

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

모바일을 중심으로 디자인을 진행하였습니다.

Index (main) page

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

News page

집반찬연구소의 뉴스 페이지는 A형, B형, C형의 콘텐츠가 로테이트 되는 형식의 리스트 페이지로, 사용자는 이러한 규칙을 통해 다양한 정보를 받아들이고, 자신이 원하는 정보를 선택해서 얻을 수 있도록 설계하였습니다.

Food list page

집반찬연구소는 한번 구매했던 고객이 계속해서 구입을 이어나가는 경우가 꽤 많습니다. 고객이 다양한 제품을 한눈에, 그리고 손쉽게 볼 수 있는 리스트형 제품 페이지를 제공합니다.

고객은 관심 있는 제품이나 신제품에 대한 정보를 손쉽게 확인할 수 있으며, 상품에 대한 충분한 정보를 얻은 후 바로 그 상품을 구입할 수 있도록 장바구니로의 이동이 보다 편하게 설계되었습니다.

Cart page

Payment page

집반찬연구소의 배송은 일반 배송, 정기 배송 두 가지로 나뉘어 있습니다. 이러한 결제 상황에 맞춰 소비자가 자신에 맞는 배송을 선택하여 단계적으로 결제를 할 수 있도록 설계되었습니다. 자신이 반찬을 얼마어치를 구매했는지 직관적으로 확인함과 동시에 결제가 이루어지기 때문에 소비자는 구매에 대해 정확성과 편의성을 느낄 수 있습니다.