2022.02.04 デザインとエンジニアリングのシナジーでUX向上

PROFILE

小林肇

2003年にラクス入社。「配配メール」「クルメル」の開発に携わり、その後UIデザイナーのチームを立ち上げる。
現在はUIデザイナーとフロントエンドエンジニアから成るUI開発課のマネージャー

UIデザイナーとフロントエンドエンジニアによる横断チーム

UI開発課の役割や体制について教えてください。

UI開発課はラクスのプロダクトのUI/UXに横断的に関わっています。UIデザイナーとフロントエンドエンジニアが所属しており、UIデザイナーの設計したUIを意図通りスピーディにフロントエンドエンジニアが実装できる体制になっています。

この1年間で体制を大幅に強化し、昨年度3月時点では10人でしたが、今は21人まで増えました。
UIデザイナーは6名おり、楽楽勤怠、楽楽明細、楽楽労務、配配メール、チャットディーラーを担当しています。
フロントエンドエンジニアは14名で、楽楽勤怠担当が9名、楽楽明細担当が2名、メールディーラー、チャットディーラー、配配メールは各1名が担当しています。

各チームのミッションとビジョンについても教えていただけますか？

UIデザイナーチームのミッションは「プロダクト開発の中心になり、顧客の課題を解決する優れたUXを生み出す」です。
良いUI/UXの前提となる顧客・競合などの業界理解、顧客の業務理解、要件定義力などを磨くほか、ラクスが提供するプロダクトのデザインルール作りなどにも取り組んでいます。

UIデザイナー　

Mission「プロダクト開発の中心となり、顧客課題を解決する優れたUXを生み出す」

・顧客の課題を深く理解し、痛みを取り除く方法を考える

・プロダクト開発のハブとして要望や課題をとりまとめることで、最適解を導き出す

・操作に違和感がない、安心できるデザインの品質でラクスのプロダクトへ信頼感を高める

・働くのが楽しくなる/課題だけでなくポジティブな行動を奨励するようなデザインをつくる

Vision「日本を代表するBtoB SaaSの優れたUXを生み出すプロフェッショナルチーム」

・プロダクト開発の中心として要件定義や機能選定まで関わっている

・優れたUIが顧客の痛みを解決している

・社外から優れたUIチームとして認知されている

フロントエンドエンジニアチームのミッションは「デザイナーとバックエンドをフロントエンドの技術でつなぎ快適なUXを実現する」です。
モダンなフロントエンド技術を活用した開発を取り込んでいくのはもちろん、過去に導入した技術を活かしつつ生産性向上へ向けたリファクタリングにも取り組んでいます。

フロントエンドエンジニア　

Mission「デザイナーとバックエンドをフロントエンドの技術でつなぎ快適なUXを実現する」

・バックエンドの実現性を理解したうえでデザイナーの要望するUXを実現する

・フロントエンドの技術力を高め、UIの実現性を高める

・柔軟性の高いソースコードを実装し、プロダクトの進化・成長を高速化する

Vision「BtoB SaaS業界のフロントエンド技術を牽引するスペシャリスト集団」

・すべてのサービスで顧客が使いやすい高品質なUXを実現している

・フロントエンドの技術力の高さが同業他社に注目にされている

・優秀なフロントエンドエンジニアを育成しチームを拡大している

UIデザイナーによるUIライブラリの整備と、フロントエンドエンジニアによるコンポーネント実装でUIの品質と生産性を高めていきたいと考えています。

上流工程の対応力とチーム強化に取り組んだ1年間

2020年11月に、UI開発課の課題意識について記事を書かれています。UIデザイナーが要件定義に深く関わっていくことと、フロントエンド開発の体制強化、専門性発揮がテーマだったと思いますが、1年間にどんな変化があったでしょうか？

プロダクト開発の中心になるデザイン組織への再編
https://note.com/uidesign3923/n/nd7585de67daf/

UIデザイナーチームでは、顧客業務やプロダクト仕様などの勉強会を通じて、上流工程に関わり要件定義を担当するための取り組みを強化してきました。

顧客要望を読み解いたり、既存仕様の理解を深めることで、要件定義にも少しずつ参加できるようになってきたと思います。さらに標準UIライブラリを作り、最新プロダクトの楽楽電子保存でも活用するなど、仕組み化も徐々に進めています。

通常お客様からのご要望はビジネスサイドのカスタマーサクセスチームがコミュニケーションを行っているのですが、今後は直接UIデザイナーがユーザーインタビューを行い、業務上の困りごとのヒアリングなどにも取り組んでいきたいと考えています。

最近では勉強会や情報共有が活発になるにつれて、メンバー同士で相談しやすくなったという声も聞かれるようになりました。

勉強会があると、別のプロダクトを担当していても一つのデザインチームとして情報交換ができるのがいいですね！フロントエンドチームについてはいかがでしょうか。

フロントエンドチームも積極的に体制増強を行い、若手からベテランまでバランスの良いチームとなりました。

最近SPAアーキテクチャで開発した楽楽勤怠というプロダクトがありますが、チームを増強したことで開発の安定性が増し、アーキテクチャ改善にも主体的に関わることができました。ゼロイチフェーズを立ち上げるためスピード重視で開発しましたが、ソースコードの品質向上に手を付け始めています。定期的な振り返りを行うことで、開発フローの見直しも進み、開発がスムーズになってきています。

運営期間が長いプロダクトについても、フロントエンドのリファクタリングに着手できるようになりました。サービス稼働中ということもあり、アーキテクチャレベルでの作り変えまでは行わないのですが、Vue.jsやReactをはじめとしたフレームワークの機能を十分生かせるようなコードへの改善を行っていきます。

フロントエンドチームでも人材育成のノウハウが徐々に構築されてきました。学習サイクルを回しながらチームでできることを増やしていきたいですね。

ラクスでは10以上のBtoB SaaSプロダクトを開発していますが、これらのUI/UXに関わる面白さはどこにあると思いますか？

BtoB領域だからこそ、良いUI/UXによってユーザーの満足度を大きくアップさせることができると考えています。

ラクスが効率化しようとする企業の業務フローには煩雑なものが多いです。これをシステム化する際には、システム都合で作られたUIではなく、ユーザー目線をしっかり取り込むことが必要です。顧客がほんとうにやりたかったことを、あれこれ動線を意識せずに完了できる。認知の負荷を高めないことで楽に操作が完結できて、利用者の満足度を高める。これがラクスでのUI/UXの面白さだと思います。

今後の展望を教えてください。

UIデザイナーチームでは引き続き顧客の業務理解を強化し、要件定義力を高めていきたいと考えています。またフロントエンド開発の面では、ラクスのプロダクト開発は長い歴史があり、環境はレガシーから最新のものまでさまざまです。幅広い知識と高い技術を磨き開発速度を高め、ラクスのフロントエンド開発を引っ張っていきたいですね。