Mediumsを通じたクリエイティブ業界の再発明

Mediumsを知る

Mediumsは、あらゆる人のクリエイティブなニーズを支える多彩な商品を販売する、新しい24時間営業のクリエイティブランドマークです。Mediumsは、アーティスト、クリエイター、そして夢見るすべての人にとっての定番の場所になることを目指しています。

ブランドとして、クリエイティブ業界と画材・文房具のシーンを再構築し、誰もがアクセスできるものにすることを掲げています。

課題、問題、そして私たちの解決策

多くの複雑なプロジェクトと同様に、Mediumsアプリにも独自の課題や障害がありました。

MVP版のアプリだけでも200以上の画面があったため、UXとUIの作業量は相当なものでした。さらに非常に短期間のプロジェクトだったこともあり、品質やパフォーマンスを犠牲にすることなく、必要な機能を盛り込み、選定したMVP機能で価値を届けるためには、リスク低減策やフォールバックプラン、複数のチェックポイントが不可欠でした。

リスクを抑えるためには、チーム同士、そしてクライアントとの緊密な連携を保ち続けることが不可欠でした。

ADB2CとMSELのドキュメントやコード例が不足していたため、モバイルアプリの環境構築は予想以上に困難でした。問題を解決するために、Microsoft Azureのサポートとの週次の電話会議も行いました。一部の問題は残ったものの、それらを補い、有効な一時的回避策を構築することができました。

その他の問題は、クライアントのバックエンドシステムの連携ポイントが完全には開発・提供されていなかったことに起因していました。しかし、所定のUAT期間を通じて作業を進めてカスタムプロキシサービスを完成させ、テストを成功させることができ、UATをローンチ予定日のわずか数日前まで進めることができました。

作業範囲とタイムライン

Mediumsのプロジェクトゴールは、人々がよりサステナブルなライフスタイルを送れるようにすることでした。丁寧に作り込まれたモバイルアプリケーションによって、アートとデザインを可能な限りオープンなものにし、顧客がモバイルデバイスから直接、最も摩擦のない体験を得られるようにします。Mediumsはこれらのオンライン要素を活用し、買い物ではなく創作に時間を使えるよう買い物客を支援します。

Mediumsは、コンセプト実証としての初期プロダクトに向けて、いくつかの重要な領域を構想していました。

デザインシステム

デザインシステムとは、チームがプロダクトをデザインし、実現し、開発するためのすべての要素をまとめた、唯一の信頼できる情報源です。デザインシステムは単一の成果物ではなく、成果物の集合体です。

アイコノグラフィ

Mediumsのアイコンは、シンプルでモダン、そしてフレンドリーであるようにデザインされています。各アイコンは最小限の形へと還元され、その本質的な特徴を表現しています。

開発

プロジェクトのMVPフェーズでは、iOS向けにSwift、Android向けにKotlinでネイティブモバイルアプリを構築し、Microsoft Azureおよび複数のセキュアな社内システムと連携するNodeJSベースのバックエンドAPIプロキシサービスを組み込みました。

当初は、モバイルアプリが既存の各種バックオフィスシステムとネイティブAPI経由で直接やり取りする想定でした。しかし、ディスカバリーの過程で、プロキシ方式のほうがはるかにクリーンであり、認可、認証、セッション管理を社内外の多様なシステム全体でより一貫させられる抽象化レイヤーを追加できることがすぐに分かりました。また、処理の大部分をNodeJSバックエンドプロキシに移したことで、モバイルアプリを再ビルド・再デプロイすることなく変更を加えられるようになり、チームは変更管理においてはるかに大きな柔軟性を得ました。

ワイヤーフレーム

私たちはまずワイヤーフレームに注力しました。ワイヤーフレームとは、シンプルな線と図形でユーザーインターフェースの骨格を表現し、コア機能に焦点を当てるための図、または図の集合です。

新しいユーザー体験とインターフェース

あなたの指先で、創造性を再想像する。

最終デザインは、UXとUIのフェーズを通じた複数のイテレーションに基づいています。現行ユーザーのペインポイントと、当初設定したゴールや目標を活用することで、この最終形にたどり着きました。

検索とブラウジング

初心者からエキスパートまで、2つの異なる行動パターンがあるため、目的の商品を探す検索と、カテゴリーをたどるブラウジングの両方を軸にデザインしました。

検索は、すでに欲しい商品が決まっているユーザーを助けます。カテゴリーブラウジングは、特に決まったものがないユーザーが、カテゴリーを通じて商品に出会えるように助けます。

商品詳細ページの最適化

商品ページのコンテンツは、ユーザーが購入するかどうかを大きく左右します。私たちは、ユーザーを圧倒することなく必要な情報をすべて提供し、商品が何であるか、どのような見た目か、どのように機能するかをより深く理解できるようにしました。

商品バリエーションの選択も、商品詳細ページにシームレスに組み込まれています。

カートとレコメンデーション

ショッピングカートのレコメンデーション最適化は、クロスセルの戦術です。カートページにクロスセルを導入した結果として、バスケットサイズが拡大します。さらに、顧客は商品ページを経由することなくその場で商品をカートに追加できるため、離脱のリスクを最小限に抑えられます。

リアルタイムの注文追跡

注文が今どこにあるのかを、正確な情報とともにリアルタイムで表示します。