안녕하세요 홈페이지 전문 제작업체 아몽소프트웨어입니다!
최근 성공적으로 끝마친 인바디 프로젝트 이후, 인바디측에서 무려 3개의 프로젝트를 저희와 함께하자며 제안을 해주셨습니다.
프로젝트 진행함에 있어 항상 소통이 잘 되었고 피드백이 즉시 반영되었던 프로젝트중 하나였기에 이런 긍정적인 제안을 주시지 않았을까 합니다.
인바디와 더불어 홈페이지 제작에 마무리 작업인 SEO작업만 남아있는 하나의 프로젝트가 있는데요.
바로 신차 리스 서비스를 전문적으로 제공하는 매칭카였습니다. 매칭카는 홈페이지 리뉴얼을 저희에게 맡겨주셨습니다.
다음은 매칭카 렌트카홈페이지제작 하기전의 모습과 리뉴얼 후의 모습입니다.
(Before) 리뉴얼 전 홈페이지 모습
(After) 리뉴얼 후 홈페이지 모습
자동차에 관련된 직업에 대해서 사회의 시선은 매우 부정적으로 바라보고 있었습니다.
이는 허위 매물 사기, 중고차 사기등 나의 돈을 사기를 쳐 가져가는 비양심적인 업체때문에 많은 자동차 관련 직업, 업체가 불편한 시선과 편견을 견디고 있었습니다.
이에 아몽과 매칭카는 반드시 소비자들에게 신뢰를 줄 수 있으며 모든 궁금증을 풀어줄 수 있는 렌트카 홈페이지를 만들어야 했습니다.
다음은 홈페이지를 만드는 과정에서 나눴던 카카오톡 내용입니다.
![](https://postfiles.pstatic.net/MjAyMTA1MDNfMjEx/MDAxNjIwMDI3MDk0MDgz.0t65NPUshKJOX0rX99Tp5dM0N9UBOEcctfLN6drwIcwg.HNZ-0EPEgPgUL95Jht-FStO3S_451MK-0N2-6nD7brgg.PNG.among_software/image.png?type=w580)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2021/05/04142919/image-2.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2021/05/04142928/image-3.png)
이런 과정이 있었기에 성공적인 매칭카를 만들수 있었는데요.
어떻게 매칭카를 기획하고 만들었는지 저희 아몽소프트웨어의 제작사례와 함께 보도록 하겠습니다.
뿐만아니라 저희와 계약을 하지 않더라도 끝까지 제작사례를 읽으신다면 어떤 부분을 기억하고 홈페이지업체와 이야기를 나눠야 하는지 알게 될 것입니다.
홈페이지를 알고 맡기는 것과 홈페이지에 대해 전혀 모르고 맡기는 것은 천지차이임은 이 글을 끝까지 읽으시는 대표님이라면 분명 느낄 것입니다.
서론이 길었습니다. 매칭카 홈페이지 제작사례 지금 시작하도록 하겠습니다.
렌트카홈페이지, 매칭카 홈페이지 리뉴얼 제작사례
매칭카의 경우 앞서 말한 것처럼 고객의 신뢰성과 믿음을 반드시 확보해야 구매가 일어나는 상품이었습니다.
그렇기에 리뷰, 후기와 같은 사회적근거가 홈페이지에 반드시 들어가야 하며 이유가 있는 레이아웃 구성을 해야 비로소 구매가 일어나게 됩니다.
아마 글로만 보면 이해가 잘되지 않을 것입니다. 기존 홈페이지와 리뉴얼된 홈페이지를 비교하며 쉽게 알아보도록 하겠습니다.
1. B.I 작업
B.I란 Brand Identity로 브랜드만의 고유특성을 의미합니다.
아몽소프트웨어에서는 매칭카만의 고유한 BI를 지인같은 신뢰를 주기위해 브랜드 로고를 교체하였습니다.
기존의 매칭카 로고는 다음과 같았습니다.
❌ Before Brand Logo |
매칭카는 신차리스를 찾고있는 고객님들에게 가장 빠르고 정확한 매물을 소개해드리는 서비스를 제공하고 있었습니다.
그렇기에 신뢰를 주며 단번에 기억하기 쉬운 로고를 통해 브랜드의 색깔을 입혔어야 했습니다.
그런 부분에서 기존로고는 다소 매칭카를 기억하기에 쉽지않은 로고 및 색상을 사용하고있었습니다.
아몽소프트웨어는 B.I를 다음과 같이 진행하였습니다.
✅ After Brand Logo |
![](https://postfiles.pstatic.net/MjAyMTA1MDNfMjky/MDAxNjIwMDE0NzkzNTUx.lKSojsQrcC1-oMO-egncd_x7tt3OcEx1UhNcBCwsX9wg.gKdyumGc4fUyrYhiYnrAj50gn4lrWEJI_Sv7W6I6WRUg.PNG.among_software/%EB%A7%A4%EC%B9%AD%EC%B9%B4-%EC%B5%9C%EC%A2%85_0000_Vector-Smart-Object.png?type=w580)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2021/05/04142959/%EB%A7%A4%EC%B9%AD%EC%B9%B4-%EC%B5%9C%EC%A2%85_0000_Vector-Smart-Object.png)
파란색 계열은 신뢰, 투명성, 안정성을 나타내며 비즈니스에서 가장많이 사용되는 색깔입니다.
또한 고객에게 신뢰를 가장 많이 주어야하는 은행을 살펴보시면 대부분 파란색의 로고를 확인할 수 있을 것입니다.
은행과 마찬가지로 신뢰를 브랜드 특성에 반드시 담아야하는 매칭카는 파란색 계열의 로고와 친근한 아이콘을 사용해 소비자 마음의 장벽을 없애나갔습니다.
B.I 작업을 마친 이후에 홈페이지 기획에 들어갔습니다. 홈페이지는 어떤 구조로 되어있고 왜 이런 구조를 선택했는지 함께 보도록 하겠습니다.
2. 히어로 페이지
히어로페이지란 가장 첫화면에 들어가는 홈페이지로 사용자의 시선을 사로잡아야합니다.
홈페이지 사용자는 홈페이지가 나한테 좋은 정보를 줄 수 있는가?를 판단하는데 단, 5초만에 결정합니다.
게다가 홈페이지에 접속하는데 렉까지 걸린다면 아예 우리의 홈페이지를 보지도 않고 나갈 것입니다.
이 글을 읽고 계신 대표님들도 앞선 경험을 하셨을 것입니다. 이처럼 히어로페이지는 홈페이지에 있어서 가장 중요한 페이지중 하나입니다.
기존 매칭카의 히어로페이지는 다음과 같았습니다.
❌ Before page |
이런 사이트를 어디서 본 적이 있는 것 같습니다.
페이스북을 하다가 어떤 페이지에 유익한 정보, 재미난 글이 있는 링크를 눌렀을 때, 이런 홍보사이트가 나왔던 것 같습니다.
만약 이 말에 동감하신다면 아실 것입니다. 이런 페이지 레이아웃 구성은 바로 이탈을 부른다는 것을 말이죠
신뢰를 주어야하는 매칭카 특성상 절대로 홍보, 광고 느낌이 나는 홈페이지를 가져서는 안됩니다.
이에 아몽소프트웨어는 다음과 같이 리뉴얼하였습니다.
✅ After page |
1. 고객의 상상을 자극하는 배경사진
리스를 완료시켜 자신만의 차를 운전하는 모습을 상상하도록 만드는 사진을 배경으로 사용하였습니다.
2. 고객의 고민을 생각하는 문장(카피라이팅)
그동안 신차리스를 하면 생각했던 고민들을 긁어주는 문장을 홈페이지에 배치해 고객을 공감해주어 홈페이지 이탈을 막아주었습니다.
3. 고객에게 신뢰를 주는 매칭카 수치
고객이 한눈에 알아볼 수 있는 수치들을 사용해 신뢰성을 확보해 매칭카의 전문성을 돋보이게 해 매칭카를 알아보고싶게끔 만들었습니다.
히어로페이지에서 가장 중요한 것은 고객이 우리 서비스를 궁금하게끔 만드는 것입니다.
아무리 가격이 싸고 좋은 제품이 있어도 고객이 관심이 없다면 그 제품은 영원히 팔리지 않기 때문입니다.
4. 고객에게 신뢰를 줄 수 있는 기업
이처럼 히어로페이지에서 신뢰와 믿음을 주어 서비스를 궁금하게 만들어 아래로 스크롤을 내리게하면 대성공인데요.
다음으로 와야 할 페이지는 매칭카의 서비스가 어떻게 진행되는지에 대한 상품소개 페이지 입니다.
3. 상품소개 섹션
❌ Before page |
기존 상품소개 섹션의 경우 홈페이지의 컨셉에 맞지 않는 4단그리드와 부적절한 아이콘을 사용하여 매칭카의 전문성을 떨어트렸습니다.
또한 전혀 와닿지 않는 문장을 사용하여 고객을 공감해주는 것이 사실상 불가능하였습니다.
현시대에서 고객을 공감하지 못한다는 것은 구매가 일어나지 않는다는 것입니다.
아몽소프트웨어는 상품소개페이지를 다음과 같이 리뉴얼했습니다.
✅ Afterpage |
마우스를 위로 올리면 아이콘이 올라가게 만드는 마이크로 인터렉션을 넣어 홈페이지가 살아숨쉬게 만들었습니다.
이런 인터렉션을 이용하면 다소 지루한 홈페이지에 생동감을 넣어 고객이 이탈하는 행위를 막을 수 있게 됩니다.
![](https://postfiles.pstatic.net/MjAyMTA1MDNfMjA1/MDAxNjIwMDI0NjMyODAz.54LM6bD0luNP9HglngEqfIamwae6MLQ2zj1DkpDMk40g.JogWuZ5Z_xdpfHnNOaSqRsdXtiapmvJqm98n5VHR0JAg.PNG.among_software/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2021-05-03_%EC%98%A4%ED%9B%84_3.40.59.png?type=w580)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2021/05/04143101/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2021-05-03_%EC%98%A4%ED%9B%84_3.40.59.png)
또한 아이콘과 브랜드 컬러인 파란색을 이용해 깔끔하고 매칭카의 서비스가 어떻게 진행되는지 눈에 한번에 들어오게끔 디자인하였습니다.
이는 불필요한 정보를 제공하고 고객님에게 필요한 정보만 주어 역시 이탈을 막는 효과를 가졌습니다.
4. 후기 섹션
후기섹션에는 신뢰를 주는 서비스에서 가장 중요한 페이지로 실제 고객님들의 후기를 본 후 서비스를 구매하는 고객님이 많기 때문입니다.
정보과잉의 시대로 이제는 소비자는 매우 똑똑해졌으며 허위과장인지 아닌지를 구별할 수 있는 눈을 가지게 되었습니다.
그렇기때문에 그들이 만족할 수 있는 사회적근거인 후기페이지를 신뢰있게 만들어야 했습니다.
기존 후기섹션은 다음과 같았습니다.
❌ Before page |
![](https://postfiles.pstatic.net/MjAyMTA1MDNfMTky/MDAxNjIwMDI1MDc4ODg1.FOv_kC351KqToZtqht67Tt9xYB170Q8sR1xmuJhIAQgg.0gpep5O6B8ZSqvXaOtdQZWgGqpj1RCMfNnKcDPVhUnAg.PNG.among_software/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2021-05-03_%EC%98%A4%ED%9B%84_3.57.55.png?type=w580)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2021/05/04143109/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2021-05-03_%EC%98%A4%ED%9B%84_3.57.55.png)
불필요한 여백공간은 의도가 무엇인지 전혀 모르는 디자인이었습니다.
디자인에는 반드시 이유가 있어야하며 이유가 없는 디자인은 그저 예술일뿐입니다.
홈페이지 디자인 즉, 웹디자인에서는 반드시 어떤 의도가 담겨있는 디자인을 구성해야 합니다.
이유있는 디자인이 곧 우리 상품/서비스에 구매로 이어지기 때문입니다.
아몽소프트웨어는 다음과 같이 후기페이지를 구성하였습니다.
✅ After page |
![](https://postfiles.pstatic.net/MjAyMTA1MDNfNDgg/MDAxNjIwMDI0NjU2NDkz.6-W_DYejmLc6XjS7dL9EoQB0VfNzc6h24hafEmZSzekg.55d8tcJJ1dsI54LNs13-NLPIfURJY-96FHklJXDFiusg.GIF.among_software/ezgif.com-gif-maker_(13).gif?type=w580)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2021/05/04143119/ezgif.com-gif-maker_13-1.gif)
실제 고객님들의 정보와 후기, 별점을 보여드려 가짜 후기는 전혀 사용없게끔 만들었습니다.
이는 역시 신뢰성을 보여주어 매칭카를 믿고 신차리스 서비스를 이용하게끔 디자인하였습니다.
6. 문의 섹션
❌ Before page |
보험창과 같이 매우 딱딱한 문의창은 문의를 하기에 매우 무거운 액션이었습니다.
그렇기에 문의가 들어올 수 없고 문의가 없기에 상품을 팔 수 없었습니다.
이에 아몽소프트웨어는 문의창을 다음과 같이 개선하였습니다.
✅ After page |
견적과 같은 상당히 무거운 액션을 다소 가볍게 만들어 누구나 쉽게 견적에 대한 컨설팅을 받을 수 있게 만들었습니다.
가볍게 액션을 만든다는 것을 이해를 잘 못할 수 있기에 간단한 예시를 들어드리겠습니다.
똑같은 구매전환율을 가진 2개의 기업 A,B가 있을 때 기업 A는 상담문의, 유료상담과 같은 액션이 일어나기 무거운 문의창을 가지고 있었습니다.
(구매전환율이란 문의에서 구매로 이어지는 확률을 일컫습니다.)
반면에 기업B는 간단한 컨설팅 받기, 무료로 자동차 시세 알아보기 와 같은 액션이 일어나기 가벼운 문의창을 가지고 있었습니다.
당연히 기업B가 문의가 더 많이 들어올 것이며 같은 구매전환율을 가질 때 기업B가 훨씬 더 많은 상품을 팔 수 있게 됩니다.
기업A |
기업B |
|
문의 -> 구매 전환율 |
1% |
1% |
문의수 |
100 |
1000 |
구매 전환수 |
1 |
10 |
이처럼 홈페이지 문의창을 가볍게 만들어 구매전환수를 올리는 효과를 갖게끔 홈페이지를 설계 및 디자인하였습니다.
지금까지 렌트카 홈페이지 매칭카의 제작사례를 함께 알아보았습니다
글을 마치기 전 이 글을 읽고 있는 대표님께 한마디만 건네고 싶습니다.
수많은 대표님께서 리뉴얼을 해달라는 말을 전해들으면 가슴이 너무 미어집니다.
처음부터 잘 만들었으면 처음부터 좋은 홈페이지 제작업체를 만났으면 리뉴얼을 하지 않았을 텐데… 아까운 돈을 사용하지 않았을텐데…
세상에는 정말 많은 홈페이지 제작업체가 있습니다.
하지만 그런 많은 홈페이지제작업체가 따라하는 홈페이지제작업체는 그들의 눈에서도 다르게 보일 것입니다.
저 홈페이지 제작업체는 무조건 따라해야겠다.
법인설립이후 단, 4개월만에 벤처기업을 받은 이유를 대표님의 프로젝트에서 보여드리겠습니다.
긴 글 읽어주셔서 감사드리고 현명한 대표님의 문의 기다리도록 하겠습니다.