Ferheng.co

Background

Ferheng.coは10年以上運営しているクルド語学習者向けのオンライン辞書サービスです。 今回は機能改善・新規機能追加に合わせて全体的なデザインの刷新を検討しており、UIやブランディングを含めたデザイン作成の依頼をいただきました。

Process

1. Hearing

まずは今回のデザイン刷新に関する範囲や追加したい機能の確認とすり合わせを行いました。 すでに予算が決まっておりその予算の範囲内で行うためどこを優先するか、どんなデザインイメージにしたいかを含めて認識に相違がないように入念に打ち合わせをしました。

具体的な依頼内容

• 全体的なデザイン
  • プライマリーカラーの選定
  • ロゴなどのブランディングデザイン（可能であれば）
• ダーク/ライトモード
• メイン画面UI
  • コンポーネント
  • 簡易ガイドライン
• レスポンシブ
• 会員登録・ログイン

2. Branding Design

まずは全体的なデザインの方針を決めるため、ロゴ作成とプライマリーカラーの選定を行いました。 主なユーザーは学生や語学学習者であるため、明るくも子供っぽい印象にならないようなデザインを方針として設定しました。

ロゴ作成

• 辞書とサービス名の最初部分の「fe」を融合したロゴを提案
• ダーク/ライトモードの切替機能を追加するため、ダークモードでも視認性の高い色や形に変更
• ロゴとタイプグラフィーのバランスを変更し、よりサービス名が見やすいフォントとフォントサイズに変更
• シャドウ等は使わずに、フラットなイメージに変更

プライマリーカラー

これまでの利用者が慣れ親しんできた以前のプライマリーカラーと同系統のオレンジを採用しました。

3. Prototype & Trial Design

新しいロゴやプライマリーカラーの印象も合わせて確認いただくために、メイン画面のデザインから入りました。 大まかなワイヤーフレームを作成後、ライトモードの画面デザインを作成する過程でコンポーネントの作成やフォント、フォントサイズの選定などのデザインガイドの作成も合わせて行いました。

メイン画面が完成した時点で再度クライアントとイメージの確認やすり合わせを行いました。 細かな修正が完了し、デザインの方向性等の合意がとれたところでその他の画面のデザイン作成を行いました。

メイン画面のUI/UX改善に着手する際に意識したポイント

• ページを開いたときに検索バーが容易に見つけれられるような工夫
• ホーム画面で表示されている最近検索された単語が、一目で単語の区切りが分かりやすいように、またクリック可能なことを明確にするためにタグのようなデザインへの変更
• 検索結果部分をコンパクトかつ見やすいデザインに変更