Newriver

어렵지 않게 이해할 수 있는 서비스, 더 알고 싶어지는 콘텐츠

진닥터 유전자검사를 처음 접하는 사용자 경험을 고려하여 메인 화면에서 유전자검사에 대한 직관적인 이해를 하도록 돕습니다.서비스를 알리는데만 집중하지 않고 유전자검사를 통해 변화되는 삶의 모습을 보여주어 진닥터가 우리 생활에 밀접함을 강조합니다.

소비자직접서비스(DTC, Direct-to-Consumer)로 병원과 같은 의료기관을 거치지 않고도 유전자검사를 직접 녹십자지놈 유전자분석기관에 의뢰할 수 있는 진닥터에 대한 설명만으로 웹사이트를 구축하기에는 부족하다고 생각했습니다. 그래서 우리는 사용자 입장에서 정돈된 디자인과 최소한의 주요 정보 노출로 웹사이트 방문 초기 피로도를 최소화하고 사용자 필요에 따라 정보에 직관적이고 손쉽게 접근하도록 구성하였습니다.

유전자검사를 통한 생활 전반에 걸친 이점을 바로 큐레이션합니다.

녹십자는 국내외 다른 의료 브랜드보다 성숙도나 신뢰도가 높기 때문에 녹십자 진닥터의 서비스 가치를 선보이는 것은 어렵지 않을 수 있습니다. 그렇기에 진닥터의 장점을 나열하는 것으로 콘텐츠 설계가 끝난다면 최초 목표로 한 쉬운 유전자검사를 간과할 수 있게 됩니다.

콘텐츠 설계에 있어 사용자가 유전자검사에 대한 이해를 높이도록 유전자검사를 통한 생활 변화상을 보여줍니다. 진닥터를 통한 유전상담으로 변화된 생활의 모습 중 가장 많은 효과를 보인 항목들을 엄선하여 심플한 톤앤매너를 도입하였습니다. 또한 스크롤링 타입을 도입하고 마우스 스크롤 시 한 섹션씩 하위로 내려가는 인포메이션 형태로 단계별 정보 습득을 돕습니다.

친근함을 높이기 위해 의문형 문체로 대화를 주고 받듯 콘텐츠를 설계하여 친근함을 높입니다. 부가적인 이동 없이 바로 행동으로 이어질 수 있도록 각 섹션마다 서비스 안내와 1:1 문의 버튼이 배치되어 바로 관심 유전자분야에 대해 정보 획득 및 상담으로 이어지도록 구성하였습니다.

디바이스의 한계를 넘어 일관되고 통일된 사용자 경험을 제공합니다.

PC와 모바일의 디바이스 차이를 극복하지 못하고 각각 별도로 구성하여 통일성을 해치기 쉽습니다. 우리는 모바일 사용자가 급증하는 현대 추세에 맞춰 녹십자 진닥터의 콘텐츠를 구성하는데 있어 모바일에서도 PC와 동일한 사용자 경험을 제공하도록 힘썼습니다. 모바일에서 햄버거 메뉴를 통한 사용자 편의를 고려하여 복잡한 메뉴구조를 버리고 최소한의 네비게이션 메뉴로 심플하지만 집중 높은 배치를 기본으로 합니다. 모바일 디바이스 사용자가 PC 화면에서도 동일한 사용자 경험을 할 수 있도록 배려합니다.

디바이스에 따른 최적화도 고민하여 각각의 검사 결과 정보 등을 열람하는데 있어 콘텐츠 나열 방식을 새롭게 도입하였습니다. 디바이스별로 통일성을 부여하되 차별화된 UI/UX 콘텐츠 페이지를 구성하여 보통 일반적인 의료 검사 결과의 페이지를 탈피하고 녹십자 진닥터만의 독특하고 사용자 편의를 목표로 최적화된 서비스를 제공합니다.

콘텐츠를 집중 부각시켜 이해를 높이고 머터리얼 디자인으로 현실감 부여

녹십자 진닥터의 디자인 컨셉은 대중적인 이해도가 낮은 유전자검사의 콘텐츠를 부각시키는 방법을 고려하였습니다. 콘텐츠 디자인 시 화려한 배경이나 효과를 배제하고 화이트&블랙의 모노톤을 바탕으로 심플하게 디자인하여 콘텐츠 집중도를 극대화합니다. 공지 메뉴나 사이드바, 팝업 등의 자질구레한 요소들을 삭제하고 심플한 네비게이션을 우측에 배치하여 오직 핵심 콘텐츠만으로 화면 전체를 채우는 것으로 명료성을 드높입니다.

PC와 모바일을 포함한 다양한 디바이스에서 사용자가 녹십자 진닥터 브랜드를 일관되게 인지하도록 웹사이트를 구성하고 있는 버튼과 아이콘 디자인을 통일하였습니다. 녹십자 진닥터는 유전자검사 특성상 온라인으로 정보를 습득해도 오프라인으로 유전자검사를 진행하기에 현실감을 웹사이트에 부여하고자 합니다. 여러가지 최적화된 디자인 가이드를 도입하고 테스트하여 최종적으로 머터리얼 디자인(Material Design)을 도입하여 입체감과 질감을 표현하였습니다.

* 머터리얼(Material : 물리적) 디자인: 사용자가 화면을 실제와 비슷하게 느껴 부담감 없이 웹사이트를 직관적으로 편리하게 활용할 수 있도록 배려하는 구글에서 제공하는 디자인 가이드

다음 내용이 더 궁금한 콘텐츠 표현 방식으로 호기심을 자극합니다.

웹사이트를 접속하여 특정한 매력 요인이 없는 이상 더이상 이동 없이 이탈로 이어지는 통계나 연구를 적극 고려하였습니다. 사용자는 웹사이트가 제시하는 콘텐츠가 매력적이지 않을 경우 바로 행동을 중단합니다. 본 프로젝트는 유전자검사의 쉬운 이해를 돕도록 콘텐츠 구성은 녹십자 진닥터의 신뢰도 위에 재미 요소를 삽입하였습니다.

녹십자 진닥터가 묻고 사용자가 답을 찾는 대화형 과정에 독특한 콘텐츠 큐레이션으로 열람 가능한 더 많은 콘텐츠가 있음을 사용자가 인지할 수 있도록 시각적인 단서를 곳곳에 배치하였습니다. 이를 위해 일부 화면의 그리드를 유지하되 페이지에서 종결하지 않고 이어지는 느낌이 들도록 컨셉을 반영하여 콘텐츠 연속성을 부여하였습니다.

브랜드 사이트에서의 감성과 신뢰를 느낄 수 있도록 합니다.

녹십자 진닥터의 유전자검사는 사람이 목표입니다. 녹십자 진닥터 웹사이트도 사람을 목표로 하기에 웹 표준과 웹 접근성을 준수하는 것은 기본입니다. 뿐만 아니라 유전자검사의 딱딱하고 고루한 이미지를 탈피하기 위하여 웹사이트 곳곳에 모션그래픽을 도입, 다양한 동적인 표현을 배치하였습니다.

웹사이트가 사용자와 텍스트로 대화하는 것에 그치지 않고 사용자의 행동에 따라 반응하는 동적 장치와 여러가지 모션이 도입됨으로써 사용자에게 호기심과 친근함을 부여하여 좀 더 녹십자 진닥터 브랜드에 대해 관심을 갖고 환기하도록 지원합니다.

또한 녹십자 진닥터의 신뢰도 높은 브랜드 가치를 지켜 나가도록 프로그래밍 시 다양한 디바이스 대응은 기본에 보안을 최우선으로 하였습니다. 개인정보가 특히 중요한 유전자검사의 특성상 개인 외 열람이 불가하도록 여러가지 프로그래밍적 안전장치를 배치하고 소스 코드 하나하나 수차례 보안 검토를 거쳐 안정성과 신뢰도를 유지할 수 있도록 고려하였습니다.

나눔고딕 폰트 도입으로 대중적이며 다양한 브라우저에 대응합니다.

녹십자 진닥터의 CI 컬러를 아이덴티티로 정의될 수 있도록 컬러가이드를 확립하였습니다. 진닥터 제품의 컬러인 오렌지는 서브 컬러로 사용하였습니다. 국문과 영문 폰트는 나눔고딕으로 통일시키고 속성 또한 최소한으로 심플하게 적용시켜 사이트의 불필요한 무게를 줄였습니다.

녹십자 진닥터만의 아이덴티티 정립으로 고유한 브랜드 가치를 만듭니다.

고객사의 정확한 니즈(Needs)를 파악하고 브랜드 정체성을 정립하고 사용자 분석 및 예측하고 구현하는데 그치지 않고 수많은 QA(Quality Assurance)를 거쳐 프로젝트 하나가 완료됩니다. 본 프로젝트는 유전자검사의 특성상 제품, 서비스의 시각적 표현을 단순하고 대담하게 하되 제공하고자 하는 서비스 목적과 사용자가 원하는 정보를 습득하고 행동에 이어지게끔 만드는 것이 관건입니다.

이를 위해 뉴리버의 녹십자 진닥터 프로젝트 팀에서는 메인, 콘텐츠 설계에서부터 전체적인 컨셉을 아우르는 디자인 가이드와 퍼블리싱 기획 및 세부 프로그래밍 진행까지 프로젝트 관련 인원 및 전체 뉴리버 전문 인력이 모여 수없이 많은 회의와 조정, QA을 거쳐 녹십자 진닥터 프로젝트를 완성하였습니다.

녹십자 진닥터 제네릭 카운슬링(genetic counselingㆍ유전상담)을 통해 보다 건강하고 행복한 삶을 영위할 수 있습니다.

진닥터는 생활 전반에 걸친 환경요인과 12가지 유전요인을 검사하여 예방치료를 제공합니다. 유전상담은 단순한 유전자 검사만은 아닙니다. 궁극적으로 사랑하는 사람들과 건강하게 오래 살기 프로젝트를 돕는 것을 목표로 합니다.

진닥터가 선보인 웹사이트에서 유전자검사를 처음 접하는 사람도 손쉽게 이해하고 의뢰하기까지 지원하는 것, 그것이 바로 본 프로젝트의 핵심이고 뉴리버가 진닥터 브랜드가치를 높이기 위해 기울인 노력입니다.