買い物UXを向上するアプリを作ってみた

こんにちは、マインドアイル採用担当です。
今回は、先日インタビューを受けてくれた2人がオンボーディングの一環で行った、1ヶ月半にわたる開発成果会についてのレポートです。

前提
マインドアイルでは現在、モバイルデバイスやスキャン技術などを用いてリテール領域を中心に業務の効率化や新しい小売ビジネスの支援を目的としたDXソリューションを展開しています。

今回、浅沼くんがバックエンド側、星くんがアプリ側を作ったアプリ名は

＼Scan Find／

開発背景

コロナの影響でよりオンラインショッピングはますます便利になりましたが、リアル店舗（オフライン）での買い物体験向上を目的としたアプリです。※前提として既に企業（ブランド）が出しているアプリに追加するアプリ（機能）になります。

内容としては、商品バーコードを携帯で読み取って店舗内での在庫確認と試着依頼が出来るというもので例えばスニーカーを買いに店舗に行ったときに「デザインはいいんだけど、このサイズあるかな？」「試着のために定員さんを呼ばなきゃいけない」といった少しの手間をアプリで解決しようというものです。

また、このアプリの工夫点としては在庫確認・試着依頼だけではなく、他商品との比較やレビューが読める点です。店舗にいながらもオンラインのような比較・レビュー確認が出来るのでリアル店舗でオンラインショッピングの利点も体験できる、ハイブリットさがあります。

と、いうのは利用ユーザーのメリットですが
マインドアイルの導入ターゲットは企業なので企業側へのメリットももちろんあります◎

導入企業側のメリットとしては
・顧客へのスムーズな商品の受け渡しによる業務効率化
→在庫確認や取りに行く時間が短縮できるので試着時の接客に集中できる
・購入データだけでなく、試着はしたが購入に至らなかった商品のデータが分かる
→データ収集や商品開発にも活かせるデータがリアル店舗で取れる

など顧客満足度の向上だけでなくデータ収集や活用にも活かすことができます

＼プレゼンの様子／

（左：浅沼くん　右：星くん）

成果会を聞いた印象としては、めちゃくちゃ実用的だなと思いつつ、一生懸命な2人の姿に会社の今後が楽しみになりました◎

開発について

今回の開発を通しての二人からの感想

浅沼くん

今回僕はサーバーサイドの実装を担当しました。マインドアイルの使用言語はgolangであるのに対して、自分は今までrubyしか触ったことがなかったので新しい言語での開発です。他にも、クリーンアーキテクチャを採用して実際のプロジェクトが開発されているため、今までMVCモデルでしか開発したことがなかったので、こちらも初めての挑戦となりました。初めての言語で初めてのアーキテクチャという状況で一つのプログラムを作るのでもかなり苦労しました。また、このScan&Findについては、私のオンボーディングではなかったというのが本当のところなのですが、代表の意向で、「じゃあ、このサーバーサイド実装してもらって、企業へのプレゼンに出せる位作り込んでしまおう」という流れで取り組むことになりました。当然、サーバーサイドのことまで設計されていないため、テーブル設計から一通り任せられることに、、、。とりあえず、やりながら理解していくだろう的なノリで「こんな感じかな？」「思った通りにプログラムは動いているな」という感じで実装を進めていきました。（後のレビュー会でズタボロだったことは内緒です、、、）実装が終わった後は、実際にアプリを動かすインフラを構築してきました。実際のプロジェクトの構成を真似して、AWSのAPIGateway・Lambda・RDSを主に活用したサーバーレスの構成でインフラを構築しています。期限まで残り1週間のところでログイン機構にCognitoを使ってみたら？という提案を受けて、こちらも着手することに。最終的には、APIGatewayのAuthorizerにCognitoを設定することで、認証・認可も実装することができました。

1ヶ月半の開発期間で全く触ったことがないサービスばかり挑戦しました。当然、頭もパンク寸前でしたが作成したAPIをフロントが叩いて、取得したデータで実際にアプリが動作した時は、ありきたりの言葉にですが「達成感」は感じました。と同時に、フロント側の実装を見た時にIOSエンジニア格好良いと内心嫉妬してしまいました。笑

概ね、アプリは作成したもののまだまだ実際のユースケースやターゲットに具体性を帯びていないことも事実です。何をどうしたら便利や新しい体験を提供できるのだろうかという「創造すること」がいかに難しいことなのか把握することができました。また、マインドアイルの武器であるスキャン技術に対して新しい目線で捉えることができるのかが肝になりそうだと感じています。

星くん

今回フロントエンドを担当しました。このアプリを実装するにあたって苦戦したことが2点あります。

1点目がバーコードの読み取り部分です。
バーコードの読み取りには、スキャンエンジンを使用しています。今回使用したスキャンエンジンでは複数のバーコードを同時に認識し、ARでの表示を実装できる機能なんですが、実装方法は公式のDocumentから参照してくる必要がありました。普段Documentなどはあまり読まないため、正常に動作するものを作るまでに時間がかかってしまいました。しかし、どんな言語やフレームワークにもDocumentは存在するため、今後は読解力を磨いていきたいと考えています。

2点目がUIの部分です。
基盤となる画面のデザインは、あらかじめ仕様が用意されていたのですが、ブラッシュアップを重ねていく中でいくつか画面の構造を変更する必要がありました。その際に意識したことは、AppleのHuman Interface Guidelines（HIG）に準拠された作りにするということです。しかし、実際に作ってみると、モダンなデザインになっていなかったり、文字のサイズやフォントが画面とマッチしていなかったりとデザインの難しさを実感しました。先輩や上司にフィードバックをいただき何度も修正を重ねた結果、初期のものよりもはるかに良い製品を作ることができました。

今回のこのオンボーディングを通して様々なことを学びましたが、アプリ開発において最も大事だと感じたことは、ペルソナをどれだけ明確できるかということです。ユーザーのモデルがブレると、提供するサービスもブレてしまうということを学んだため、今後はそこを意識していきたいと感じました。

また、実際にこのアプリが導入された際には、店舗で比較された商品を店舗外でも購入できるようにするなど、機能をより充実させること想定しています。ご依頼お待ちしております。

おや、二人の感想、私の前段より長いッ！と思いながら感想を聞いていました。でもどれも大事な要素だったので削れず全文使っちゃいました。（笑）

ただのスキャンではなく、スキャンを通じて顧客・利用企業に対して我々はどのような価値を提供できるか、日々考えております。是非ご興味の持たれた企業様はご依頼お待ちしております。そして、「自分もこういうサービスに携わりたい！」「何気ないショッピングに自分の技術を活かしたい」という熱意のエンジニアの方は是非カジュアルにお話しましょう♪