見出し画像

アプリUI作成のためにデザインチームで行った活動「クリエイティブDAY」の紹介

マンハッタンコードのデザインチームで企画中のサービス「エトセトラ」のスマホアプリのUIデザインを行いました!

「エトセトラ」というのはユーザーがプロダクトやサービス、店舗にまつわるストーリーを閲覧できるメディアアプリになります。

画像10

お店のオーナーがアプリに登録し自分のお店を紹介するためにストーリー形式で表示し、アプリ利用者がお店一覧をストーリー形式で閲覧して他アプリ(Youtube,Instagram,TIKTOK)にもとぶことができるというお店のオーナーにもユーザーにもメリットがあるアプリです。

✏️どのような流れで作成していったのか手順の紹介

1️⃣理解をする
まずはアプリサービスができるまでを学ぶ
2️⃣発散する
ユーザーストーリーの可視化をしアイディア出しをする前
3️⃣発散する
ユーザーストーリーの可視化をしアイディア出しをした後
4️⃣試作
ユーザーストーリーを元に必要な機能の洗い出し
ワイヤーフレームのアイディア出し

上記のような流れで一つずつご紹介していきます。


1️⃣理解をする〜アプリサービスができるまで〜

まずはアプリサービスが生まれるまでに色んな人(プロダクトオーナー・マーケター・プランナー・プロジェクトマネージャー・ディレクターやデザイナー等)が関わって、色んな工程があって一つのアプリサービスができることを学びました。

画像10

私たちのサービスはまだ立ち上げ当初なので。検証に最適な「デザインスプリント」を使った方法で進めていきました

デザインスプリントとは、5日間という短い期間でプロダクトの成功確率を高める高速フレームワークです。

今回はユーザーストーリーの可視化をし、おおまかなアイディアを出すフレームワークを行いました。

2️⃣発散する
〜ユーザーストーリーの可視化をしアイディア出しをする前〜

アプリがどうやってできあがるのかがわかったところで、エトセトラはどんな人が関わってくるのか考えていきます。

「店長さん」「アプリユーザー」「管理者、サービス運営者」等、考えられる登場人物を出していきました。

画像10

どんなアプリなのか、早速このアプリのワイヤーフレームをそれぞれ考えてみることにしました。

画像2

ちなみに、これはユーザーストーリーを考えていない状態で作成したワイヤーフレームです。
ユーザーストーリーがないとどんな機能が必要かもよく分からない状態で作成していました。
写真は遠目なので見にくくなっていますが、必要な機能が入っていなかったり、いろいろ問題がある仕上がりになっています…。

こういった問題を防ぐために先にユーザーストーリーや機能洗い出しを行う必要があります。

3️⃣発散する
〜ユーザーストーリーの可視化をしアイディア出しをした後〜

ユーザーストーリーを考えない状態ではどんな機能が必要なのかも分からないことがわかったので、ユーザーストーリーをしっかり考えることにしました。

ユーザー(お客さん)が「行く」「買う」につながるストーリー、
ユーザー(オーナー)がアプリを利用したいと思えるストーリはどんなことなんだろうとユーザーストーリーマップをホワイトボードに書いていきました。

画像10

4️⃣試作〜ユーザーストーリーを元に必要な機能を洗い出し再びワイヤーフレームのアイディア出し〜

ユーザーストーリーマップを考えた後は機能も改めて洗い出し、再びワイヤーフレームを作成しました。

画像7

画像8

Scannable の文書 (2022-10-05 21_28_48)

Scannable の文書 (2022-10-05 21_42_42)

✏️クリエイティブDAY②もあります!

アプリUI作成のためにデザインチームで行った活動「クリエイティブDAY」は2日に分けて行いました。
第2回目のクリエイティブDAY2はデザインスプリントについての学習を念入りに行ったのでその様子をnote記事でご紹介します。

🏢株式会社マンハッタンコードとは?

「フロントエンド領域の探究と実現を推進して、世の中で愛される商品やサービスを増やして人々を豊かにする」をミッションとし、フロントエンドの総合商社を目指している会社です!

一緒に働く仲間を募集中!

おしゃべり大好き、楽しいこと大好きなエンジニアやデザイナーを募集しています♪

どんな会社なのか、見てみたいという方は毎週土曜日に「frontend square」という無料カフェを開催していて定期的に勉強会も行っているのでぜひ遊びに来てください☆!

🌷frontend squareの会場情報

いいオフィス 神田小川町
住所:千代田区神田小川町1-8-7 Gothamビル2
(以下リンクから地図が見れます)
https://ii-office.jp/ogawamachi-by-gotham/access/

🌷会場の雰囲気

画像4


コワーキングスペースを貸切っているので作業に集中しやすい&おしゃべりしやすい環境です。各々好きなことを喋ったり勉強することができます。14:00-20:00の間、入退室自由なので好きな時間にふらっと遊びに来ることもできます。
コーヒーとお菓子は毎回無料提供していて、おかわりも自由です。コーヒーは豆にこだわっていて、参加者さんから美味しいと好評です☕️
カフェに行くのと同じようにfrontend squareに来ていただけると嬉しいです💓






いいなと思ったら応援しよう!