CLINICS

事業の拡張性を踏まえたアプリのUIリニューアル

今回提案した「ビジョンプロトタイプ」は、プロダクトの拡張性の担保と価値に基づくユースケースの可視化・共通認識化という2つの価値発揮ができます。

今後も機能追加などが計画されるCLINICSアプリにおいて、理想を具体化し逆算するアプローチを組み合わせています。 既存のアプリから積み上げてきた要件と、「将来CLINICSはどんなアプリであるべきか」という未来像からバックキャストした要件とをすり合わせてUIリニューアルに結像させました。
不確実性が高い事業構想やロードマップが目で見て実際に操作できるプロトタイプに具体化されたことで、メドレー社内での議論のきっかけとなり、CLINICSアプリの提供価値・ターゲットがよりクリアに共通認識化されることにもつながりました。

一般的なアプリリニューアルにおいては、将来のサービスコンセプトを作ることはあっても、プロトタイプにまで具体化することは多くはありません。今回も意欲的な試みではありましたが、先の未来であればあるほど不確実性の高まるビジョンを今、解像度高く捉えられることで、プロダクトの「将来あるべき姿」はプロジェクト全体の旗印となり、目的達成に着実に貢献できました。

未来の「あるべき姿」を踏まえてオブジェクトモデリングを実施したのち、拡張性を担保した上での必要画面の洗い出しや、ビュー・ナビゲーション設計を通した既存アプリの課題を解決することにも取り組みました。

昨今コロナ禍において、オンライン診療や服薬指導が行われるサービスは増えています。しかし、診療と服薬指導の両方を1つのアプリで一気通貫で体験できるものはまだ少ないことが現状です。

オンライン診療アプリとしてスタートしたCLINICSは、ニーズの高まりを受けて服薬指導にも事業領域を拡張する中で、診療から服薬指導への導線に迷うユーザーからの問い合わせが増えていることを課題に感じていたそうです。
オフラインであれば「病院に行き医師から処方箋を発行してもらい、薬剤師に届ける」という一連の体験フローが明確ですが、アプリ上では体験フローの繋がりがユーザーにとっては分かりにくくなっていたのです。

Goodpatchはユーザーへのヒアリングを通して、「診察を終えたユーザーは、薬局に行きたいのではなく、処方箋を薬に変えたい」というインサイトを見つけ、「処方箋」というものがユーザーにとって大きな意味を持つことがわかりました。そこで、アプリ上でもユーザーが「処方箋」というオブジェクトを扱いやすくなるように、UIをリデザインしました。

提案したのは、アプリに処方箋がアップロードされると、トップページに処方箋が表示されるUIです。オフラインの通院体験に近い感覚で「この処方箋を薬に変えよう」とスムーズに考えることができる体験をCLINICSで提供し、オンライン診療とオンライン服薬指導の分断解消を試みました。

また、ユーザーの体験フローの改善や、事業領域の拡大を見据えて、ナビゲーションの基礎となる「Tab」を最適化。5つあったところから「予約管理」「病院・診療所」「薬局」の3つに最適化する提案をしました。

CLINICSにおいてリデザインした画面の数は、状態遷移も考慮すると約300画面にのぼります。その3分の2をGoodpatchのiOSエンジニアが実装するにあたって、UIKitとSwiftUIを併用してUIを実装する方法を模索しました。SwiftUIは発展途上のフレームワークではありますが、今回のプロジェクトにおいては、実装およびコードレビューの時間を大幅に節約することができました。メドレー社エンジニアの高い技術力と、GoodpatchエンジニアのUI実装の知見を結集させ、数年先を見据えたアーキテクチャをデザインすることに取り組みました。

SwiftUIを導入したことでDynamic Typeのサポートが容易になりました。Dynamic TypeはiOS上でデフォルトの文字の大きさを変更できる機能です。小さい文字だと読みにくい人のために、主にアクセシビリティの目的で利用されることが多いとされています。CLINICS iOS は、SF Symbolsではなく、アプリ用にデザインされたアイコンを使用しています。通常のテキストサイズだとアイコンの大きさが適切ですが、Dynamic Type によりテキストサイズが大きくなった場合に、アイコンとテキストの大きさの違いが気になります。この問題を解決するため、テキストと併設するアイコンをSymbol化しました。

CLINICSアプリには、気になる病気やお薬を調べられる「病気事典」と「お薬事典」があります。例えば「お薬事典」には「効果と作用機序」「薬理作用」など、構造化された文章コンテンツを画面に表示します。情報量が多いコンテンツにおける、読みやすさを考慮した文字組みのルールを決め、iOSではSwiftUIで実装しました。

UIコンポーネント、カラー定義の運用

UIのリデザインでは、UIコンポーネント、カラーを再定義しています。UIコンポーネントは「ボタン」「カプセル型のタグ」「丸い円を背景に持つアイコン」「ラジオボタン」「短いテキスト」などの小さなコンポーネントを組み合わせて、より大きなコンポーネント「リストのセル」「複雑なカードコンテンツ」などを組み立てています。iOSではコンポーネントをSwiftUIで実装することで、再利用性を高めています。

カラー定義は、デザイントークンの知見を活用し、色自体に名前をつける「カラーパレット」とインターフェースの要素に依存した「セマンティックカラー」の二段階で設計しました。命名に関しては、UIデザイナーとエンジニアで議論し、複数プラットフォームの開発者にわかりやすく、今後も認識がぶれないように決めました。

iOSでデザイントークンを使ったカラーを運用する方法を模索する - Goodpatch Tech Blog

Goodpatchの手が離れたあとも、メドレー社内で引き継いでいくことができるように、FigmaやStrap上のデータは常に整理しておくことを心がけていました。UI制作の前提にもなる、思考の過程を残すことで後から参照できる状態を目指しました。

メドレーの皆さんからはこのような言葉をいただいています。

これまで本番のUIを正としており定常運用されるデザインファイルがなかったため、この機会にFigmaでコンポーネントを綺麗に作ってもらったことはすごくありがたかったです。ディレクター等も積極的にUI設計に関われるようになったので、今後も新しくデザインをするときに活用したいです。

Goodpatchとのプロジェクトを振り返り、メドレーの方からはこのような言葉をいただきました。

漠然としていた「将来このアプリをどうしていきたいか」を洗い出して、現実解に落とし込むまでの思考の過程をまとめてもらった資料をUI設計時に今も見返したりしています。

Credit

ディレクター：野﨑、中谷
プロジェクトマネジメント：三重野
UXデザイナー：山岸、國光
UIデザイナー：坂本、山下、矢吹、丸
iOSエンジニア：中田、田中、藤井