프레임아웃

프레임아웃 2014 Smart App Award 고객서비스 분야 대상 수상

Posted by | Frameout, 프레임아웃 | No Comments

“프레임아웃, SMART APP AWARD 2014 고객서비스 분야 대상 수상 “

지난 12월에 프레임아웃이 만든 삼성 TV App스마트 앱 어워드 2014에서 브랜드, 쇼핑부문 고객서비스 분야 대상을 수상했습니다!




2014년 시상식 한 장면

<스마트 앱 어워드>는 한국인터넷전문가협회에서 주관하는 행사로서, 매년 그 해에 발매된 앱 중에서 가장 뛰어난 앱을 선정하는 행사입니다. 최근 3년간 250개 이상의 기업이 참여하여, 240 여개의 스마트 앱을 출품 했다고 합니다.

최고의 앱을 선발하는 <스마트 앱 어워드> 평가 과정은 다음과 같습니다. 인터넷 분야 전문 교수진 10인의 자문을 받아 국내 대기업 그룹사, 주요 포털 및 통신회사 인터넷 실무책임자와 주요 방송/미디어 인터넷 담당 기자 등으로 구성된 50인의 운영위원단이 평가와 시상을 기획하고, 국내 기업/기관 인터넷서비스 운영 및 구축전문가 2,000명으로 구성된 전문평가위원과 온라인 평가회원 30,000 여명이 디자인, UI/UX, 기술, 콘텐츠, 서비스 등 총 5개 부문, 25개 평가지표에 따라 부문별 최고의 앱을 선정합니다. 여기서 선정된 앱이라면 인정할만 하겠죠?

   

   

같은 화면이지만 왼쪽과 오른쪽의 언어가 다르게 구성되어 있습니다.
삼성 TV App은 삼성전자 TV 제품 전체를 총 39개 언어로 세계 130여 국가에 서비스하는 글로벌 App 개발 프로젝트입니다. 삼성 TV가 있는 곳이라면 바로 이 앱을 통해서 쉽게 자신이 원하는 TV를 찾고 구매할 수 있도록 하자는 목표를 갖고 개발 되었습니다.


  

앱을 다운받아서 실행하면 다음과 같이 대륙을 선택한 후,
선택한 대륙에 해당하는 국가가 등장하여 각 국가에 맞는 언어를 선택하도록 되어 있습니다.

 

삼성TV의 글로벌 판매 증진을 목표로 만들어진 앱이기 때문에 전 세계 누구라도 이 앱을 통해서 삼성 TV를 선별할 수 있도록, 직관적이고 이해하게 쉬운 UI로 디자인 되었습니다.


다종다양한 TV를 3가지 조건으로 필터링 검색할 수도 있고


찜해 둔 TV끼리 한 눈에 알 수 있도록 비교할 수도 있습니다. 이 정도라면 어느 국가 어떤 사람이건, 자신이 원하는 TV를 쉽게 찾아낼 수 있습니다.

 

더군다나 삼성 TV App은 OCR스캔을 통한 제품 검색, 제품코드 타이핑을 통한 검색, 사용자가 원하는 조건을 직접 설정하여 검색할 수 있는 필터링 검색까지도 지원합니다.

특히OCR 스캔 기능은 App사용자가 오프라인 매장에서 App에 탑재된 스캔 기능을 통해 즉석에서 해당 TV의 정보를 확인할 수 있는 기능입니다.

 


 


프레임아웃이 만든 삼성 TV App은 제작 목적에 맞추어 사용자가 원하는 TV를 직관적으로 선택할 수 있도록 모든 직원들이 전심전력을 다한 결과, 평가의 전영역에 걸쳐 우수한 평가를 받으며, 대상 수상의 영광을 거머쥐었습니다.


2015년에도 디지털 환경의 오늘과 내일을 이어가는 프레임아웃을 기대해 주시기 바랍니다.

Connect to Tomorrow – FRAMEOUT

 



프레임아웃 2014 WEB AWARD KOREA 3개 부문 최우수상 수상

Posted by | Frameout, 프레임아웃 | No Comments

“프레임아웃, WEB AWARD KOREA 3개 부문 최우수상 수상”

프레임아웃이 지난 12월에 열린 WEB AWARD KOREA에서 총 3개 부문에서 최우수상을 수상 했습니다!



11회 WEB AWARD KOREA 시상식

< 스마트 앱 어워드>와 마찬가지로 <웹 어워드 코리아>도 한국인터넷전문가협회에서 주관합니다. <웹 어워드 코리아>는 한 해 동안 제작된 웹과 모바일 웹 기반의 사이트를 대상으로 웹전문가 2,000명으로 구성된 웹어워드 평가위원단이 심사하고 시상하는, 권위있는 시상식입니다. 프레임아웃이 최우수상을 수상한 사이트에 대해서 하나씩 알아보겠습니다.

 

1. 쇼핑몰 부문/ 전문쇼핑몰분야 최우수상 – 동화엠파크

 


사이트 주소: http://www.m-park.co.kr

제작사: 프레임아웃

클라이언트: 엠파크

웹사이트 설명:


‘믿으니까, 엠파크’라는 슬로건 아래 INNOVATION | TRUST | PROFESSIONAL 3가지 Concept으로 Renewal 하여 방문고객에세 차량에 대한 신뢰와 직관적인 정보전달의 편의성을 고려한 UI/UX로 전체적인 디자인을 도출했습니다.

전체적인 Layout은 Grid형태로 구분하여, Content를 간결하게 정리하였으며, BI의 모티브를 중요 Content에 적용하여 전체적인 Identity를 사이트에 녹였습니다. 또한 플래시를 사용하지 않고 중요한 모션들은 스크립트나 Motion GIF로 처리하여 사이트가 무거워지거나 산만해지지 않도록 하였습니다.

중고차 사이트의 핵심인 차량매물검색페이지를 중점으로 서브페이지기능을 강화했습니다. 차량 제조사로고를 클릭하면 해당 제조사 차량이 바로 리스트에 노출되도록 하여 검색의 직관성을 높였으며 차종별 검색에도 아이콘을 적용하여 좀 더 쉽게 고객이 차량매물을 확인할 수 있도록 구현하였습니다.

모바일은 GNB와 메인 페이지, 매물리스트를 중심으로 UI리뉴얼을 하였으며, 하단 고정 레이어 영역에 중요 Content를 배치시켜 고객이 사이트를 확인하다가 어디서든 고객상담, 차량상담, 클레임 접수를 쉽게 할 수 있도록 개발했습니다.

 

2. 공공/의료 부문 전문의료분야 최우수상- 자생한방병원

 


사이트 주소: http://www.jaseng.co.kr

제작사: 프레임아웃

클라이언트: (주)자생

웹사이트 설명:

자생한방병원은 국내 최대의 척추전문 병원으로서 다양한 분원에서 전문적인 서비스를 제공하고 있습니다. 기존 홈페이지에서는 중복된 컨텐츠 화면과 복잡한 구성으로 인해 컨텐츠가 많음에도 원하는 정보에 도달하기 어려웠던 점을 효과적으로 개선했습니다. 초진을 받게 되는 신규 환자들에게 질병과 치료에 대한 상세한 정보를 제공하고 그것이 예약으로 이어질 수 있도록 구성하였습니다. 그 외의 다양한 한방 컨텐츠를 제공하여, 병원의 브랜드 가치를 높이고, 일회성 방문에서 그치는 것이 아니라 지속적인 방문으로 이어질 수 있도록 개편하였습니다.

 

3. 모바일웹마케팅 부문 금융분야 최우수상 – 하나SK카드 모바일웹


사이트 주소: https://m.hanaskcard.com/

제작사: 프레임아웃

클라이언트: 하나카드 주식회사

웹사이트 설명:

하나SK카드 모바일웹 디자인 고도화 프로젝트는 최근 Trend에 맞는 디자인 반영과 모바일과 PC웹의 연계에 특화된 마케팅 최적화 플렛폼 구축 및 고객의 서비스 만족도 향상에 초점을 맞춰 프로젝트가 진행 되었습니다.

사용성을 높이기 위한 레이아웃의 효율적 구성, 메뉴 재그룹핑 및 신규 서비스 등을 반영하여 사용자에게 좀더 개인화된 혜택을 차별적으로 전달하고 이를 고객이 직관적으로 체감하는데 중점을 두었다. 또한 편리한 내비게이션의 구성을 위하여 GNB 구조를 개선하였습니다.

이상 웹어워드 코리아에서 최우수상을 수상한 사이트에 대해서 살펴봤습니다.

웹사이트 제작은 웹과 방문자, 클라이언트의 사업 목적과 웹사이트와의 관계 등을 종합적으로 이해하고 이를 구현해내야 하는 고도의 전문성을 필요로 합니다.

그 동안 프레임아웃은 <웹 어워드 코리아>에서 매년 탁월한 성과를 보여왔고, 2014년에도 다시 한번 통합 디지털 마케팅 대행사로서의 역량을 인정받아, 3개 부문에서 최우수상을 수상하는 영광을 차지하게 되었습니다.

2015년에도 디지털 환경의 오늘과 내일을 이어가는 프레임아웃을 기대해 주시기 바랍니다.

Connect to Tomorrow – FRAMEOUT

http://www.jaseng.co.kr
http://www.jaseng.co.kr

모바일과 데스크탑에 최적화된 이메일 마케팅 전략!

Posted by | call to action, Digital Marketing, email marketing, Frameout, marketing, 디지털마케팅, 모바일 최적화, 프레임아웃 | No Comments

스마트기기를 이용해 이메일을 확인하는 사람들이 점점 늘어나고 있기 때문에, 비즈니스 메일을 발송하기 전에는 이 점을 고려해 고객이 컨텐츠를 편하게 볼 수 있도록 디자인 하는 것이 중요해지고 있어요. 따라서 데스크탑과 모바일, 타블렛에서 모두 최적화된 디자인을 확인 할 수 있도록 반응형 이메일 템플릿을 제작하여 사용하는 것이 필요합니다. 하지만 당장 반응형 이메일을 제작하는 것이 어렵다면, 타겟고객이 어떤 디바이스에서 메일을 주로 확인하는지를 분석 한 후, 그 해당 디바이스에서라도 최적화 된 템플릿을 제작하여 사용자 편의성을 제공하는 것이 필요할 것 같아요.

그래서 오늘은, 데스크탑과 모바일에 각각 최적화된 이메일 마케팅 전략을 한 가지씩 소개해 보려고 해요! 일단 데스크탑 메일!

데스크탑에서 메일을 확인하는 분들이 가장 많이 사용하는 것은 바로 아웃룩(Outlook)이죠! 하지만 아웃룩은 스팸메일을 막으려는 의도에서 메일에 삽입된 이미지의 자동다운로드를 제한하고 있는데요. 이에 따라, 메일 전체를 통으로 코딩해서 발송할 경우 메일 오픈 시 콘텐츠가 전부 블락되어 보이는 상황이 발생하게 됩니다. 고객이 친절하게 오른쪽 버튼을 이용해 이미지를 다운로드 하지 않는 한, 어떤 내용의 메일인지 절대 확인할 수 없게 되는 거죠….때문에  메일의 높은 응답률을 위해서 중요한 컨텐츠는 이미지가 아닌 텍스트로 처리해서 명확하게 표현될 수 있도록 하는 것이 중요합니다! 아래 예시를 보면 더 이해가 잘 되실 거에요.

그림2

왼쪽의 삼성 이메일 사례를 보시면, 이미지는 블락되었지만 텍스트를 통해서 어떤 내용인지 짐작이 가시죠? 이렇게 되면, 고객은 이미지 다운로드 버튼을 눌러, 메일을 제대로 확인하고 싶은 욕심(?)이 생기게 될 것 같아요! 반면, 오른쪽의 메일은 전체가 블락되어 어떤 내용인지 전혀 확인이 불가능 합니다. 친절한 고객을 만나지 않는 한…이 메일은 그대로 휴지통으로 사라지겠죠…? 앞으로 비즈니스 메일을 발송 할 때는 꼭 이 점을 염두해두시고 제작해주세요!

 

이번에는 모바일에 최적화 하는 방법입니다! 모바일 이메일에 대해 사용자들이 불편해 하는 점은 너무 많은 스크롤, 모바일에 알맞지 않은 레이아웃, 너무 많은 컨텐츠 제공, 링크연결이 어려운 점, 텍스트를 읽기 불편한 점 등 인데요. 그렇기 때문에 모바일 디바이스에 최적화 하기 위해서 가장 필요한 것은 바로 “Simple and Easy” 인 것 같아요! 모바일에서 확인하는 이메일은, 깔끔하고 단순해서 한눈에 들어와야 하고 스크롤과 클릭하기 쉬워야 합니다.

이메일마케팅전략2

메시지는 깔끔하고 단순하게 중요한 내용만 작성하는게 좋고, 내용을 한 눈에 설명할 수 있는 이미지와 함께 전달하는게 중요합니다!  그리고, 모바일은 손가락을 사용해서 스크롤하고 클릭하기 때문에 보다 넣은 영역을 제공해주는게 사용자에게 편하겠죠? 버튼과 링크의 크기를 크게 만들고, 각 섹션을 깔끔하게 나누어줘야 합니다. 각 섹션 사이의 공간도 넉넉하게 디자인 하는 것이 좋습니다. 물론 모든 영역이 클릭가능하도록 제작해야 하는 건 당연하겠죠?

 

데스크탑과 모바일에 최적화 된 메일이 서로 어떻게 달라져야 하는지 한 눈에 알 수 있는 인포그래픽을 마지막으로 이 포스팅을 마칠게요^^

이메일마케팅전략3

이메일 템플릿에 반드시 포함해야 할 콘텐츠는 무엇일까?

Posted by | call to action, Digital Marketing, email marketing, Frameout, marketing, 마케팅, 프레임아웃 | No Comments

지금까지 포스팅한 자료를 보면서
이메일 마케팅을 통해 고객에게 전달하고자 하는 그 무엇인가를 ‘어떻게’, ‘어떤 방법’으로 보여야 할 것인가에 대한 여러 가지 고민을 해보았다면,
그전에 우리가 만들어야 할 그 ‘무엇’에 대한 이야기를 해볼까 합니다.

이메일 마케팅에서 가장 중요한 요소 중 하나인 바로 ‘콘텐츠!’

이메일 마케팅을 시도하는 모든 마케터들이라면 누구나 한 번쯤은 보았을 내용일 수도 있습니다.
하지만 Basic is best! 란 말이 있듯이 특별하지는 않지만 가장 좋은 기본적인 것,
즉 이메일 템플릿에 반드시 포함해야 할 콘텐츠에 대하여 아래와 같은 자료를 공유해 드립니다.

 

콘텐츠를 만들 때 템플릿에 포함해야 할 아이템 Top 10!

top10tips-to-include-in-your-email-template

1. Professional Header
– 수신자가 이메일을 받고 처음 보게 되는 상단부분에 신경을 써야 하는 것이 1순위!

2. Call to Action(Download, Buy now, Click Here)
– 이메일 내용에 관심있는 고객들이 바로 행동으로 옮길 수 있는 버튼의 적절한 배치

3. Navigation that mimics your website
– 웹사이트로 이동할 수 있는 경로를 제공

4. Contact Information
– 기타 연락처 정보 제공

5. Promotion or Offer
– 이벤트, 할인, 고객 혜택에 대한 정보 제공

6. Valuable Download(PDFs, Brochures)
– 이메일 내용과 관련 있는 자료 제공

7. Highlights or Features
– 강조할 점을 눈에 띄게 확실하게 강조

8. Social Media Buttons
– 페이스북, 트위터 등 운영하는 소셜미디어 링크 포함

9. Relevant and Concise contents
– 간결한 콘텐츠 제공

10. Balance of Text and Images
– 텍스트와 이미지를 적절하게 배치

 

출처 : http://blog.swiftpage.com/2013/01/17/top-10-items-to-include-in-your-email-template

 

사용자 경험을 고려한 이메일이란?

Posted by | Digital Marketing, email marketing, Frameout, marketing, Mobile web, 가벼운 구성의 이메일, 모바일 최적화, 움직이는 GIF 사용, 프레임아웃 | No Comments

Blog_image_-email-best-practices

 

앞서 포스팅한 자료를 통해서도 알 수 있듯이 고객들은 시대 변화에 맞춰 다양한 디바이스를 통해 이메일을 접하고 있습니다.
작은 모바일 세상을 통해서도 다양하고 가치 있는 정보를 얻을 수 있기 때문에
웹을 사용하는 유저의 비율은 점차적으로 줄고 있으며, 모바일을 통한 이메일 오픈율이 높아지는 것도 어쩌면 당연한 결과일지도 모릅니다.

이메일 마케팅 역시 이러한 변화에 맞춰 모바일 디바이스를 고려한 이메일, 즉 사용자 경험을 고려한 이메일을 진행해야 할 것입니다.
디자인뿐만 아니라 제한된 용량, 네트워크 속도 등 모바일의 다양한 행동과 환경들을 분석하여 사용자 경험을 고려한 이메일은 모든 마케터들이 고민해야 할 부분이겠죠.

하지만 이메일을 모바일로 확인하는 고객들은 아직도 불편한 점이 많습니다. PC 화면에 최적화된 이메일 화면을 스마트폰의 작은 모니터로 확인하기엔 여러 가지 불편한 요소 많기 때문입니다. 결국 이와 같은 불편한 사용은 고객들과의 마케팅 연계도를 떨어뜨리는 부정적인 결과를 가져올 수도 있을 겁니다.

 

그럼, 사용자 경험을 통한 이메일은 어떻게 만들어야 할까?

‘모바일 최적화, 이메일은 용량은 가볍게, GIF 애니메이션 이미지를 통해 고객의 시선을 사로잡는 것’이 바로 핵심 포인트!

 

1. 모바일 최적화

모바일 최적화는 스마트폰 화면에서 HTML 디자인이 적용된 320~480px 크기의 이메일이며, 주로 최신 스마트폰에서 사용자가 이메일을 열어볼 때 사용됩니다.

모바일 최적화의 특징은,
1) 하이브리드 접근으로 대부분의 사용자에게 좋은 경험이 제공된다.
2) 프로그램에 접근하는 단계가 쉽다.
3) 축소된 사이즈의 디자인으로 구성되어 있다.
4) 콘텐츠들을 위해 빈 공간들이 최소화되어 있다.

이 4가지가 대표적인 특징입니다. 그럼 모바일에 최적화된 템플릿 디자인 전략은?

 

첫째, 심플하게 만들어야 한다!
bee0904_d6f4fa17c07a219fed09cc037dfb8684

사용자들은 다양한 행동을 하는 동시에 모바일을 사용하기 원합니다.

그렇기 때문에
1) 메시지를 깔끔하고 단순하게 만드는 것
2) 메시지를 설명하기 위해 그래픽을 이용하는 것
3) 중요하지 않은 요소들은 삭제하는 것이 중요합니다.

 

둘째, 스크롤 하기 쉽게 만들어야 한다!
bee0904_b20880d14dfd96e590260185fb11f18b

사용하기 쉬운 스크롤은 모바일 사용자의 관심과 집중을 유발하며 재빠른 탐색을 통해 주요 정보를 쉽게 습득 가능하도록 만들어 주는 장점이 있습니다.

스크롤이 쉽게 모바일 페이지를 만드는 방법은
1) 깔끔하게 나누어진 섹션으로 메시지를 구분한다.
2) 카피 문구를 위한 구역을 따로 설정한다.
3) 큰 제목과 이미지의 시각적 흐름을 설정한다.
4) 펼쳐보기를 통해 상세 내용을 확인할 수 있게 만든다.

 

셋째, 클릭하기 쉽게 만들어야 한다!
bee0904_384472fc49a0ba8b148a245498ee8e41

모바일은 손가락으로 클릭하기 때문에 사용자가 클릭을 좀 더 정확하게 할 수 있도록 충분한 공간을 고려하며 디자인해야 합니다.

좀 더 쉬운 클릭을 위해서는
1) 버튼과 링크의 크기를 크게 만든다.
2) 각 메뉴 섹션 사이의 공간을 확보한다.
3) 모든 섹션이 클릭 가능하도록 만든다.

 

2. 가벼운 구성의 이메일

적절한 이미지 포맷, 이미지 개수, 짧고 간결한 디자인, 간략한 텍스트 메시지들의 조합은 사용자 경험과 함께 클릭률과 도달율도 함께 상승시킬 수 있는 중요한 요인이 됩니다.

1) 적절한 이미지 포맷을 사용한다. GIF는 크기가 작고 낮은 해상도 이미지(화살표, 선, 로고)에 적합하며
2) JPEG(60% ~ 70%의 퀄리티)는 사진 이미지에 적절하다. 그리고 PNG는 투명 이미지에 최적화되어 있는 포맷이다.
3) 이미지 개수를 줄여야 한다. 가장 좋은 방법은 HTML 기반의 텍스트를 사용하는 것이며, 이를 통해 사용자 경험과 함께 클릭률과 도달율도 증가시킬 수 있다.

이메일 디자인은 짧고 간결하게 만들어야 합니다. 이메일을 읽는 평균 시간은 보통 15 ~ 20초이기 때문입니다.

 

3. 움직이는 GIF 사용

미국의 경우, 홀리데이 시즌이 다가올수록 이메일에서 움직이는 GIF 이미지를 많이 사용하게 되는데, 재미와 감동을 더해주기 위해선 몇 가지 명심해야 할 사항이 있습니다.

1) 움직이는 GIF 이미지는 이메일에서 자주 사용됩니다. 하지만 2007/2010 아웃룩과 윈도우 모바일 7에서는 첫 번째 프레임에서만 보입니다.
2) 움직이는 GIF 이미지 용량은 매우 무겁기 때문에 주의하지 않으면 매우 큰 용량으로 만들어집니다. 크고 화려하며 빠르게 움직이는 애니메이션은 쉽게 용량이 증가되므로, 이미지 크기와 용량을 최소화함으로써 GIF 크기를 제한하고 전체 프레임 수를 최소화해야 합니다.
3) GIF 이미지는 제한된 색상을 사용할 수 있기 때문에 모든 컬러 이미지에 알맞은 것은 아닙니다. 움직이는 GIF 이미지는 주로 촛불, 떨어지는 눈, 다른 미묘한 움직임을 표현할 때 사용되는데,  Cost Plus World Market의 사용 예를 보면 용량은 19K밖에 안되지만 이메일에서 재미있는 축하 느낌을 받을 수 있습니다.

CPWM-Example_03

 

 

 

출처: responsys by Caleb Larsen