カラーミーショップ管理画面改修の裏側と学び。プロダクトデザイナーしょこのインタビュー

こんにちは。カラーミーショップのプロダクトデザイナーのしょこです。普段はカラーミーショップの管理画面の改修を行っています。主な専攻領域はリサーチ、UIデザイン、UXエンジニアリングです。
今回は、カラーミーショップの管理画面のデザイン刷新とデザインシステムの拡充を担当した経緯についてお話しします。

課題の発見とリサーチの実施

カラーミーショップの管理画面は、高月商ユーザー向けに利便性を向上する必要がありました。同時に、開発効率を改善し、改善スピードを向上させることが必要でした。
前者の課題にアプローチするため、ユーザーリサーチを実施し、利用状況をより深く把握したところ、特定の場面において、管理画面の扱いづらさが浮き彫りになりました。

デザイン改修の具体例

私の業務範囲では、管理画面のデザイン変更や、それに伴う影響へのアプローチなどを行っています。例えば、コンポーネントの改修が必要になった際には、その必要性を言語化し、新しいデザインを作成するというプロセスを踏みました。併せて、デザインシステムとの連携も行っています。

管理画面のデザイン改修の一例を紹介します。レイアウトの改修を行い、グローバルナビゲーションを画面左側に配置してサイドメニュー形式に変更しました。

この変更により、ショップオーナーは、より狭いウィンドウ幅で管理画面を触ることが可能になり、PCの画面をより有効的に使えます。
ショップオーナーの現場において、複数のウィンドウでカラーミーショップの管理画面と外部サービスを同時に表示しながら受発注の作業をしている、という、ユーザーリサーチで得た実際の利用状況へ対応したものです。並行的にタスクを処理しやすくすることで、ショップオーナーの日次業務を行いやすく改善しました。

しかし、サイドにナビゲーションを配置するレイアウトに変更したことで、それまでの画面に慣れていたショップオーナーが、目的のメニューを見つけづらくなる課題が発生しました。
これについては、そもそものナビゲーションの情報設計を見直し、ドメインモデルを策定することで項目を整理し、新しい構造のナビゲーションをリリースすることで対応しました。

現在はサイドメニューのリリースが完了し、次の開発に向けて準備を進めています!

改修で意識したポイント

ネットショップの管理画面は、そのショップオーナーと顧客とのコミュニケーションの場であり、ショップオーナーの事業への悪影響とならないよう気をつける必要があります。そのため、改修は入力操作に影響がない部分から進め、さらに改修について綿密に周知し、ポジティブなものと受け取ってもらえるよう、コミュニケーションデザインについても力を入れています。

また、管理画面で使われているデザインのコンポーネントの改修について、その仕様を言語化しながらチームメンバーと共通認識を持つように努めています。
カラーミーショップは、コンポーネントが持つ状態の変化が複雑であり、ショップオーナーに状態が伝わりやすいデザインを考え、実装することが求められていました。個人の判断ではなく、長く継続的に、組織でデザインが行えるよう、弊社のデザインシステム「inhouse」や「Flippers」などの共通認識の土台を使いつつ、仕様のすり合わせを行なっていきました。
Flippersについて詳しい記事はこちらよりご覧ください!

インハウスデザイナーとしての役割

インハウスデザイナーの主要な責務は、課題を定義し、解決策を探るためのアプローチを模索することです。そしてチームに提案し、プロジェクトを前進させていくことが求められます。本プロジェクトでもこのプロセスに基づいて確証を得たデザイン制作を行うことができました。
今後もユーザーのニーズに応え、より使いやすいサービスを提供するために、継続的な改善と学習を続けていきたいと思います。カラーミーショップでは一緒にデザインシステムやプロダクトデザインを推進していくパートナーを募集しています!
カラーミーショップのデザインにご期待ください！