tonikはVoucherifyのウェブサイトをどのように再設計しましたか？

公開: 2022-04-18

急成長することは、急成長するすべてのスタートアップの呪いと祝福です。新機能が定期的にリリースされ、ターゲット市場が変化する場合、ちょうど1年前にリリースされたWebサイトはすでに古くなっている可能性があります。

これは素晴らしい兆候ですが、訪問者があなたが何をしているのかを見ることができない場合も同様に迷惑です。あなたがあなたのウェブサイトを更新しないならば、彼らは時代遅れのピッチに基づいてあなたを判断します。

2021年の初め、Voucherifyは同様の問題に取り組んでいました。ウェブサイトは製品をうまく説明していませんでした、アニメーションは非常に抽象的で製品とは関係がなく、スタイルとブランディングは彼らが到達しようとしている企業の技術に精通したタイプのクライアントにアピールしませんでした。パステルカラー、抽象的なイラスト、そして鉱夫の漫画のようなキャラクターは、スーツを着た人々を笑わせるのに十分ではありませんでした。

第二に、ウェブサイトは慎重に構築されたのではなく、一緒にハッキングされたと感じました。マイナーな不整合、疑わしい相互作用、および全体的なフローの欠如は、個別に調べた場合、大したことではないように見えましたが、一緒にすると、第一印象が悪くなりました。

チャレンジ

Voucherifyは、彼らがWebサイトを再設計するのを支援するために私たちに連絡しました。つまり、ターゲットグループに話しかけ、設計システムを作成して、チームがより多くのランディングページを立ち上げることができるようにします。しかし、待ってください、私たちは誰ですか？

私たちはデジタルデザインスタジオのtonikです。ほとんどの場合、私たちは初期段階のスタートアップと協力してMVPの立ち上げを支援していますが、それは私たちがより確立された企業と協力しないという意味ではありません。 Segment、Auth0、Chronosphereなどのクライアントは、既存のチームに溶け込む能力を確認しています。

このプロジェクトでは、MikolajBiernatとMikolajSzymkowiakの2人のデザイナーと、プロジェクトマネージャーとして作業を管理したAgaKaczmarekの力を合わせました。両方のチームからのアジャイルへの健全な愛情で、私たちは厳しい期限を設定しませんでしたが、数か月でプロジェクトをまとめたいと思いました。では、どこから始めたのでしょうか。

設計プロセス

手を汚す前に、目標を達成するために使用する設計方法を定義するための設計プロセスの概要を説明しました。また、プロジェクトのタイムライン、反復回数、および各段階でクライアントから必要となるフィードバックの量を見積もるのにも役立ちました。これが私たちが思いついたものです。

情報アーキテクチャの作成

私たちは情報アーキテクチャ（IA）を作成することから始めました。これは、すべてのサブページ（および場合によってはそれらのコンテンツも）間の関係を示す図であり、ナビゲーションを簡単に描写できます。 Webサイトの再設計に取り組むときは、IAを使用してその内容を理解し、プロジェクトの範囲を視覚化します。

正しい気分を設定する

クライアントは多くの場合、新しいWebサイトをどのように見せたいかというビジョンを持っています。レイアウトするのに最適なタイミングは、プロジェクトのムードボードを作成するときです。これは、私たちが探しているルックアンドフィールに合わせるために使用する視覚的な参照のコレクションです。それについての最もよいことは、適切な形容詞を探すのに時間を無駄にしないことです–ベンチマークのスクリーンショットは何千倍もうまく機能します。

青写真

純粋に視覚的な再設計に加えて、Voucherifyのチームは主要なページのコンテンツを更新したいと考えていました。あなたがあなたのウェブサイトで言うことはそれが提示される方法よりはるかに重要です。そのため、最初にワイヤーフレームを使用して、コンテンツの適切なレイアウトを見つけました。あなたはそれらをウェブサイトの青写真と見なすことができます。色、グラフィック、その他の視覚効果を使用しないため、基本に集中するのが簡単です。

クイックサイドギグ–ロゴのアップグレード

適切な色とフォントでワイヤーフレームを繰り返し始めたとき、ブランドとしてのVoucherifyがすぐに勝つチャンスを見つけました。彼らのロゴ-正確にはそのタイポグラフィ-は不均衡に感じました。ブランド全体を作り直すことなく読みやすさを向上させるために、少し調整しました。

全体像–最終的なデザイン

最後に、以前に行ったすべての評価のおかげで、すべてが一緒になりました。 Voucherifyのウェブサイトは新しい視覚言語で再設計されました。密室で最終的なデザインに取り組む代わりに、VoucherifyのWebflow開発者であるPiotrと緊密に協力して、各サブページを繰り返し配信し、デザインを完成させました。このようにして、サイロで作業する場合と比較して、途中で遭遇した問題に対応し、プロジェクトをより迅速に立ち上げることができました。

レゴの構築–設計システムの準備

再設計と並行して、ウェブサイトを強化する設計システムに取り組んでいました。成果物には、Voucherifyのマーケティングチームの誰もがランディングページを設計（準備が整ったコンポーネントから構築）できるように、一連のビルディングブロックとそれらの使用方法に関するガイドラインが含まれていました。スタートアップの現実では、物事は速く進み、計画を迅速かつ効率的に実行するためのツールが必要です。設計システムはそれに沿ったものでなければなりませんでした。

色、フォント、シャドウに関する情報を含む控えめなトークンからセクション全体まで、各デザイン要素は、さまざまなコンテンツに拡張できるように慎重に設計されています。私たちのお気に入りのデザインツールであるFigmaのパワーのおかげで（少なくとも執筆時点では）、すべての要素を簡単にドラッグアンドドロップで利用できます。

プロジェクトの成果物

何になってしまったのですか？

Webflowを利用したWebサイト

もちろん、私たちは自分たちでWebサイトを開発しませんでした–それはVoucherifyのフロントエンド開発者であるPiotr Gacekによって行われました（素晴らしい仕事です！）–しかし、私たちのコラボレーションの成果としてデザインファイルをリストするのは公平ではありません。結局のところ、Webサイトはインターネット上のインタラクティブな部分であり、静止画像ではありません。 Webflowのおかげで、Voucherifyチームはすぐにそれを構築することができました。

設計システム

私たちが作成した設計システムは、構想プロセスをスピードアップするために使用した単なる設計ライブラリではありません。チーム間の一貫性を確保するために、PiotrはWebflowでコンポーネントを複製しました。このようにして、Voucherifyは、将来、より多くのランディングページをシームレスに構築できるようになります。 ‍

マーケティング資産

イラストやアイコンなどのビジュアルを特に重視して、さまざまなコンテキストで機能できるようにしています。このように、新しい視覚言語はWebサイトだけに存在するわけではありません。電子書籍などの他のマーケティング資産は、同じデザインライブラリから重要な要素を引き出します。

「私はこの再設計のVoucherify側のプロジェクトマネージャーでした。私はデザインエージェンシーとしてtonikと協力することを本当に楽しんでいます。彼らはアジャイルで反復的な方法で働き、デザインのすべての段階でチップインでき、コラボレーションの効率性。彼らは常に批判にさらされ、私たちが要求した回数だけ新しいバージョンの設計を準備しました。通常は到達可能であり、迅速に返信されました。毎週の会議と毎日の要約がSlackと追跡チャートに送信されました。作業の進捗状況とプロジェクトの予測されるタイムラインを非常に明確に把握できました。チームの透明性、明快さ、開放性に本当に感謝しています。ウェブサイトの最終的なデザインに非常に満足しています。デザインシステムはすでに役立っています。いくつかの新しいランディングページをまとめて、ほぼ100のプロモーションモックアップを作成しました。開発者でなくても非常に使いやすいです。」 – Voucherifyの製品マーケティングマネージャー、KatarzynaBanasik。

次は何ですか？

立ち上げが成功した後、Voucherifyとのパートナーシップを開始し、製品とブランディングに焦点を当てたすべてのデジタルデザインで彼らとその顧客を支援しました。詳細については、発表全体をお読みください。