brunch

라이킷 27 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

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

데일리픽 서비스 기획 및 디자인 프로젝트

by Remain-CT

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

데일리픽 x 리메인

01 프로젝트 개요 및 배경

Background & Issue

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

저희는 이번 프로젝트에서 데일리픽의 브랜드 아이덴티티 구축 및 사용성을 개선하기 위하여 데일리픽의 전체 서비스 기획 및 디자인을 진행하였습니다.

요즘 영양제 꾸준히 섭취하는 분들 많으시죠? 우리는 지금 밀려드는 영양제의 홍수 속에서 살고 있습니다. 이러한 상황 속에서 나에게 맞는 영양제가 무엇인지, 어떤 영양제를 섭취해야 건강하게 삶을 영위할 수 있을지 궁금하실 텐데요, 이러한 갈증을 해소해줄 서비스가 바로 데일리픽입니다.

데일리픽은 IT기술을 유기적으로 결합하여 질병 예방과 건강한 삶의 밸런스를 제공하는 맞춤형 영양제 서비스 플랫폼입니다. 데일리픽은 점차 소비가 늘어나는 영양제 시장 속에서 신뢰할 수 있는 약사(전문가)가 개개인에 맞는 맞춤형 영양제를 직접 추천해준다는 강점을 가지고 있는 서비스입니다.

리메인은 우선 데일리픽의 본격적인 서비스 출시에 앞서, 사용자에게 브랜드의 강점을 보다 잘 보여줄 수 있도록 브랜드의 아이덴티티를 명확하게 구축해야 한다는 판단을 하였습니다.

02 프로젝트 목표 및 과제

task & project goal

리메인은 데일리픽의 첫 도약에 맞춰 서비스에 맞는 컨셉과 타겟, 시장 조사 등을 통해 데일리픽만의 차별성과 경쟁력을 정의하였고, 그에 맞는 브랜드 아이덴티티를 통해 브랜드 전략과 경험을 기획하였습니다.

브랜드를 지속 가능한 브랜드로 발전시키려면, 서비스를 먼저 명확히 정의하는 게 우선이겠죠. 리메인은 데일리픽의 서비스를 명확히 정의하고, 더불어 그에 맞는 디자인 아이덴티티 개발까지를 최종 목표 과제로 삼았습니다.

03 프로젝트 과정

Project process

데일리픽의 주 목적은 소비자의 문진 실행과 이를 통한 소비자의 정기 구매 유도입니다. 리메인은 본격적인 프로젝트를 진행하기에 앞서, 프로젝트의 주 목적에 맞는 맞춤형 컨설팅을 진행하였습니다.

컨설팅을 바탕으로 설계된 프로젝트 과정은 아래와 같습니다.

1) 사용자 리서치

대면 및 비대면으로 사용자를 만나 리서치 및 사용성 테스트를 진행합니다.

2) UX 기획

리서치를 기반으로 서비스의 타겟을 정의하고, 타겟이 어떻게 서비스를 따라가는지에 대한 여정 지도를 제작하는 과정입니다.

3) 기능 설계 및 UX/UI 디자인

리서치와 타겟을 기반으로 본격적인 기능 설계 및 디자인 작업이 들어갑니다.

화면별 기능의 구조를 잡고, 전체적인 서비스의 범용성을 높이기 위하여 컴포넌트 제작을 필두로 전체 디자인 작업을 진행합니다.

문진과 정기 구매 유도를 위한 UX 기획 및 서비스 디자인 플로우

04 사용자 리서치

User Research

리메인은 영양제 구매 시 문진을 유도하는 요인을 파악하는 동시에 편리한 정기 구매를 위한 인사이트를 도출하기 위하여 1차로 사용성 테스트 및 인터뷰를 진행하였고, 2차로 설문지 조사 및 그룹 토의를 진행하였습니다.

1, 2차 사용성 테스트 방법

먼저, 사용자가 경쟁사 서비스를 통해 문진과 정기구매 과정을 쉽게 잘 수행하는지 판단하기 위해 실험자를 모집한 후 1차로 사용성 테스트를 진행하였습니다. 테스트는 사용자가 직접 경쟁사 서비스를 사용하면서 미션을 수행하는 방식으로 진행되었습니다. 이 과정에서 사용자가 서비스 사용 중 어느 부분에서 불편함을 느끼는지 파악할 수 있었습니다.

사용성 테스트 과정 및 도출된 결과

다음 단계는 1대 1 심층 인터뷰입니다. 실험자와의 1대 1 심층 인터뷰를 통해 미처 파악하지 못했던 미션 수행과정에서의 pain point와 추가 니즈를 발견하였습니다.

미션 수행 과정 중의 추가 니즈 발견

1차 테스트가 완료된 후, 개인 성향을 바탕으로 전반적인 영양제 구입 및 복용 경험에 대해 파악하기 위하여 2차로 설문지를 통한 그룹 인터뷰를 진행하였습니다.

Research insight

2차 조사에서 리메인은 총 세 가지 인사이트를 얻을 수 있었습니다.

인사이트 및 솔루션은 아래와 같습니다.

1) 이익과 손해가 명확한 숫자로 보여야 전문가의 말을 따르는 경향이 있었습니다.

→ 문진 결과를 점수로 보여주고, 복용 과정에서 숫자의 증감을 표시하기로 했습니다.

2) 호전된다면 어떠한 증상이 나타날지 상상할 수 있는 사람이 복용 효과를 더 잘 느낍니다.

→ 영양제 복용 후 즉시/단기/중장기적으로 몸에 어떠한 증상이 나타날지 명시해주기로 했습니다.

3) "꾸준히" 먹는 게 제일 어렵다는 것을 고객도 이미 인지하고 있었습니다.

→ 소비자가 문진과 정기 구매를 동기부여 요소로 삼을 수 있도록 기획해보기로 하였습니다.

조사를 통해 얻은 세 가지 인사이트와 그에 대한 솔루션 도출 과정

위 조사가 마무리된 이후, 리메인은 추가적으로 사용자가 영양제를 꾸준히 먹지 못하는 이유를 바탕으로 서비스의 기초 타겟을 잡았습니다. 또한, 앞서 진행된 조사들을 바탕으로 데일리픽만이 가질 수 있는 강점을 설계하였습니다.

사용자가 영양제를 꾸준히 먹지 못하는 이유를 바탕으로 설정한 타겟 및 데일리픽만의 강점 설계

이 다음으로, 앱을 사용하게 될 타겟층에 대한 정의를 내리기 위하여 타겟층에 대한 리서치를 진행하였습니다.

리서치를 총해 최종 도출된 서비스 타겟 정보

리서치를 바탕으로 "스마트한 건강 관리를 추구하는 3050 비즈니스"라는 타겟을 정립하였습니다. 주로 자신의 본업에 충실하며 전문가를 통해 지식을 얻는 효율 추구형 인물, 예를 들면 자영업자나 직장인 또는 워킹맘을 주 타겟으로 삼았습니다.

앞서 정리한 타겟을 바탕으로, 리메인은 사용자 여정 지도를 제작하였습니다.

여기서 사용자 여정 지도란, 사용자가 서비스 혹은 제품과 어떠한 접점이 있는지 판단하고, 사용 과정에서 어떠한 매체를 거치고 어떤 문제점이 있는지 등의 행동 과정을 시간 순으로 나열한 그래프입니다. 이를 통해 서비스의 신뢰도를 높이고 나아가 서비스를 성공할 수 있도록 설계하는데 많은 도움을 줄 수 있는 방식이죠.

서비스 타겟 조사 결과에 따른 사용자 여정 지도

06 서비스 UI 디자인

UI Design

이렇게 기나긴 사용자 인터뷰와 리서치를 거치고 나서야 비로소 앱의 와이어프레임을 제작할 수 있었습니다. 와이어프레임을 제작하며 작업 초기에 설정했던 목표와 디자인이 일맥상통하는지 끊임없이 확인하며 작업을 진행하였습니다.

데일리픽 서비스 와이어프레임

다음은 컴포넌트 제작입니다. 여기서 컴포넌트란, 사용자와 인터랙션하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위입니다.

컴포넌트의 특징과 장점은 다음과 같습니다.

컴포넌트는 화면에 일관성 있게 UX를 가져갈 수 있도록 인터페이스 세트를 구축해놓는 것입니다.

컴포넌트를 이해해야, 어떤 요소를 최소한으로 조정하여 효율적으로 UI 구성을 할 수 있습니다.

코드가 간소화될 뿐만 아니라 디자인 파일도 함께 간소화를 가능하게 합니다.

리메인은 본격적인 디자인 작업을 시작하기 전, 먼저 컴포넌트를 제작하여 서비스가 실제 구현이 되었을 때 시각적인 부분에서 일관성을 유지함과 동시에, 구현 후 개발자와 디자이너 간 소통이 더욱 원활히 진행될 수 있도록 하였습니다.

데일리픽의 컴포넌트는 리메인만의 강점인 리메인 스타일 가이드를 기반으로 제작되었습니다. 리메인 스타일 가이드는 아래 링크에서 더욱 자세히 확인하실 수 있습니다.

리메인 스타일 가이드 보러 가기

그럼 데일리픽의 컴포넌트를 하나하나 자세히 살펴보도록 하겠습니다.

데일리픽 컴포넌트 - 컬러 및 폰트 사이즈

먼저, 컬러 및 폰트입니다. 브랜드 색상은 지정된 소수의 컬러를 사용하였습니다. 무채색을 이용하는 색상의 조화가 단조롭지 않도록 브랜드 컬러에서 채도와 명도를 더해 색상을 표현하였습니다. 또한, 보편적으로 쓰이는 컬러를 시스템 컬러로 설정해 사용자가 시스템의 상태를 직관적으로 인지할 수 있도록 설계하였습니다.

또한, 폰트는 크기 및 행간, 자간을 지정해 디자인의 일관성을 유지할 수 있도록 제작하였습니다.

데일리픽 컴포넌트 - 입력 및 버튼

다음은 입력 및 버튼 관련 컴포넌트입니다. 손가락 터치를 이용하는 모바일 환경을 위해 클릭 가능한 최소 사이즈를 설정한 후, 상황에 맞는 버튼을 일관되게 디자인하였습니다. 또한 올바른 인터랙션과 스타일을 적용하여 사용자가 상황에 맞는 버튼을 손쉽게 사용할 수 있도록 설계하였습니다.

데일리픽 컴포넌트 - 서비스 제어 및 알림/달력

서비스 제어 관련 컴포넌트입니다. 버튼 및 라벨은 용도에 따라 고유한 형태와 상태를 가지고 있습니다. 먼저 기본 버튼을 제작한 후, 옵션 값을 설정하여 상황에 맞는 컴포넌트를 설계하였습니다. 이렇게 설계함으로써 사용자들은 어떤 상황에서 버튼 및 라벨이 어떻게 작동하는지 보다 손쉽게 인지할 수 있습니다.

데일리픽 컴포넌트 - 그래프

마지막으로 소개할 컴포넌트는 바로 그래프입니다. 그래프는 사용자의 인지가 필요한 정보 영역입니다. 리메인은 그래프에 다양한 색상을 사용하여 단조로운 느낌을 줄이고, 사용자가 정보를 인지하는 데 있어 어려움이 없도록 설계하였습니다.

이렇게 컴포넌트 제작 과정까지 거친 후 드디어 앱의 최종 디자인이 나왔습니다.

데일리픽 메인 페이지

우선, 메인 페이지 디자인입니다. 리메인은 사용자 개개인에 맞춰진 콘텐츠를 제공하고 세로 스크롤을 통해 다양한 콘텐츠를 소비할 수 있도록 구성했습니다. 소비자는 자신이 원하는 정보를 눌러서 간편하게 확인하면 됩니다.

데일리픽 자가진단 탭

다음은, 데일리픽의 주 기능이라고 볼 수 있는 자가진단 페이지입니다. 간단한 설문조사를 통해 자신의 영양상태를 빠르고 전문적으로 확인할 수 있죠. 또한 자가진단 분석 결과 및 데일리픽만의 디테일한 큐레이션을 바탕으로 약사가 직접 설계한 영양제를 추천받을 수 있습니다. 자신에게 맞춤화된 서비스를 제공받길 바라는 소비자들에게 아주 딱 맞는 기능이죠.

데일리픽 검색 탭

데일리픽의 검색 탭입니다. 소비자가 영양제를 소비하는 니즈를 파악한 뒤 그에 따른 분류를 상단에 노출하여 사용자에게 원하는 리스트를 제공합니다. 사용자는 자신이 찾고 있는 영양제의 정보 및 리뷰를 간편하게 확인할 수 있습니다.

데일리픽 장바구니 기능

데일리픽의 구매 방식은 정기구매와 일반구매로 나뉘어 있습니다. 주문과 결제가 이루어졌을 때, 단일 상품 구매와 프로그램 구매 시의 주문서는 나눠지게 됩니다. 단일로 영양제를 구매했을 경우 소비자가 제품을 언제 먹을지 세팅할 수 있어 큐레이션과 더불어 나만의 영양제를 만들 수 있도록 설계하였습니다.