ランサーズ(Lancers)エンジニアブログ > フロントエンド > フロントエンド定例 > 依頼体験改善プロジェクト フロントエンド定例 2022/12/2

依頼体験改善プロジェクト フロントエンド定例 2022/12/2

tanifumiya|2022年12月02日
フロントエンド

こんにちは、フロントエンドチームの 谷(@high_g_engineer)です。
今週のフロントエンド定例の内容を記載します。

フロントエンド定例について、以前の記事(ランサーズのフロントエンドチームが取り組んでいること)でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。

以下、今週の内容です。

 

依頼体験改善プロジェクト

ランサーズでは、クライアントがランサーに対して仕事を依頼する機能があり、古くから多くの方に利用されてきました。

この依頼機能に関して、色々な職種(全153カテゴリ)に対応する為に、各職種カテゴリに応じて個別最適された画面・入力項目が発生していたり、内部のデータ構造が入り組んでいたりといった感じで、ユーザ体験も開発体験も悪い状態になっているという問題が発生しています。

今、自分が所属しているチームでは、この問題を真摯に受け止め、なるべくシンプルな体験をユーザに提供し、なおかつ開発体験も上げていくといった改善プロジェクトを取り組んでいます。

現状の依頼フォームについて

現状、仕事を依頼する為の入力ページは、下記の様になっています。

上記を見ていただくと、

  • 入力項目が多い
  • 分かりにくいライティングが存在する
  • 独自の機能が存在する

等といった問題が存在し、おそらく初見の方には優しくない画面となっています。

作成中の依頼フォームについて

作成中の依頼フォームに関して、質問項目に対して配置するフォームを極力ひとつだけにし、初見で何を入力したら良いか?という迷いを少なくするというアプローチを取っています。
下記は実装途中のものです。

社内での成功例を元にした取り組み

実はこのフォームをシンプルにする取り組みは今回が初めてではなく、ランサーズでは既に実例があります。

そこでも同じ様に、元々の画面が複雑で使用している技術もモチベーションが上がらないものといった状況でした。

その時にフロントエンド目線で取り組んだことは、

  • CakePHP + js + sassで作成されていたフロントエンドをReactで作り変え
  • Recoil, react-hook-form, yupといった技術を採用
  • プロジェクトと並行してデザインシステムの作成
  • Storybook駆動で開発とレビューを高速化

また、プロジェクトの体制的にも下記のようになっており、

  • フロントエンドエンジニア 2名
  • バックエンドエンジニア 2名
  • テックリード兼PdM 1名
  • UXデザイナー 1名

新技術を盛り込めて、体制的にも潤沢で非常に恵まれたプロジェクトでした。

今回の依頼体験改善プロジェクトと以前のプロジェクトの差分

技術に関して、続けて利用できるものは以下になっています。

  • 前回のプロジェクトで採用した技術
  • デザインシステム
  • Storybook駆動

強くなってニューゲームですね!
ただし、今回のプロジェクトでは以下のような変更点があります。

  • formTypeというものを定義し、それに合わせたベースのフォーム画面を作成
  • 153カテゴリの職種に合わせた各種フォームの画面フローのデータ構造をAPI側で定義
  • APIから取得したデータ構造と各種ベースのフォーム画面を元に画面フローを生成

といった違いがあります。

また、体制は以下のようになっています。

  • フロントエンドエンジニア 1名
  • バックエンドエンジニア 1名
  • PdM 1名

デザイナーが居なかったり、エンジニアがミニマムな体制になっていたりする為、体制に関してはハードモードとなっています。

まとめ

今回は、取り組んでいるプロジェクトの紹介でした。
取り組んでいるプロジェクトは体制的にハードですが、メンバー間のコミュニケーションを密にし、本質的なユーザ体験と開発体験の向上を同時に行えているので、意識高く取り組めています。

依頼体験改善で取り組んでいる機能のリリース予定は最速で2023年1月末なので、お楽しみに!

 

ランサーズでは、フロントエンドエンジニアを随時募集しておりますので、まずはお話でもという方はご連絡くださいませ!

フロントエンドエンジニア(本社)の採用情報 | ランサーズ株式

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/?s=フロントエンド定例