Stash&Store — ストレージの検索とレンタルがより簡単に

May 10 2023

イントロダクションこんにちは、ミディアムリーダーです。この UI UX ケーススタディでは、モバイルアプリのデザインを紹介します。「Stash&Store」は、私の 2 番目のモバイルアプリケーションの名前です。

序章

こんにちはミディアムリーダー！この UI UX ケーススタディでは、モバイルアプリのデザインを紹介します。「Stash&Store」は、私の 2 番目のモバイルアプリケーションの名前です。これは、ユーザーがアイテムの適切な保管スペースを見つけたり、自分の余分なスペースを収益化したりするのに役立つさまざまな機能で構成されています。私は革新的で創造的であり、このアプリをユーザーフレンドリーで直感的で機能的でユニークなものにすることを目指しました.

カバー

問題

プロジェクトを開始したとき、私は解決したい 1 つの特定の問題を念頭に置いていました。しかし、もう少し考えてみると、「Stash&Store」は、さまざまなタイプの人々のさまざまな問題を解決する多機能アプリになる可能性があることに気付きました。以下は、私が何らかの方法で解決したいと願っていた問題です。

人々の家の収納スペースの不足
現代の世界では、人々は収納スペースはもちろんのこと、生活が不足しています。
保管ユニットと倉庫の価格が高い
保管スペースを借りようと考えている人は、家賃が高いためにレンタルを思いとどまることがよくあります。専門の倉庫は、多くの場合、非常に高価になる可能性があります。
未使用のままの余剰スペース
余剰スペースを所有している人は、未使用スペースの費用だけが残る場合があります。

上記の問題を認識して、私は研究を始めました。私が最初にしたことは、いつものように、競合アプリケーションと製品を分析することでした。これを行うことで、自分のアプリに何を追加できるかについていくつかのアイデアを思いつきましたが、さらに重要なことは、競合アプリの欠陥と欠点を発見したことです. 私の最終目標は、この目的のために最高で最もユニークなアプリを作ることでした! 競合アプリを調査する以外に、ユーザーについて知りたいと思っていました。デザインプロセス全体を通して、ユーザーとそのニーズを考えることが私の最優先事項でした。

ユーザーペルソナ

私のアプリが解決する主要な問題に徹底的に取り組み、潜在的なユーザーのニーズについて広範な調査を行った後、次のステップは理想的なユーザーペルソナを特定することでした。

Stash&Store のユーザーペルソナ

ブレーンストーミング

ユーザーのペルソナを特定した後、私はいくつかのブレインストーミングセッションに参加しました。この段階で、頭に浮かんだほとんどすべてのアイデアを書き留めました。これらのメモは FigJam で作成し、後でこれらのアイデア用に特別に指定された特別な Figma ページに転送しました。

「ブレインストーミング」figma ページのスクリーンショット

上のスクリーンショットでわかるように、純粋なブレインストーミングのセクションがあり、アプリの特定の主要部分のセクションもありました。

UXマップ

いろいろ考えた結果、UXマップを構築しました。3 つのフレームカラーがあり、それぞれがアプリの異なる部分を表します。

UX マップ — 凡例

UXマップ

インスピレーションボード

アプリの UI 要素に関しては、さまざまなアプリからの膨大な数のさまざまな画面とショットで構成された大きなインスピレーションボードを作成しました。多少直感に反するかもしれませんが、旅行アプリ、ソーシャルメディアアプリ、料理アプリ、ナビゲーションアプリなどからインスピレーションを得ました。色、入力フィールド、メニュー、アイコン、ボタン、フォント、イラストなど、すべての UI 要素に注意を払いました。基本的に、すべてのアプリはかなりの量の同じ UI 要素を共有しています。

Dribbble、Mobbin、Behance、および同様のプラットフォームから多数のショットを Figma の「インスピレーションボード」ページに保存しました。すべてのショットを目的別に分類しました。このように、さまざまな種類のショットを含む複数の異なるセクションがありました。

セグメント化されたインスピレーションボード

また、注意を引いたことを正確に思い出せるように、ショットに Figma コメントの形式でメモを残すようにしました。アプリの見栄えを良くするには、他のさまざまな優れたデザイナーの作品を再調整して模倣するだけでよいことを知っていました。私がインスピレーションを得たアプリは、ほとんどが世界中で使用されており、世界で最も優れた専門家によって設計されています。

Lo-Fi ワイヤーフレーム

3 つのワイヤフレームセクションを作成しました。最初のものは普遍的であり、それはオンボーディングプロセスです。他の 2 つのセクションは、異なるアプリビューのワイヤーフレームで、1 つはホスト用、もう 1 つはクライアント用です。アプリがダウンロードされ、ユーザーが登録すると、ユーザーは 2 つの間で簡単に変更できます。以下のスクリーンショットでは、ほぼすべての画面がこのワイヤーフレームで導入されていることがわかります。

オンボーディング

クライアントビューアプリのバージョン

ホストビューアプリのバージョン

ワイヤーフレームが完成すると、プロジェクトをどのように進めていくかについて、より明確なアイデアが得られました。また、ワイヤーフレームを作成しているときに考えを忘れないように、画面の特定の領域に Figma のコメントを残して、特定のデザイン要素の計画を思い出すようにしました。

デザインシステム

書体と色

テーマカラーと組み合わせて使用した書体は、最良のソリューションであることが証明されました. この緑色のトーンは、ユーザーの心に信頼、楽観主義、全体的なポジティブさを呼び起こします。一方、書体としての DM Sans は、現代性、プロフェッショナリズム、明快さの感覚を伝えます。すっきりとしたラインと丸みを帯びた角がアプリに親しみやすく親しみやすい印象を与え、シャープなエッジが正確さを感じさせます。

デザインプロセスの生産性を高めるために、テキストと色のスタイルを作成しました。そうすれば、特定の UI 要素の色を決定したり、特定の場所で使用するフォントを決定したりすることが、より簡単かつ迅速になりました。スタイルを作成することは、後でデザインを変更する際にも非常に役立ちました。

タイプスケール — テキストスタイル

アイコンについては、アプリ全体で一貫したデザインを維持するために、1 つのアイコンパックと 1 種類のアイコンを使用しました。アイコンパックの名前は「Heroicons」で、必要なほとんどすべてのアイコンが SVG (ベクター) 形式で含まれていました。見当たらなかったアイコンは、Figmaのペンツールで描きました。前述のアイコンパックのアイコンとサイズとストロークが一致していることを確認しました。

アイコンパックのソース:
https://heroicons.com/

私が使用したイラストに関しては、それらも同じイラストソースから取られました. 繰り返しになりますが、UI の一貫性は非常に重要です。

イラスト出典： https:
//storyset.com/time

最終設計

「Lo-Fi ワイヤーフレーム」の章で述べたように、「Stash&Store」は 2 つのアプリビューで構成されます。1 つ目はクライアントに焦点を当てたもので、クライアントは、アプリを通じてレンタルするストレージを探しているタイプのユーザーです。このアプリビューは、クライアントがストレージの取引を簡単に見つけるのに役立つはずです。2 つ目のアプリビューは、スペースの貸し出しを検討しているホスト向けです。 この場合、「Stash&Store」は、オファーの管理を容易にする特定の方法でユーザーにサービスを提供します。

オンボーディング

オンボーディングプロセス自体は、どのアプリでも比較的同じです。この場合、もちろん、ユーザーには登録またはログインという 2 つの主要なオプションが提供されます。アカウントを作成するとき、ユーザーは「Stash&Store」の使用目的を指定するよう求められます。これが含まれるのは、ユーザーが 1 つのアプリビューのみに関心を持つ可能性があるためです。彼/彼女の選択に従って、彼/彼女はサインアッププロセスを続行します。ホスト
として続行する人は、すぐにオファーをリストするか、その部分をスキップして後で戻ってくるように求められます. ホストは、身元を確認するために、政府発行の ID カードの写真を撮る必要もあります。それでも、すべてのユーザーに必須の唯一の検証プロセスは、電子メールの検証です。

マップ、検索、フィルタリング

クライアントのサインアッププロセスが完了すると、ユーザーは [ホーム] タブとしても機能する [探索] 画面に移動します。ここから、希望する場所を入力してストレージを検索し、検索結果をフィルタリングできます。マップには、使用可能なストレージのロケーションピンが表示されます。いずれかをクリックすると、画面の下部に、そのストレージに関する一般的な情報を示すカードが表示されます。
このタブのもう 1 つの重要な機能は、「点を配置」機能です。右下隅のボタンをクリックすると、小さなロケーターピンが画面の中央に表示されます。ユーザーがマップをスクロールしている間、マップは中央に留まります。ユーザーがピンを任意の場所に配置し、もう一度右下のボタンを押すと、配置したピンの近くにあるすべての保管場所が画面に表示されます。

保管予約

適切なストレージが見つかったら、クライアントはオンライン可用性要求を送信できます。上の 2 番目の画面に見られるように、クライアントは希望する開始日を選択し、ホストにメモを書くこともできます。クライアントのリクエストを完全に承認するかどうかはホスト次第であることに注意してください。
クライアントがストレージを決定するのに役立つアプリに導入したことの 1 つは、アチーブメントチップです。これらのチップはストレージ画面に表示され、クライアントが見つけたストレージが安全で信頼できるものであることを何らかの形で保証します。ホストは、アカウントの確認と特定の数の取引を通じてこれらのチップを取得するホストです。

予約変更・キャンセル

クライアントがレンタルスペースを予約すると、2 番目のタブ (マイレンタル) で取引を見つけることができます。このタブには、行ったすべてのオファーの概要が表示されます。カードの 1 つをクリックすると、画面が開き、取引を確認できますが、さらに重要なことに、予約を編集および/またはキャンセルすることもできます。どちらの場合も、誤った行動をしないように行動を確認するよう求められます。

メッセージ

「メッセージ」は、このアプリの 3 番目のタブです。多かれ少なかれ普遍的であるため、ホストアプリビューにも表示されます。ユーザーは、チャットを検索したり、会話を削除したり、アーカイブしたりできます。また、クライアントのアプリビューの場合、ユーザーは事前に生成されたよくある質問を送信できます (上の 3 番目のショットを参照)。

プロファイル画面 — 1 つ目はクライアントのアプリビューで、2 つ目はホストのアプリビューです

両方のアプリビューのプロファイル画面は比較的似ています。両方の画面の上部には、アプリビューを変更するボタンがあります。このボタンに簡単にアクセスできるようにしました。また、ホストが自分のアカウントを完全に確認していない場合は、確認を完了するよう促されます。それが、2 番目の画面の上部にある緑色の鮮やかなボタンの目的です。