M&A Matching Platform

UI Design
Design System
UX Design
Spec Definition

Overview

Client

M&A会社

Responsibility
  • 要件定義・システムの挙動やルールを含む仕様検討
  • UIデザイン
  • イラストレーションディレクション
  • Team

    PO、エンジニア4名、デザインリード、デザイナー1〜2名

    Tools

    Figma, Notion, Full Story, Confluence, Jira, Slack, Github

    Language(s)

    English, 日本語

    Product Description

    M&Aを希望する企業に向けたマッチングツールとそれに付随するシステムのデザイン・開発

    cover

    Note

    参画中に大規模な体制変更があったため、前半と後半では全く違ったチーム体制での参画となりました。 前半では途中から参画し、既存システムの追加機能や機能改善、それに付随する新規システムデザインを担当しました。CTO、エンジニア3名、デザインリード、デザイナーで構成された国際的なチームで英語及び完全アジャイル方式で開発・デザインを進めていました。
    後半では、既存システムをベースとした新規プロジェクトとして1からのデザインを担当しました。PO、マネージャー2名、デザイナー1名、開発チームで構成されたチームでデザインがある程度進んだところからアジャイルを採用した開発を進めました。

    Works

    UI Design

    前半の開発チームにはデザインリードを含めデザイナーが2~3名いたため、チームとして意見交換やアドバイスをもらいながらユーザーにとってより見やすくより使いやすいプロダクトという視点でデザインすることを心がけました。 画面設計に関するいくつかの例を挙げます。

    情報とその階層を意識した画面設計

    売り手情報を表示する画面において、企業に関する基本情報、企業紹介、詳細な企業情報...という形で情報に階層を持たせ、その階層を元に多くのユーザーにとって入ってきやすい内容とその表示箇所を検討しました。

    Information Hierarchy

    カードをクリックすると詳細画面に遷移しますが、カードデザインを保ったままで詳細を表示させることで情報のつながりを明確にする工夫をしました。

    使いやすさを意識した画面設計

    たくさんある売り手リストの中から自分が興味のある企業を見つけるという作業をよりスムーズにできるように細かい部分も意識したデザインの作成を心がけました。
    下の例はUI刷新において新デザインの検討材料としてユーザーの目の動きに注目したものです。 M&Aでは、同業種を探す、特定の異業種を探す、業種関係なく高売上好業績の企業を探す、など買い手によって様々な戦略を持って売り手を探します。そのため、どのような戦略を持ったユーザーでも目でスキャンしやすいリストの設計を試みました。

    Eye Tracking

    Request access to read more details

    Request Access