サービスを止めることなく1年半のフロントエンドリニューアルをやりきった話
こんにちは。Linc’wellでエンジニアリングマネージャーをしている佐々木です。
最近のベストバイはUGREENの卓上急速充電器です。
Linc'wellでは、オンライン・オフラインで医療従事者・患者/ユーザーをつなぐヘルスケアプラットフォーム事業を主力としており、「オンライン診療システム提供サービス」「クリニックDX支援サービス」として、患者さんが容易に、そして体験よく診療を受けるための一連の機能をWEBとアプリで提供しています。例えば、オンライン診療の予約・問診・診察・決済や、対面でのクリニックの診察予約や診察・検査結果の確認等をすることができます。
これまで、患者さんにとってのより良い医療体験を目指し、新規機能追加や既存機能の改修をスピーディーに実現してきましたが、その裏では上記サービスのWebフロントエンドのリニューアルも並行して実施しており、2022年3月から2023年9月の1年半の期間を経てようやく完了しました。
この記事では、どのようにフロントエンドのリニューアルを行ったか、そしてどのような点に苦労したのかをご紹介します。
リニューアル前後でUIも大きく変わっています。以下はトップ画面の例です。
リニューアルの背景と進め方
元々、WebサービスはRuby on Railsを利用して構築しており、MVCパターンに準拠し、フロントエンドもRailsで作られていました。しかし、患者さんへの価値提供とビジネスのさらなる加速のためにも、ユーザー体験の良さとメンテナンス性の高さを追及する必要があり、Reactを利用したフロントエンドにリニューアルすることになりました。
リニューアル後の現在では、RailsはAPIサーバーやバッチ処理等のバックエンドのみで利用し、フロントエンドは別リポジトリでReactのプロジェクトを作り、その間のAPI通信はGraphQLで行うという構成になっています。
フロントエンドのリニューアルの進め方としては2点特徴があります。1点目が既存のReactプロジェクトを流用しているということ。2点目がカナリアリリースで段階的にリニューアル対象のユーザーを増やすという形をとったということです。
1点目については、Linc’wellが元々持っていたReactで構築されたLINEミニアプリ（LINEアプリ上でサービス提供する仕組み）を活用したというものです。Railsで構築されたものと比べて機能的に劣後があるものの、素早くリニューアルするためにこちらのアプリケーションを活用することにしました。
2点目については、カナリアリリースという形で患者さんへの提供価値が下がらないかを見極めながら、少しずつサービス公開の対象ユーザーを増やしていくという手法を取ったというものです。半年という時間を使ってリニューアル後のサービスを使うユーザーを5%、10%、30%、50%、100%と段階的に増やし、複数のKPIを計測し続けて問題を即座に検知・解消することができました。
ぶち当たった壁
大規模プロジェクトなのでいくつもの課題があったのですが、特に大きな課題だったのが機能・KPIの既存サービス劣後です。
機能が既存サービスに追いつかない
会社が早いスピードで事業成長しており、社内の誰もが患者さんやクリニックに対して価値を提供し続けたいと考えています。そのため、リニューアルを進めるとともに現行のWebサービスも並行開発し続ける必要があります。現行サービスが並行開発を続けた結果、リニューアルプロジェクト側も同様に開発する機能が増え続けてしまい、いつまで経ってもプロジェクトの終わりに近づかないという状態になってしまいました。
原因として、現行サービスチームやビジネスチームと「開発のスコープ」および「プロジェクト完了の定義」のすり合わせができていなかったことがあります。PdMとテックリードの間で、開発のスコープとプロジェクト完了の定義に対する責任が曖昧な状態でプロジェクトが進んでしまった結果、ステークホルダーと十分なコミュニケーションが取れていませんでした。
KPIが既存サービスに追いつかない
プロジェクトを仕切り直し、「開発のスコープ」および「プロジェクト完了の定義」をすることで既存サービスに機能が追いつき、ようやくカナリアリリースが始まり、リニューアル後の画面が患者さんに提供され始めました。
しかし、ここでモニタリングしていたKPIの一つである「診察予約後の決済率」が現行サービスに比べて大きく劣後するということが発生しました。エンジニアとPdMが焦りつつ調査を行い、効果がありそうな施策を実施してもなかなか数値が改善しないということが起き、プロジェクトメンバーのモチベーションが低下した時期もありました。
組織一体となり壁を乗り越えた
品質がなかなか上がらないことに苛立ちながらも、組織全体で愚直に改善をし続けました。中でも効果があったと思われるのは以下の3つです。
数値計測ツールの導入
KPI改善については、日頃から「計測を行って事実を収集し、仮説を立てて改善する」というフローがプロダクト開発組織に根付いていたため、一度冷静になり改めてひたむきに調査することで対処できたと感じています。
具体的に実施した課題の把握方法は以下の通りです。
アプリケーションから取得できるデータをSQLクライアントで可視化
各画面のCore Web Vitalsの計測
Sentryで収集したセッションリプレイの調査
Amplitudeでのセッションまたぎの行動ログの調査
診療予約のキャンセルしているセッションのリプレイデータや行動ログを全て確認し、ユーザーがキャンセルするに至った原因の仮説を立てるという非常に泥臭いことを行い、KPI低下の原因を一つずつ潰し込んでいきました。このようにプロジェクトの要所要所でKPI低下が確認された際に計測から原因解消を繰り返し実施していたため、当初は3ヶ月程度でカナリアリリースが完了する予定だったのが結果として6ヶ月かかってしまいましたが、KPIの計測により不具合を確実に検知し影響を最小限にしながらプロダクトの品質を高めるというやり方は非常に良い進め方だったと感じています。
繰り返したバグバッシュ
Linc’wellでは規模の大きい案件をリリースするときは、通常のテストプロセスとは別にチーム内でバグバッシュを行うことで、品質向上を図っています。
通常の案件だとバグバッシュをせいぜい1回で終わらせるのですが、リニューアルプロジェクトにおいては、修正範囲が膨大で影響が大きいこと、そして不具合時に損失を被ってしまう患者さんの数が非常に多いことから、開発に関わったメンバーだけでなくプロダクト開発チーム全体で計4回のバグバッシュを実施しました。
最初の1、2回は細かいUIの不具合とともにKPIの低下を及ぼすようなバグもいくつか出ましたが、3、4回目のバグバッシュでは軽微な不具合もかなり少なくなり、安心してリリースできる品質まで持っていくことができました。
他部署の巻き込み
Linc’wellにはプロダクトに関わるメンバーが多く、エンジニア、デザイナー、PdMなどはもちろん、事業部や医師の方もプロダクト作りに関わっています。
患者さんそして会社のためにやりたい施策がたくさんあるものの、リソースや施策のコンフリクトが原因でリニューアルプロジェクト完遂が遠のくシーンもありましたが、プロジェクトを完遂させるために他部署メンバーと調整し、多くの施策を一時的にストップしました。
多くの施策を止めるとはいえ会社として持続的に成長するために、リニューアルプロジェクトの進捗に影響ない形での機能開発や、開発以外の事業成長施策など、他部署メンバーにも工夫を凝らしていただき、会社全体で一丸となり、結果的にリニューアルプロジェクトの完遂につなげることができました。
リニューアル完遂直近の悲劇
カナリアリリース50%も安定稼働し、いよいよ全ての患者さんに対してリニューアル後のサイトを公開することになりました。
満を持してカナリアリリース100%に切り替えを行った約10時間後、メールアドレスでの新規ユーザー登録ができないという事象を検知し、1時間後にカナリアリリース0%の状態まで戻すこととなってしまいました。これは100%切り替え時に明確に顕在化する不具合で、50%で問題なかったから大丈夫という慢心によるものでした。
不足していた検証や類似調査を行い、2週間後に改めて100%切り替えを行いました。それでもやはり当日は障害が多く発生し、患者さんにご迷惑をかけることになってしまいましたが、チーム全体での素早い障害対応によりリニューアルを完遂することができました。
今後の展望
2023年10月にリニューアルプロジェクトが完了しました。
このリニューアルプロジェクトでは、事業スピードを維持しつつも現行Webサービスの並行開発のコストを最小化するべく、施策の速度を優先し、プロダクトの品質の優先度を相対的に下げて物事を進めてきました。
ただ、このリニューアルが完了した今、将来的に持続可能な形で事業・プロダクトを成長させるためにも、速さではなくプロダクトの品質向上を最優先としていく必要があります。
具体的なプロダクトの品質向上の施策として、以下のようなものに取り組み始めています。
SSR等を利用したパフォーマンスチューニング
アクセシビリティやUX向上のためのデザインシステムの構築
APIサーバーに対するモジュラーモノリスの思想の導入
終わりに
途中で紆余曲折あり反省も多かったですが、諦めずに課題に向かい続けることで、1年半という会社創業以来最長の開発プロジェクトのリリースを各種KPIを下げることなく完遂することができました。多くの方に動作確認に協力してもらったり一時的なKPI低下の原因を共に探ったりするなど、会社全体が一丸となることで達成できたプロジェクトであり、会社全体が同じ方向に向かって走っていることを感じることができました。
プロダクトとしては、フロントエンドの新たな土台が構築できたことで、これまで以上に患者さんに対しての価値提供と事業の成長が実現しやすくなると確信しています。
医療という社会貢献性の高い領域で事業成長させるプロダクト開発を行いたい方、是非ご応募お待ちしています！
\ Linc'wellはともに働く仲間を募集しています /
