tonik은 Voucherify의 웹사이트를 어떻게 재설계했습니까?

빠르게 성장하는 것은 모든 빠르게 성장하는 스타트업의 저주이자 축복입니다. 새로운 기능이 정기적으로 출시되고 대상 시장이 변경되면 불과 1년 전에 출시된 웹 사이트가 이미 구식일 수 있습니다.

이것은 훌륭한 표시이지만 방문자가 귀하가 무엇을 하고 있는지 볼 수 없을 때도 똑같이 짜증이 납니다. 웹사이트를 업데이트하지 않으면 오래된 프레젠테이션을 기반으로 사용자를 판단합니다.

2021년 초, Voucherify는 비슷한 문제를 다루고 있었습니다. 웹 사이트는 제품을 잘 설명하지 않았고, 애니메이션은 매우 추상적이며 제품과 관련이 없었으며, 스타일과 브랜딩은 도달하려는 기업, 기술에 정통한 유형의 고객에게 어필하지 못했습니다. 파스텔 색상, 추상적인 삽화, 만화 같은 광부 캐릭터는 양복을 입은 사람들을 웃게 만들기에 충분하지 않았습니다.

둘째, 웹 사이트는 신중하게 구축된 것보다 함께 해킹된 느낌이었습니다. 사소한 불일치, 의심스러운 상호 작용 및 전반적인 흐름의 부족은 개별적으로 검토했을 때 큰 문제처럼 보이지 않았지만 함께 살펴보면 좋지 않은 첫인상을 남겼습니다.

도전

Voucherify는 웹사이트를 재설계하여 대상 그룹과 소통할 수 있도록 돕고 팀이 더 많은 랜딩 페이지를 직접 시작할 수 있도록 디자인 시스템을 구축하도록 지원했습니다. 하지만 잠깐, 우리 는 누구인가?

디지털 디자인 스튜디오 tonik입니다. 대부분의 경우 우리는 초기 단계의 신생 기업과 협력하여 MVP를 출시하도록 돕지만, 그렇다고 해서 더 잘 알려진 회사와 협력하지 않는 것은 아닙니다. Segment, Auth0 또는 Chronosphere와 같은 클라이언트는 기존 팀에 통합할 수 있는 우리의 능력을 확인합니다.

이 프로젝트를 위해 우리는 두 명의 디자이너 Mikolaj Biernat & Mikolaj Szymkowiak과 프로젝트 관리자로 작업을 관리한 Aga Kaczmarek의 힘을 합쳤습니다. 두 팀의 애자일에 대한 건전한 애정으로 우리는 어려운 마감일을 정하지 않았지만 몇 달 안에 프로젝트를 끝내고 싶었습니다. 그래서, 우리는 어디에서 시작했습니까?

디자인 프로세스

더러워지기 전에 목표를 달성하기 위해 사용할 디자인 방법을 정의하기 위해 디자인 프로세스를 간략하게 설명했습니다. 또한 프로젝트의 타임라인, 반복 횟수 및 각 단계에서 클라이언트로부터 필요한 피드백의 양을 추정하는 데 도움이 되었습니다. 여기 우리가 생각해낸 것이 있습니다.

정보 아키텍처 만들기

우리는 정보 아키텍처(IA)를 만드는 것으로 시작했습니다. 탐색을 쉽게 그릴 수 있도록 모든 하위 페이지(때로는 그 콘텐츠도 포함) 간의 관계를 보여주는 다이어그램입니다. 웹사이트 재설계 작업을 할 때 IA를 사용하여 콘텐츠를 이해하고 프로젝트 범위를 시각화합니다.

올바른 분위기 설정

클라이언트는 종종 새로운 웹사이트가 어떻게 생겼으면 하는지에 대한 비전을 가지고 있습니다. 배치하기에 가장 좋은 시기는 프로젝트의 무드보드를 만들 때입니다. 우리가 찾고 있는 모양과 느낌을 정렬하는 데 사용하는 시각적 참조 모음입니다. 가장 좋은 점은 올바른 형용사를 찾는 데 시간을 낭비하지 않는다는 것입니다. 벤치마크의 스크린샷은 수천 배 더 잘 작동합니다.

청사진

순수한 시각적 재설계 외에도 Voucherify의 팀은 주요 페이지의 콘텐츠를 업데이트하기를 원했습니다. 웹사이트에서 말하는 내용은 웹사이트가 표시되는 방식보다 훨씬 더 중요합니다. 그렇기 때문에 콘텐츠에 적합한 레이아웃을 찾기 위해 먼저 와이어프레임으로 작업했습니다. 웹사이트의 청사진이라고 생각할 수 있습니다. 색상, 그래픽 또는 기타 시각 효과를 사용하지 않으므로 기본 사항에 더 쉽게 집중할 수 있습니다.

빠른 보조 공연 – 로고 업그레이드

올바른 색상과 글꼴로 와이어프레임을 반복하기 시작했을 때, 우리는 브랜드로서 Voucherify가 빠르게 승리할 수 있는 기회를 발견했습니다. 그들의 로고, 정확히는 타이포그래피가 불균형하게 느껴졌습니다. 전체 브랜딩을 재발명하지 않고 가독성을 향상시키기 위해 약간 수정했습니다.

전체 그림 – 최종 디자인

마지막으로, 이전에 수행한 모든 평가 덕분에 모든 것이 하나로 통합되었습니다. Voucherify의 웹사이트는 새로운 시각적 언어로 재설계되었습니다. 닫힌 문 뒤에서 최종 디자인을 작업하는 대신 디자인을 완료할 때 각 하위 페이지를 반복적으로 제공했던 Voucherify의 Webflow 개발자 Piotr과 긴밀하게 협력했다는 점을 언급할 가치가 있습니다. 이렇게 하면 사일로에서 작업하는 것과 비교하여 도중에 발생한 모든 문제에 대응하고 프로젝트를 더 빨리 시작할 수 있습니다.

레고 만들기 – 디자인 시스템 준비하기

재설계와 병행하여 우리는 웹사이트를 구동하는 디자인 시스템을 작업하고 있었습니다. 결과물에는 Voucherify 마케팅 팀의 모든 직원이 랜딩 페이지를 디자인(준비된 구성 요소에서 빌드)할 수 있도록 구성 요소 및 사용 방법에 대한 지침이 포함되어 있습니다. 스타트업 현실에서는 일이 빠르게 진행되고 계획을 빠르고 효율적으로 실행할 수 있는 도구가 필요합니다. 설계 시스템도 이에 따라야 했습니다.

색상, 글꼴 및 그림자에 대한 정보가 포함된 소박한 토큰부터 전체 섹션에 이르기까지 각 디자인 요소는 다양한 콘텐츠로 확장할 수 있도록 신중하게 설계되었습니다. 우리가 가장 좋아하는 디자인 도구인 Figma 덕분에(적어도 작성 당시에는) 모든 요소를 ​​손쉽게 끌어다 놓기로 사용할 수 있습니다.

프로젝트의 결과물

우리는 무엇으로 끝났습니까?

Webflow 기반 웹사이트

물론 우리가 웹사이트를 직접 개발한 것은 아닙니다. Voucherify 의 프론트엔드 개발자인 Piotr Gacek이 개발했습니다. 결국, 웹사이트는 인터넷에서 정적인 이미지가 아니라 인터랙티브한 부분입니다. Webflow 덕분에 Voucherify 팀은 즉시 구축할 수 있었습니다.

디자인 시스템

우리가 만든 디자인 시스템은 아이디어 프로세스의 속도를 높이는 데 사용한 디자인 라이브러리가 아닙니다. 팀 간의 일관성을 보장하기 위해 Piotr은 Webflow에서 구성 요소를 복제했습니다. 이러한 방식으로 Voucherify는 향후 더 많은 방문 페이지를 원활하게 구축할 수 있습니다. ‍

마케팅 자산

다양한 상황에서 작동할 수 있도록 일러스트레이션이나 아이콘과 같은 시각적 요소에 더욱 중점을 둡니다. 이렇게 하면 새로운 시각적 언어가 웹사이트에만 존재하지 않습니다. 전자책과 같은 다른 마케팅 자산은 동일한 디자인 라이브러리에서 핵심 요소를 가져옵니다.

"저는 이 재설계를 위한 Voucherify 측의 프로젝트 관리자였습니다. 저는 우리의 디자인 에이전시인 tonik과 함께 일하는 것이 정말 즐거웠습니다. 그들은 민첩하고 반복적인 방식으로 일해 왔으며 디자인의 모든 단계에서 칩을 추가하여 협업의 효율성. 그들은 항상 비판에 열려 있었고 우리가 요청한 만큼 여러 번 디자인의 새 버전을 준비했습니다. 일반적으로 연락이 가능하고 빠르게 응답했습니다. 주간 회의 및 일일 요약은 Slack을 통해 전송되고 추적 차트 작업 진행 상황에 대한 매우 명확한 그림과 프로젝트의 예상 일정을 제공했습니다. 팀의 투명성, 명확성 및 개방성에 정말 감사합니다. 웹사이트의 최종 디자인에 매우 만족합니다. 디자인 시스템은 이미 도움이 되었습니다. 우리는 몇 개의 새로운 랜딩 페이지를 조합하고 거의 100개의 프로모션 목업을 만듭니다. 비개발자도 사용하기 정말 쉽습니다." – Katarzyna Banasik, Voucherify의 제품 마케팅 관리자.

무엇 향후 계획?

한 번의 성공적인 출시 이후에 우리는 Voucherify와 파트너십을 시작하여 제품과 브랜딩에 중점을 둔 모든 디지털 디자인으로 고객과 고객을 지원했습니다. 자세한 내용은 전체 발표를 읽어보세요.