본문 바로가기

gadjet/What's NEW

가젯 랜딩페이지 개선기

 

안녕하세요 지랩스의 프로덕트 디자이너 유미입니다 :)

가젯에는 최근 로고부터 브랜딩, 랜딩페이지(홈페이지)까지 대대적인 변화가 있었답니다.

오늘은 그 중에 랜딩페이지 개선에 브랜딩 이야기를 조금 더해 들려드릴게요.

(가젯으로 매일 업무를 하시는 분들은 아직 눈치채지 못하셨을지도 몰라요. 잠시 로그아웃을 하시거나 새 시크릿 창을 열어 gadjet.io로 접속하시면 보실 수 있답니다.)

 


과거의 가젯 홈페이지... 혹시 기억하시나요?

많은 것이 아쉽고 부족했던 ㄴ ㅓ...

(구)랜딩페이지는 우리 가젯의 매력을 디테일하게 보여주지 못했어요.

  • 가젯을 쓰면 뭐가 좋은지, 또 가젯으로 어떤 것들을 할 수 있는 툴인지 금방 알아챌 수 없었고 (우리 가젯 진~짜 편한데 디테일하게 자랑할 곳이 없었어...)
  • 가젯을 희미하게나마 기억하게 할 수 있는 통일된 브랜드 아이덴티티도 없었죠

아쉬웠던 부분들을 개선한 우리 가젯의 랜딩페이지가 어떻게 바뀌었을지 NEW 랜딩페이지 탄생의 과정, 이제부터 들려드릴게요.

 


짜잔 가젯의 새로운 랜딩페이지를 소개합니다★ (우리 가젯 예뻐진 것 좀 보세요٩( ᐖ )ミ( ᐛ )و)

1. 가젯의 가치를 담기

우리가 왜 필요하냐면요!

고객들이 어? 내 얘긴데? 하고 관심을 가지실 수 있도록, 실제 공간 매니저님들이 공간 운영을 하며 느끼는 불편함에 대한 목소리를 담았어요. 고객이 가지고 있는 어려움과 불편함에 공감하고 그 문제 해결에 대한 솔루션이 필요할 때 우리가 여기 있다고 알려드리고 싶었거든요.

 

 


2. 가젯으로 할 수 있는 일들 쉽게 보여주기

1) 수많은 기능들을 카테고리로 묶기

가젯은 생소한 기능이 많은 솔루션이기 때문에 (구)랜딩페이지처럼 단편적인 설명만으로는 가젯이 복잡한 공간관리를 어떻게 쉽게 만들어줄 수 있는지 충분히 보여줄 수 없어서 기능 소개를 위한 새로운 페이지가 필요했어요.

가젯의 기능 페이지를 기획하며 또 하나의 고민이 생겼는데요. 분명 편하고 좋은 기능이 많지만 이것도 좋고 저것도 좋으니까 다 설명해 드리자!! 하다가는 더 복잡하게 보여질 수 있었거든요.

가젯의 많은 기능들을 어떻게 풀어야 쉽게 술술 이해가 될까 많은 고민 끝에, 먼저 핵심 기능들을 추려 리스트업한 뒤 4개의 카테고리로 묶어 정리했어요.

먼저 가젯의 기능을 모두 나열한 후에 공통점을 가진 기능들끼리 묶어보며 고민고민...

 


2) 실제 업무의 흐름으로 보여주기

다음으로는 가젯의 기능이 내 업무에 어떻게 적용될지 그려볼 수 있도록 개선했어요. 복잡했던 업무들을 가젯이 어떻게 쉽고 편하게 만들어 줄지, 또 나와 우리 입주사가 가젯으로 어떤 일을 할 수 있을지 고려해볼 수 있도록 했죠. 이를 위해 ‘공간 운영사 - 입주사’의 연결된 일의 진행을 각각의 단계로 풀어 흐름을 보여주었어요.
그리고 각각의 기능을 이미지와 함께 구체적으로 보여주었어요. 기능에 대한 설명도 빠르게 이해할 수 있도록 최대한 쉬운 단어와 친근한 어투로 풀어썼어요.

 

 


3. 가젯에 브랜드 컬러 입히기

미션 : 소프트한 소프트웨어로 포지셔닝

1) 부드럽고 가벼운 이미지 만들기

관리 시스템은 어렵고 복잡하다고 느껴질 수 있어요. 거기에 ‘공유공간 운영•관리 자동화 솔루션’이라니… 간단한 설명을 위해 구성된 핵심 단어들조차 어렵고 생소하죠. 그래서 조금 더 친근하게 다가오실 수 있도록 말랑하고 부드러운 이미지를 컨셉으로 잡았어요.

요론 말~랑함 + 요론 소~프트함

2) 지루하지 않을 핀 더하기 (💚+💜+🖤)

가젯은 원래 ‘초록’ 한가지 컬러를 사용하고 있었는데요. 시각적 위계를 더 빠르게 캐치할 수 있게 하고 디자인에 풍성함도 더하기 위해 컬러를 추가했어요. 초록을 프라이머리 컬러로, 보라를 세컨드 컬러로 초록과 적절히 믹스해 사용하고 다크컬러로는 자칫 너무 가벼워질 수 있는 분위기에 무게를 잡아 주었어요.

 

브랜드 컬러, 솔루션의 컬러로는 더더욱 찾아보기 힘든 '초록-보라'의 조합을 선택한 이유는,

  • 익숙하지 않음으로 가젯을 처음 보는 사람들의 기억에도 남아보겠다
    (’오 새롭군’ or ‘으 모야 이 조합은. 이상해’ 모 아니면 도지만 어느쪽이든 기억에만 남는다면 성공…^_ㅠ)
  • IT 솔루션이기에 네이비, 파랑 계열도 후보에 있었지만 (네이비, 짙은 파랑 계열은 지적이고 세련된 이미지로 신뢰를 주는 컬러라서 은행, 큰 기업 등에서 많이 사용해요) 말~랑한 이미지를 원했기 때문에 푸른 계열이 주는 차분한 분위기 보다는, 상대적으로 가볍고 적색이 가미되어 신비로운 분위기를 주는 보라를 택했다
  • 컬러 스펙트럼 중에 ‘초록’과 ‘보라’가 중성 컬러라 같은 그룹의 색을 택해 밸런스를 맞추고 싶었다

라는 tmi를 남기며 넘어가 볼게요.

 

가젯의 새 컬러 조합을 적용한 랜딩페이지

3) 디자이너님~ IT 솔루션이니까 전문적인 느낌을 가져가지만 고객한테 어려운 느낌으로 다가가지는 않는 그런 알잘딱깔센  느낌으로 부탁해요~

(사실 누구도 저에게 이런 오더를 내린 적은 없습니다...ㅎ)

 

소프트한 컬러의 그라데이션과 둥글둥글 모서리를 이용해 말랑하고 부드러운 이미지를 만들고, 캐주얼한 3D 아이콘으로 솔루션의 전문적 이미지도 놓치지 않았어요.

 

오늘 제가 준비한 이야기는 여기까지예요.
이렇게 새로워진 가젯, 이해가 조금 더 쉬워지셨나요?

앞으로도 꾸준히 개선되고 발전할 가젯, 지켜봐 주세요!