tonik 如何重新設計 Voucherify 的網站？

快速成長是每個快速成長的初創公司的詛咒和祝福。 當新功能定期推出且目標市場發生變化時，前一年發布的網站可能已經過時。

這是一個很好的跡象，但是當您的訪問者看不到您在做什麼時，它同樣令人討厭。 如果您不更新您的網站，他們會根據過時的宣傳來判斷您。

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 發送的每週會議和每日總結以及跟踪圖表給了我一個非常清晰的工作進度圖和項目的預計時間表。我非常感謝他們團隊的透明性、清晰性和開放性。我們對網站的最終設計非常滿意。設計系統已經幫助我們將幾個新的登錄頁面放在一起，並創建了近百個促銷模型。即使對於非開發人員來說，它也非常易於使用。” – Voucherify 產品營銷經理 Katarzyna Banasik。

下一步是什麼？

一次成功的發布之後，我們開始與 Voucherify 建立合作夥伴關係，幫助他們和他們的客戶進行所有數字設計，專注於產品和品牌。 閱讀完整的公告以了解更多信息。