体験ドリブンでいること

この記事は、株式会社Bitkey Advent Calendar 2023 15日目の記事です。

2日前の12/13に以下の勉強会で登壇したので、LT内容を再編集しAdvent Calendarの記事として投稿いたします！

https://peer-quest.connpass.com/event/302605/

# Agenda
🎨 ️BitkeyのUI/UXチームについて
🤼‍♂️ UI/UX️チームの動き方
🪢 オーバラップについて
🌈 今後の展望

# 🎨 ️BitkeyのUI/UXチームについて
UI/UXチームは「Product Value Design」という組織の中の「Product Branding」という事業部に属してます。

![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/48b8a750-57e4-9508-051b-133196661682.png)

え？？Branding!!!!???って感じなんですが、UI/UX以外でもProductとのあらゆる接点の体験を良くしていきたい！風呂敷を広げるとBitkeyのブランディング全部！が守備範囲と思ってます。

チーム構成は私を入れて4人チーム。たまたまバッググランドが異なるメンバーで構成されていまます。例えば紫のメンバーはUI/UX以外にも動画 / 漫画 / クリエイティブ全般を守備範囲としてます。右下の青は私なのですが、テック系イベントの展示パネルや最近は採用活動をしてます。

![Untitled (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/42e8b012-df5e-b1b6-b03c-faca9ca8a2ef.png)

こんな感じでUI/UXを軸に置きながら、常にそこそこ越境しているかな？というチームです！

# 🤼‍♂️ UI/UX️チームの動き方
![Untitled (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/d18a2dc4-84be-2bed-5345-e862ea15c6c6.png)

### 基本的なUI/UXチームの動き方を紹介します！

![Untitled (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/4b9b1e61-d8bd-d71f-384e-70336df3b949.png)
1） ビジョンをPdMが描く（UI/UXが描く場合も!）
2） まず体験を考える、いったん理想値を描く
3） その体験と現在のプロダクトを照らし合わせながら、フロー図やWFを作る
4） あまりにも理想すぎる仕様 ／ 体験として死守したい をPdMと選定

:::note info
POINT：UIを作り切らない
ウォーターフォール開発ではないので、完璧なUIにしない
:::
------------------------------
![Untitled (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/735728c0-7b3b-5f70-d6eb-7a9101be45ce.png)
5） 柔らかい状態で開発チームに共有
6） 1stスコープで対応する体験・仕様を相談しながらすり合わせ
7） 開発中は常に伴走。実装工数に合わせ、UIやライティングを調整していく

:::note info
仕様変更を柔軟に再考
開発前に作りきらないことがここに活きてくる
:::
------------------------------
![Untitled (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/9331416b-1ef2-863d-f1bf-b8cedc9593e1.png)

8） 基本開発チームがQA起票を対応
9) 開発、PdM、UI/UX、敢えて役割を明確に決めてない／柔軟でいることで開発スピードを落とさない

:::note info
リリース ≒ デザインFIX
リリースのタイミングでデザインが完成と言っても過言ではない
:::
------------------------------
![Untitled (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/b5fc3739-e92c-8fae-de19-801165b08508.png)

:::note info
自分ごとでいられる結果、体験ドリブンで考えられる
:::

# 🪢 オーバーラップについて
さて今回の勉強会のテーマ「越境」について
ちょっと本筋とずれますが、UI/UXチームは「越境」して他の職種を「やりきる」というより、境目を「侵食する」方が多いかな？と思っており、ここからは「オーバーラップ」の文言を使用していきます。

常に他チームと連携をとりながら、オーバーラップをしながら活動しているUI/UXチームの3つケースを共有します！

## CASE1：[workhub Pass]予約体験の切り替え
<details><summary>workhub passとは</summary>
「働く空間」と「人」「仕事」をつなぎ、ワーカーにより自由な「働き方」を元に、様々な空間を法人・個人に提供するプラットフォームです。
</details>

:::note info
**to PdM**：仕様検討
:::

- Before：契約中の施設のスペースのみが予約できる
    - 例：スポーツジムと契約を締結し、月額でジムに通うようなイメージ
- After：契約してない施設のスペースを「都度利用」として予約できるようにする
- 通っている施設のスペースを予約する気持ちと、新しくスペースを探そうとする気持ちは違うはず！と仕様変更をUI/UXチーム主導で着地させた

![Untitled (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/11101c0b-15c8-9134-594b-fff32a4e1c4d.png)


## CASE2：[workhub cloud]CSVヘルプページ
<details><summary>workhubとは</summary>
人と仕事の間の分断を「つなげる」ことで解消するコネクトプラットフォームです。オフィスのスマートアクセス化や、無人受付、会議室予約、ホテリングなど、workhub一つで利便性の高いオフィスに必要なあらゆるシステムが丸ごと揃います。ビットキーの製品だけでなく、他社が提供する製品やサービスとの連携も可能なため、オフィスビルのスマートアクセス化においては、既存のビルセキュリティとの連携によって、ICカード、QRコード、顔認証など組み合わせた柔軟な認証方法に対応でき、workhubが導入されたオフィスではビルの入館から執務エリアや会議室への入室まで、スマートアクセス化を実現します。
</details>

:::note info
**to Engineer**：ユーザーテスト・フロント実装
:::


- CSVに表示されている項目説明と入力例が分かりにくい懸念があった
- 懸念を実証するため、業務でCSVを利用している社内の複数人に協力してもらいユーザーテストを実施
- テストでスムーズに作業が行えなかった項目にUXライティングの修正
- 入力時に分かりやすい説明文が提供でき、且つEngineerの工数削減のためフロント実装を行った

![Untitled (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/0bf16db1-9e59-3fd5-4ea2-e8f37d64ce45.png)

## CASE3：[homehub App]コンシェルジュ機能の施策
<details><summary>homehubとは</summary>
人それぞれ快適な暮らしを送るために、暮らしとサービス/モノの間に存在する分断を「つなげる」ことで解消するコネクトプラットフォームです。ビットキーが提供するサービスやモノに限らず、さまざまな製品、置き配・家事代行などのサービスなどとも連携し、シームレスな暮らしを実現します。
</details>

:::note info
**to User Success**：ヒアリング・データ分析
:::


- User SuccessとはtoC向けのサポートチーム
- 住居の管理資料のPDFをAIに読み込ませ、ユーザーがチャット機能で簡単＆スピーディーにヘルプを解決できるようにする施策
- 1stスコープとしてはチャット機能を追加するだけだった
- 単にチャットを入れるので体験あってる？を軸に検討
- 実際にユーザーからの問い合わせを対応しているUser Successにヒアリング＆問い合わせのデータベースを分析、洗い出し整理。チャット機能とFAQの違いなどをインプット
- 実際の問い合わせを元に体験設計が行え、かつネクストアクションを見据えたUIの提案できた

![Untitled (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/74e56abc-f5db-1f8b-7d9f-2a152c22fe2d.png)

## オーバーラップのまとめ
それぞれの体験・気持ちに寄り添うことで結果としてオーバーラップできています！
- to PdM：**仕様検討** → スペース検索時の気持ち
- to User Success：**ヒアリング・データ分析** → CSV入力時の気持ち
- User Success：**ヒアリング・データ分析** → 困ってる、問い合わせ時の気持ち

:::note info
「体験ドリブン」にブレずにいることで、オーバラップができている！
:::

# 🌈 今後の展望
![Untitled (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/7cd72322-1061-d826-0f58-fe617ceb6646.png)
出典:[The Product Management Triangle](https://productlogic.org/2014/06/22/the-product-management-triangle/) (by Dan Schmidt）
> プロダクトマネージャーはユーザー、デベロッパー、ビジネス、これらの領域を健全に機能させることが役割であり、機能がなければ自分で役割を演じたり、補う方法を見つけるべき
> 
The Product Management Triangleの図を引用し、今後はどの領域にオーバーラップする？を検討しました。

![Untitled (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/95b8bbf1-8c9b-e01b-f1f4-758ad69f27a3.png)

### 🎉直近のオーバーラップ予定
- マーケティングチームと連携し、PMF達成に向けて施策を協同していく！
- DataAnalyticsチームと連携し、データに根拠あるUX改善につなげていく！

　両チームともキックオフを実施済なので、あとは連携しながら活動していきます。

### 😣オーバーラップできてない…
- ビジネスサイドへの連携がなかなかできていない…
- 営業資料などにオーバーラップしたい！
- 顧客の最初のタッチポイントになる、将来の顧客に踏み込んでいきたい！

　小さく始めるで良いので「Branding事業部」として一歩ずつやっていきたいと思います。

:::note info
### どの領域にオーバラップする場合も「体験ドリブン」でいること！
![Untitled (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981976/711cc181-922c-636d-7093-286d4ed5e5f7.png)
:::

以上 「プロダクト開発におけるロールの越境とステークホルダーとの協働をするコツ」からの「体験ドリブンでいること」でした！

16日目の [株式会社ビットキー Advent Calendar 2023](https://qiita.com/advent-calendar/2023/bitkey) は  ****@10thoctober1010**** が担当します。