스타트업을 위한 디자인 시스템 구축하기

디자인 시스템 예시로 알아보는 스타트업을 위한 디자인 시스템 구축 방법 고객에게 선택받는 콘텐츠를 빠르게 만드는 방법을 알려드려요.

Sep 06, 2024

Contents

그로스팀 디자인 시스템의 역할 기존 디자인 시스템과 그로스팀 디자인 시스템의 차이 그로스팀 디자인 시스템 핵심 목표 그로스팀 디자인 시스템 구축 핵심 예시를 통한 디자인 시스템 구축

💡

이런 분들이 보시면 좋아요! 1. 콘텐츠 디자인이 필요한데 현재 마케팅, 디자이너가 없는 조직 2. 휘발성 콘텐츠가 아니라, 계속 개발할 수 있는 디자인 인사이트를 얻고 싶은 조직 3. 디자인 시스템을 통해 마케팅 인사이트를 얻고 싶은 디자이너

광고, 카드뉴스 등 하루에도 수백 개의 콘텐츠가 생겨나고 소비자에게 노출됩니다. 이 중 소비자에게 선택받는 콘텐츠는 소비자의 참여와 공감을 끌어내는 콘텐츠입니다. 이를 위해서는 결국 소비자의 눈에 바로 닿는 ‘시각적 요소’가 핵심인데요. 우리는 다양한 SNS를 통해 콘텐츠를 접할 때, 시각적으로 눈에 띄는 썸네일을 먼저 누르는데요. 이렇게 소비자에게 선택받는 콘텐츠를 만들기 위해서는 결국 디자인이 무척 중요한 역할을 합니다.

하지만 소비자에게 선택 받는 콘텐츠를 만들기 위해 시간을 많이 들여 디자인 작업을 해도 소비자에게 선택을 받지 못할 수 있습니다.

시간과 인력을 낭비하지 않고, 소비자에게 선택받는 콘텐츠를 만드려면 어떻게 해야 할까요? 그로스팀은 소비자에게 선택받는 콘텐츠를 빠르게 만들 수 있도록 기존 디자인 시스템을 변형하여 새로운 디자인 시스템을 만들었습니다.

그로스팀 디자인 시스템의 역할

반복 작업 없이 소비자에게 선택받은 디자인 소스를 활용할 수 있게 도와주는 디자인 저장소

비디자인 직군 (마케터,PM 등)도 디자인에 대해 함께 소통하고 빠르게 수정할 수 있는 협업 창구

디자인뿐만 아니라 마케팅과 관련한 인사이트를 한눈에 확인할 수 있는 시스템

기존 디자인 시스템과 그로스팀 디자인 시스템의 차이

기존 디자인 시스템: 제품의 목적에 맞도록 일관되게 구성된 디자인 언어

그로스팀 디자인 시스템: 기존 디자인 시스템 + 가설 검증 + 디자인 디벨롭 과정

그로스팀 디자인 시스템 핵심 목표

원활한 ‘디자인 협업’을 통해 소재를 ‘발전’시키고 ‘핵심 성과 증대’를 유도

한눈에 콘텐츠 디자인 발전 과정을 보이게 하여 핵심 고객이 반응하는 위닝 콘텐츠를 발굴한다.

그로스팀 디자인 시스템 구축 핵심

그로스팀의 디자인 시스템은 디자인 툴 ‘피그마’를 통해 구축합니다.

💡

피그마란? 온라인에서 사용할 수 있는 디자인 툴로 웹・앱・콘텐츠 디자인 등 다양한 분야에서 사용 가능

피그마의 장점 1. 다른 디자인 툴과 비교해 ‘협업 기능’이 강화 • 실시간 공동 편집이 가능하며 코멘트 기능을 활용하여 피드백 주고받기 가능 2. 공유하기 어려운 대용량 원본 파일을 전달하지 않아도 쉽게 공유 가능

1. 프로덕트 디자인 시스템

기존 디자인 시스템과 같이 그로스팀의 클라이언트와 제품(서비스)에 대한 톤 앤 매너를 합의합니다.

2. 퍼널 설계

기존 디자인 시스템과 다르게 그로스팀 디자인 시스템은 퍼널별로 나뉘어 있습니다. 그로스PM 혹은 마케터가 설계한 퍼널에 따라 집중해야 하는 단계를 파악하여 디자인 시스템을 구축합니다.

3. 퍼널별 콘텐츠 시스템

그로스PM과 마케터가 제품의 타겟 고객과 강점, 시장 등을 분석하여 가설을 도출합니다.

가설 도출 후, 경쟁사 혹은 도출한 가설과 적합한 디자인 레퍼런스를 디자이너에게 전달합니다.

디자이너는 가설을 시각화하여 디자인 작업을 진행합니다.

💡

이때, 가설 테스트를 위해 디자인에서 중점이 되어야 할 사항

클라이언트와 합의된 프로덕트 디자인 시스템을 바탕으로 디자인 진행

테스트하려는 가설에 집중하여 가독성 위주의 디자인 진행

A/B 테스트 진행 시 딱 1가지 요소만 달라져야 함 (ex. 폰트만 변경, 이미지만 변경 등)

작업물을 통해 소비자에게 콘텐츠를 노출하며 어떤 가설을 기반으로 한 디자인이 고객에게 선택받는지 끊임없이 검증합니다.

A/B 테스트에서 고객에게 선택받은 ‘위닝 소재 (Winning)’를 발굴한 뒤, 위닝 소재 인사이트를 분석해서 발전시킵니다. 그로스팀 디자인 시스템을 통해 우리는 가장 빠르고 합리적으로 고객에게 선택받는 콘텐츠를 만들어 나갑니다.

예시를 통한 디자인 시스템 구축

그로스팀과 함께하는 AI 개발 솔루션 기업 ‘렛서’의 사례를 통해 디자인 시스템을 구축하는 방법을 알려드릴게요. ‘렛서’는 기업들이 쉽고 빠르고 간편하게. AI를 개발하고 관리할 수 있는 제품을 만드는 서비스입니다.

▶️ 렛서 서비스가 궁금하시다면? (클릭)

그렇기 때문에 ‘전문적인’, ‘간단한’, ‘친근한’ 이라는 핵심 키워드로 깔끔한 고딕체와, 친근함을 주는 산뜻한 컬러와 전문성을 강조하는 무채색 컬러로 프로덕트 디자인 언어를 합의했어요.

디자인 언어를 합의한 이후, 렛서의 목표에 맞게 퍼널과 가설을 설계하고 이를 시각화하는 작업을 진행했습니다.

✅ 렛서의 핵심 목표: 무료 체험 신청 DB 확보

✅ 목표에 따른 집중 퍼널: 유입과 전환

A/B 테스트를 진행하여 가설을 검증하기 위해 그로스팀이 세운 가설은 아래와 같습니다.

💡

[가설 A] 고객이 불편을 느낄 부분을 언급하고 DB 챗봇으로 해결책을 제시한다면 무료 체험 폼 제출이 높아질 것이다. [가설 B] 직관적인 숫자를 사용하여 한 번에 여러 자료를 조회할 수 있다는 점을 강조한다면 무료 체험 폼 제출이 높아질 것이다.

렛서의 경우, 최대한 정확하게 가설을 검증하기 위해 동일한 이미지 요소에 문구만 다르게 테스트를 진행했습니다. 소구점 A/B 테스트가 가장 중요했기 때문에 가독성을 핵심으로 디자인을 진행했어요! 그 결과, 가설 B 소재가 더 높은 전환율을 기록했습니다.