-
Hello, my name is
Hiroto SUZUKI -
Final Fantasy YL 30th Anniversary Project
-
Mirai Exhibision
In Tokyo Dome City
MY STORY
I’m Hiro,
A Global Product & Experience Designer
日本をベースにカナダや中国の企業とプロジェクトを進めるグローバルなデザイナー。
7年あまりのデザイナー経験からモバイルアプリやプロジェクションマッピング。さらにはユーザーリサーチからプロトタイプまでスタンドアローンに業務を進めます。
Ariake Urban Sports Park
Specialities
- 国内外、分野を超えたマネジメント
- ユーザー中心の体験デザイン
- 企画からデザインまでシームレスに設計
- ラピッドプロトタイピング
多国籍組織オリンピックで学んだ、マネジメント経験からの問題解決
日本、ドイツ、中国、スイス、イギリス、イタリア、ロシア、ブラジル。色々な人種と切磋琢磨し、見事金メダルを生み出したスケートボードの会場「有明アーバンスポーツパーク」を担当していました。
企業間でのコミュニケーション、ホスピタリティ、そしてシナジー。任せてみたり、握ってみたり、多種多様な方法で人を動かすスキルを身に付けました。
Venue Technology Manager
軋轢は文化の違いではなくコミュニケーションロスによって発生することが多々あります。
特殊なスキルや最新のアイディアではなく、基本に戻り、対話することを欠かさず、問題の本質を端的に考えることが大事だと会場技術責任者としての一年半で学びました。
クライアントとの強固な連携
UXデザイナーとしてビジネスやプロモーション企画からプロジェクトに関わっていくことにより、プランニングとデザインをシームレスにつなぎます。
私への信頼、そのものがデザイナーとしての財産です。
- Meiji Logo
- SquareEnix Logo
- NipponTelevision Logo
- JNTO Logo
- JRA Logo
- CanadaStarSecondary Logo
7年のクロスボーダーな経歴
プランナーとしてデータの取得や分析から始まった私の社会人生活。そこから大学時代に培ったビジュアル表現を結びつけ、私だけが行える「中学生でも分かる」ユーザー体験を現在は得意としています。
プロフェッショナルな視点と素人の視点が、ユーザーエクスペリエンスデザイナーには必要だと考えます。
-
Olympic Logo
-
SpiceFactory Logo
-
USTARLinks Logo
-
Kayac Logo
-
Nintendo Logo
-
Geidai Logo
MY STORY
I’m Hiro,
A Global Product & Experience Designer
Hiro is a designer based in Japan who works with international companies from North America and Asia.
With seven years of design practice, his work encompasses mobile apps, projection mapping, user research, and prototyping.
Ariake Urban Sports Park
Specialities
- UX + UI Design
- Design Strategy / Research
- Cross-disciplinary and multinational project management
- User-centered experience design
- Project execution from concept to final implementation
- Rapid prototyping
Problem Solving Experience in Managing the Olympic Project
I was the venue technology manager for developing the 'Ariake Urban Sports Park,’ a skateboard venue for the 2020 Summer Olympics.
I collaborated cross-disciplinarily with experts from Japan, Germany, China, Switzerland, England, Italy, Russia, and Brazil. By having open communication and hospitality in mind, my skills in team delegation and motivation exploit synergies between the multi-cultural teammates.
Venue Technology Manager
Conflicts are not often caused by cultural differences but by a lack of communication.
A year and a half as the project manager, I have learned more than just technical skills or innovations. Open dialogue and identifying core values are vital to a successful project.
Strong Collaboration With Clients
As a product designer, my work combines clients' goals and marketing strategies, bringing projects to life that achieve business outcomes and delight key users.
Your trust is an asset to me as a designer.
- Meiji Logo
- SquareEnix Logo
- NipponTelevision Logo
- JNTO Logo
- JRA Logo
- CanadaStarSecondary Logo
7 Years of Cross-Disciplinary Experience
Prior to becoming a product designer, I studied art and worked as a data analyst. My transition between professions enables me to envision design differently and build experiences that even children can understand.
I believe that diversified perspectives are what make a successful user experience designer.
-
Olympic Logo
-
SpiceFactory Logo
-
USTARLinks Logo
-
Kayac Logo
-
Nintendo Logo
-
Geidai Logo
CASE STUDY
個人向け動画とチャットで未来のアスリートを育てる
引退後のアスリートと、彼らから直接アドバイスを聞いたり、指導を受けたい子供達のためのサービスです。アスリートは短い動画を複数個アップロードし、目的や個性に合わせ動画を出し分けることにより、一人一人への個別指導を効率よく、安価で行えます。
デザインリードとして、UXデザインを中心に自社のUIデザイナー1人、先方のデザイナー2人と4人の体制で本案件を進めました。まずはMVP、そしてアスリートとユーザーが増え始めてからの仕組みを牽引しました。
Kitaete hero section
Role
- UXデザイン
- UIデザイン
- ユーザーインタビュー
Client
レッドホースコーポレーション
Date
2021年(MVPローンチ後、開発中)
引退後アスリートの社会復帰の問題
クライアントには元サッカー選手の知り合いがおり、J1チームで活躍していても、引退後、就職に苦労していました。スポーツ引退後のアスリートの苦悩がこのサービス構想の発端です。
私のオリンピックでのマネジメント経験を生かし、引退後の選手とは何が問題になっているか確認しながら、案件を進めました。
アスリート:ユーザーインサイト
引退したアスリート5人(バレーボール、スケートボード、BMX、ボディボード)と座談会形式で話をして、アスリートが直面する問題をまとめました。
Kitaete Interview
スポーツに関する何かでお金を稼ぎたい
- できたら自分の長年携わってきたスポーツでお金を稼ぎたい。
- 社会人経験が乏しいため、オフィス業務などは難しく、就業可能な職種が限られている。
- 動画編集技術がなく、複雑な動画や動画自体に面白みを魅せることが難しいため、YouTubeなどで動画を載せて広告収入を得ることはハードルが高い。
利用者側:ユーザーインサイト
クライアント先や、自分たちの周りの親子にインタビュー形式の定性的なアンケートを30人取りました。
Kitaete Interview2
オンラインでパーソナルトレーニングができたら嬉しい
- 月謝などで費用が嵩みパーソナルトレーナーは金銭的理由で厳しい。
- 質のいい指導などは都内に集まっているため、郊外、または地方に住んでいる自分たちでは受けることができない。
- ジムが空いている時間には大体仕事をしている。
編集技術がなくたって動画を意味のあるものにする
Kitaete diagram
短い動画を複数用意して、1人1人にあった動画を提供する
アスリートが単発の動画をストックして、お客さんによって今一番ほしい動画を厳選する。そうすると、多くの人にそれぞれにあったスタイルで動画を提供できることになります。
そして、アスリート側の動画への負担を減らすことで、パーソナルトレーニングを受けられない子供たちへ安価で自分にあった指導をもらうことができます。
低価格のサブスクリプションでパーソナルなトレーニングを行う
動画を提供するのみだったらコンテンツ提供者への負担が少なく、低価格に抑えることができます。
そうすると、月単位の契約を導入することが提供者の金銭管理もしやすく、利用者も価格が変動することなく安心となるアイディアになりました。
シンプルなMVPを制作し、β版から課題を洗い出す
一定の需要があることが見込めたため、MVPとしてオンラインでトレーニングを行えるサービスをMVPとしました。
- 動画をアップロードすることが可能
- 公開している動画をサブスクリプションで閲覧可能
- チャットページで非公開動画リンクの送付が可能
プロトタイプとしてβ版をローンチをして、ユーザー体験についてのフィードバックをもらいました。
課題1:目当てのトレーナーが埋もれてしまう
選択肢があまりにもありすぎると選ぶこと自体をやめてしまう行動経済学の研究があります。アナリティクス上で確認したところ、ホーム画面に複数の動画が出てきた時点で離脱につながっていました。
課題2:ユーザーに合わせて動画を出し分けるのが面倒
1人のユーザーでは問題ありませんが、増えてくると動画の出し分けを考えるのに時間がかかるという問題が発生しました。
課題3:SNSのマネジメントが多岐に渡る
様子見で参加したトレーナーからは新サービスと並行して自分のSNSアカウントを持っています。
MVPの課題を解決し、本ローンチ
課題1:目当てのトレーナーが埋もれてしまう
興味でフィルタリングしてからホーム画面へ
ユーザーに迷うことを起こさせないため、ユーザー側のページから、興味関心を聞き出すページをつくり、マッチングしてから動画が見れるようになっております。
プロトタイプ作成後、ユーザーテストを行い、最適な質問数は4つ、ページ遷移や自由記述な回答は必要ないということが分かりました。
課題2:ユーザーに合わせて動画を出し分けるのが面倒
カンタン操作で離脱を防いでレッスン作成
アスリートのコンテンツはレッスンということで同じ動画でも組み合わせで複数個商品を用意できるようにして、ユーザーからは動画がセットになったパッケージを購入できるお得感を出しています。
課題3:SNSのマネジメントが面倒
SNSとの互換性を優先して、戦略を立てられる
アスリートのプロフィールページはInstagramやYouTubeから流用できるようシンプルなものにしております。YouTubeで一度動画を出しているアスリートや、利用ユーザーをシームレスに当サービスに切り替えやすい構造にしています。
本ローンチを終えて
事前登録では16人がトレーナーとして登録してもらいました。ローンチ後、2ヶ月経った今では140人トレーナーとして登録されています。2021年現在ではDAU、MAU、継続ユーザーは、トレーナーとユーザー共に順調に伸ばしています。
有名人を起用した広告キャンペーンを今後に残し、まずは回っている仕組みを安定されている途中になっています。
次に向けて
無料ライブ配信の構想
- トレーナー登録とユーザーが増えましたが、課金につながるにはかなりシビアでした。
- お試し期間を設けましたが終わってからキャンセルするにはハードルが高いとの声があります。
- ユーザー1人1人に対して行うのではなく、人を集めて配信することで時間を短縮できます。
トレーナー側から顧客に売り込み
- 課金につながらず、無料動画のみを楽しむユーザーが多数発生しています。
- 登録のみのユーザーに向けて、トレーナーから売り込めるようにするアイディアを考えました。
- フィルタリングは入っているため、ユーザーのマッチングが可能。
β版からデザインを考える
β版ではストレッチやヨガの登録が多数を収めました。
そのため、フィットネスやボディメンテナンスをイメージするような、デザインはミントグリーンを基調とした落ち着いた色調で、主張しすぎないものにしています。
Typography
Noto Sans JP
Aa123
Colors
-
●
66AAA2
-
●
FF7455
-
●
FFFFFF
Brand Logo
kitaete Logo
アスリートが自分のためにメッセージや動画で応援してくれるという側面にフォーカスを当てたアイコンです。
清潔さとアクティブな印象を与えるロゴを作成し、その横に配置しています。
What I Learned
分かりきったリサーチでもやる意味
ユーザーインタビューを行うことの意義は客観的事実をつくり出すことにあります。前例や、会社内で当たり前になっていることでも、実際にアンケートやインタビューを行うことで、両者間の結束に大きな違いが出ました。
結果は当初の予定通りになったとしても、お互いの目で見てみることは信頼につながりました。
隙間で活きてくるマネジメント能力
当初はデザイン業務のみで開発が進んでからはサポートに留めるというスタンスでしたが、今回顔馴染みではない開発チームと行った時に進捗が思った通りにいかないところがありました。
クライアントへの誠意のある謝罪や、状況説明など、過去の能力が案件を前に進める経験になりました。
アイディアではなく、方向をデザインする
プロジェクトにはつきっきりで行うことが難しく、大元のディレクションを行って途中で後任に委ねることが多々あります。
結論やアイディアで完結するのではなく、「なぜ」それを行いたいのか「どういった」体験をめざすべきなのかをクライアント、チーム内で共有することが大事で、ここさえできていれば自分自身で最後までUXデザインを行う必要はありません。
ユーザーマップやカスタマージャーニー、ペルソナなど制作側とクライアントで共通認識をつくるための資料の展開が早くて感謝しています。
一時期、実装部分で開発と摩擦が生まれることがありましたが、鈴木さんが即座に解決し、マネジメント能力自体にも驚きました。
CASE STUDY
Training Young Athletes With Remote And Personalized Video Lessons
Kitaete is an education and service platform where experienced athletes can customize and upload video lessons to provide personalized training for young athletes in need efficiently and affordably.
As the design lead, I worked with a team of four UI designers. I was responsible for executing the project through concept to deliverable, including research, prototyping, MVP development, and finalized product launch.
Kitaete hero section
Role
- MVP Development
- UX & UI Design
- User Research
Client
Red Horse Corporation
Date
2021
The Problem of returning to society after retirement
The project began with our client’s friend, a former soccer player facing difficulties in job finding after retirement. Recognizing the challenges retired athletes face was the genesis of this service concept.
Through the lens of user experience design, the project goal was to identify the core challenges that retired athletes face and propose ways to assist their career transition.
User Insights: Retired Athletes
The team started the initial research by interviewing five retired athletes from different sports backgrounds (volleyball, skateboarding, BMX, and bodyboarding) to understand their current situation and difficulties.
Kitaete Interview
Research Highlights: Difficulties in Job Sourcing
- Desire to earn income or continue to work that are related to their areas of specialization
- Job variation is limited due to the lack of work experience in the office
- Due to the lack of video-editing skills and resource, it is hard to gain profit from making videos on Youtube
User Insight: Children
We conducted 30 qualitative interviews with parents and children to learn about their learning habits.
Kitaete Interview2
Research Highlights: Personal Training is inaccessible
- Personal training fees are high
- Quality training classes are limited and inaccessible in rural areas
- Students are at school when gyms are open
Compatible Service and App System
Kitaete diagram
Key Feature One: Reusable training contents
On the service platform, professional athletes are allowed to sectionalize training lessons into multiple short video clips and only provide the clips that their clients need.
The service model benefits both sides by providing a platform for athletes to turn their profession into revenue while providing young athletes personalized training at a low cost.
Key Feature Two: Affordable personal training subscription
The platform offers a feature for trainers to set up lesson subscriptions, allowing trainers to manage training plan and fees easier while offering a stable training cost for the trainees.
MVP Launch
A MVP was launched to test our initial service platform, which we narrowed down the features and collected feedbacks to improve the service.
- Uploading videos
- Setting up training subscriptions
- Sending videos on private chat
Problem 1: Videos are buried
Users are overwhelmed by having too many choices of videos as the data shows that the more choices there are, the fewer users are attracted by the contents.
Solution: Interest Filter
By allowing users to set up interests and personal needs, the suggested contents to users are more relevant. All users are welcomed with questionaries on their interests as they enter the app, from which to match lessons and to filter unrelated content.
Our user research also showed that four questions are efficient enough to understand users' basic needs.
Problem 2: Sending videos per user is unmanageable
As the numbers of clients increase, it becomes time-consuming to send videos to everyone individually.
Solution: Lessons Management
Trainers can combine videos from their library to create lessons and offer training plans with different levels and prices. Also, trainers can view all the clients with the same class under their class page.
Problem 3: Adds burden to social media management
It adds burdens for trainers to manage another platform when they have more than one social network accounts.
Solution: Social media account compatibility
A feature is added to synchronize with trainers' social media accounts, allowing trainers' most up-to-date social media content to show on the Kitaete.
After The Launch
During the pre-registration in what year, 16 users signed up as trainers. By 2021, DAU (What does it stand for), MAU, and recurring users are growing steadily for both trainers and trainees.
Our goal is to focus on DAU while executing marketing campaigns that feature influential athletes and celebrities.
Future App Features
Free live streaming
Although there is a significant growth in DAU, but students are only attracted to free contents.
Therefore, the app will add a free live stream feature that helps trainers to gain more exposure to students.
Self-Promotion
Because most lessons are free of charge, trainers are getting hard to gain profit. Therefore, we will consider features that allow trainers to reach out to students and promote themselves directly.
Visual Design
As we noticed from the beta version, a majority of the content is yoga and stretching.
For this reason, the visual identity of the app uses mint green for a sense of healthiness and bodily balance.
Typography
Noto Sans JP
Aa123
Colors
-
●
66AAA2
-
●
FF7455
-
●
FFFFFF
Brand Logo
kitaete Logo
The logo design was inspired by the megaphones often used in sports training.
Combined with a clean and simple style, the logo symbolizes a positive and cheerful message.
What I Learned
The Importance of User Research
Conducting research poses a significant impact in directing the project as it gives us reliable and user-centric feedback. Despite any precedent assumptions, user research was the gap bridge between the designers, our client, and users to understand each other’s perspectives.
Gap Bridging Management
At the beginning of the project, my fellow team and I were challenged to quickly form the design team with members newly joined.
My previous experience in project and team management allows me to bring the team together, motivate each member to contribute using individual areas of expertise, and move projects smoothly and effectively.
Design direction, not ideas
The benefit of working as a team brings interdisciplinary ideas to the project, but only by delegating clear direction can bring everyone's true potential to the project.
It is important to share "why" you want to do it and "what" the experience should be with the client and the team, rather than just concluding with ideas.
I appreciate the quick development of user maps, customer journeys, personas, and other materials to create a common understanding between the production side and the client.
At one point, there was friction with the development team on the implementation part, but Suzuki-san solved it immediately, and I was surprised by his management skills.
CASE STUDY
JR山手線全29駅で展開
壮大なレイドボスバトル
JR東日本とファイナルファンタジーは2017年で共に30周年となりました。本企画では1987年に開通した山手線を舞台に、数万人の山手線ユーザーが参加するレイドバトルを行いました。バトルに加え、デジタルスタンプラリー、プロジェクションマッピング、ツイートバトルと今までにない規模のコラボを展開しました。
UXデザイン周りの企画者として「ツイートする」ことを促進し、山手線中心に状況を報告し合うことのできる企画を設計しました。
当時のTwitterのトレンドの仕組みは同一ハッシュタグを計測していたのもあり、同じハッシュタグのTweetを行うことでクチコミにより、企画が拡散される狙いがありました。
FFYL hero section
Role
- UXデザイン
- プランニング
- ユーザーレポート
Client
JR東日本
Date
2017年
今までにない山手線全29駅を使ったFFとのコラボ
FFYL diagram
モーグリが街を探索したり、レイドボスに山手線新車両を使用したりなど、愛のつまったアイディアと、ツイートを上手く掛け合わせて、バズる、ファンの心を突き動かすアイディアを東日本、スクウェアエニックスへ毎週プレゼンしました。
その結果、山手線全駅と周辺施設を使った全てのアイディアの監修を面白法人カヤックに任せていただきました。
山手線全駅を使う大型キャンペーン
山手線全駅を駅貼り広告、スマホ、トレインチャンネルなどで立体的に展開したこのキャンペーンは、主に4つのコンテンツが楽しめます。
FFYL モバイルスタンプラリー
FFYL Poster
山手線全駅に掲出されたQRコードポスターを読み取ると、歴代のFFキャラクター全30種類を仲間にすることができます。また、各々のキャラクターを何度も訪れることによって、BGMや名シーン動画を入手可能。環状線の特徴を活かし、楽しくまわり続けられるキャンペーンになっています。
FFYL ツイートボスバトル
FFYL Enemy Poster
山手線沿線の計15ヶ所の施設に掲出されたポスターのQRコードを読み取ることで、ユーザー全員で歴代のボスに戦いを挑むことができます。モバイルスタンプラリーで集めた仲間の必殺技をツイッターでつぶやくと、ボスにダメージを与え討伐できるように設計しました。
FUN!TASY!
JR東日本東京支社「FUN!TOKYO!」の取り組みの一環として、山手線各駅周辺のまちあるきスポット30ヶ所を、FFでおなじみのモーグリが楽しく紹介してくれます。
ツイート大行進
特設WEBサイトにスマートフォンでアクセスし、自分の好きな歴代のFFキャラクターを選んで、お祝いのメッセージをツイート投稿できます。
JR新宿駅Suicaのペンギン広場に投影されたプロジェクション画面上に、キャラクターがメッセージと共に大行進します。
Suicaのペンギン広場ではツイート大行進と新宿ミナミルミのイルミネーション、歴代のFinal Fantasyの楽曲を連動させました。
FFYL tweet mapping
山手線の利用を繰り返すうながしていくインセンティブ
山手線各駅に設置されたQRコードを繰り返し読み取ることでインセンティブが変わります。駅や、周辺施設でQRコードを読み取らないといけないため、乗車数が促進できます。
- 1回目:山手線それぞれの駅でキャラクター入手
- 3回目:同じキャラを3回読み取りBGM入手
- 5回目:同じキャラを5回読み取り動画入手
- 全キャラコンプリートでオリジナル壁紙の獲得
- 全キャラ動画コンプリートで豪華景品に応募
Tweetを促進するアイディア
キャラクターや動画を手に入れた後も、周辺施設にいる歴代ラスボスにユーザー全員で戦いを挑んだり、プロジェクションマッピングへメッセージを出すためTweetを促進します。
- 1.歴代ラスボスに攻撃する
- 2.お祝いメッセージを出す
新しく追加された1つのFFシリーズ
Brand Logo
FFYL Logo
15作品分の主人公と、山手線の主役であるe235系を同じ一同に介し、Final Fantasy YL(Yamanote Line)らしさを最大限にしました。
歴代のFinal Fantasyをおさらいし、物語の根幹にあるクリスタルをモチーフにしました。実際のゲーム内のウィンドウに合わせたボタンのあしらいなどグラフィック面でサポートしながら、Final Fantasyのロゴにマッチする「ヒラギノ明朝」で違和感のない画面デザインにしました。
Typography
ヒラギノ明朝
Aa123
Hiragino Sans
Aa123
オンラインとオフラインで楽しめるユーザー体験
オンラインとオフライン何度も横断する仕組みを今回の体験には取り入れました。
アナログ→デジタル
Projection Mapping
山手線29駅を回って、歴代の主人公をQRコードを読み取ることでオリジナルサイト上で獲得できるようにしました。
3回同じQRコードを読み取るとそのキャラクターのBGMが5回読み取ると名場面動画が手に入ります。
デジタル→アナログ
手に入れたキャラを使い、歴代のボスに戦いを挑みます。ボスは山手線周辺のスクウェアが経営する施設の中にいます。
ポスターのQRコードを読み取って、Tweetをすることでボスにダメージを与えることができます。
ボスはレイドバトルになっていて、全てのユーザーで前半後半で1作品2体ずつ、計15体います。
裏ボスとして、山手線e235系も登場。
アナログ→デジタル→アナログ
Projection Mapping
新宿にあるSuicaのペンギン広場では、歴代のキャラクターが行進しているプロジェクションマッピング「ツイート大行進」が流れていました。
キャラクターは特設サイトから投稿でき、メッセージをTweetすることで、大行進に参加することができました。
JR東日本への影響
駅の利用者の統計を見てみると新宿や渋谷など主要駅のQR読み取り回数が多くなる傾向がありました。金曜から急増するため、週末に一気に回るというフローになっていました。
しかしながら駅の利用者数とは関係なく、駅順に歴代キャラを当てはめたため、クラウドの五反田駅など人気キャラにより降車人数が劇的に増える駅も発生しました。
対照的に、歴代ボスには有料の建物に入らないと戦えないものもいたため、数日で倒されるボスと数週間で倒されるボスがいるなど、長期的に展開がある企画になりました。
都区内パスをTwitter上でユーザーが勧め合うなど、ユーザー同士がアドバイスすることにより、物品、乗車数を通して、JR東日本の売り上げへの効果もありました。
What I Learned
大きなプレスのチャンスは逃さない
本コラボはJR、スクウェアエニックスが懇意にしているプレス先だけでなく、ファッションプレスなどこちらが想定していないメディアからも取り上げていただくことができました。
途中から幅広いプレスへのプッシュを追加で行いましたが、大きなコラボの時はバラエティ豊かな方向へ最初から行うべきでした。
レベルデザイナーを企画から入れる
ラストボスのHPは、数万人のユーザーの攻撃に耐えられるように、内部側で調整できるようにしておりましたが、企画開始時にレベルデザイナーを入れることにより、前回のボスのHPの進行が分かるようになり、盛り上がりポイントで公式ツイートを挟むなど、企画全体の盛り上げ具合を調整することができました。
デジタル屋外施策のアナログへの効果
ポスターを掲示した場所により、人気キャラクターの駅、ポスターの掲示場所が分かりづらい駅にはユーザーが滞留するという問題が発生しましたが、現場スタッフへの負担はデジタルスタンプラリーの性質上、追加業務が過度に発生することはありませんでした。
駅員の連携により、問題はただちに解決しましたが、次回デジタルとアナログが交差する大規模な施策は、予め掲出場所などの現場の導線を考える必要があります。
普段、私は大崎駅で駅員をしております。大崎駅のキャラクターは私が高校生時代に遊んだFinal FantasyⅧのスコールでした。
ドット絵のキャラクターを使い、オリジナル駅案内を制作し、楽しんでもらおうとがんばりました。店員一丸となって、FFYLを応援しました。
CASE STUDY
Epic Raid Boss Battles Unfold At All 29 Stations On The JR Yamanote Line
JR East and Final Fantasy both celebrated their 30th anniversary in 2017. In this project, tens of thousands of Yamanote Line users participated in a raid battle on the Yamanote Line, which opened in 1987.In addition to the battle, we developed a digital stamp rally, projection mapping, tweet battle, and other collaborations on a scale never seen before.
As a planner around UX design, I designed a project that promoted "tweeting" and allowed people to report the situation to each other around the Yamanote Line.
At the time, Twitter's trend system measured the same hashtags, and we aimed to spread the project through word-of-mouth communication by tweeting the same hashtags.
FFYL hero section
Role
- UX Design
- Planning
- User report
Client
JR East (East Japan Railway Company)
Date
2017
A Never-Before-Seen Collaboration Using All Stations On The Yamanote Line
FFYL diagram
We presented ideas to JR East and Square Enix every week, such as Moogle exploring the city, using the new Yamanote Line trains as raid bosses, and other ideas that were filled with love, and that were well-mixed with tweets to create buzz and move the hearts of fans.
As a result, we were entrusted with the supervision of all ideas using all Yamanote Line stations and surrounding facilities.
A large-scale Campaign
This campaign, which was developed in three dimensions using station advertisements, smartphones, and train channels at all stations on the Yamanote Line, offers four main types of content.
FFYL Mobile Stamp Rally
FFYL Poster
By reading the QR code posters displayed at all stations on the Yamanote Line, you can get all 30 FF characters of the past. Also, by visiting each character multiple times, you can obtain BGM and videos of famous scenes. It's a fun campaign that takes advantage of the features of the loop line to keep you going.
FFYL Tweet Boss Battle
FFYL Enemy Poster
By scanning the QR codes on posters displayed at a total of 15 locations along the Yamanote Line, all users will be able to challenge the bosses of the past. It was designed so that users can tweet the special moves of their friends collected in the mobile stamp rally to damage and defeat the bosses.
FUN!TASY!
”FUN!TOKYO!" initiative by the Tokyo Branch of JR East, Moggle, a well-known FF character, will happily introduce you to 30 city walking spots around each station on the Yamanote Line.
The Great Tweet March
By accessing the special website with your smartphone, you can choose your favorite FF character of all time and tweet your congratulatory message.
The characters will march with their messages on the projection screen at the Suica Penguin Plaza of JR Shinjuku Station.
In the Suica Penguin Square, the tweet march is linked with the illumination of Shinjuku Minami Lumi and the music of Final Fantasy of the past.
FFYL tweet mapping
Incentives To Encourage Repeated Boarding Of The Train
The incentive varies depending on the number of QR codes placed at each station on the Yamanote Line that are repeatedly scanned. Since the QR code must be scanned at the station and surrounding facilities, the number of passengers can be encouraged.
- 1st time: Get a character at each station of the Yamanote Line
- 3rd time: Read the same character 3 times to get the BGM.
- 5th time: Read the same character 5 times and get the video.
- Complete all characters to get original wallpaper
- Apply for prizes by completing all character videos
Ideas to encourage tweeting
After obtaining the characters and videos, all users can challenge the past final bosses in the surrounding facilities and promote tweeting to send messages to the projection mapping.
- 1. Attack the past final bosses
- 2. Send out a congratulatory message
New FF Series
Brand Logo
FFYL Logo
The main characters of the 15 games and e235, the new train model of the Yamanote Line, are all together to maximize the Final Fantasy YL (Yamanote Line) style.
We reviewed the successful Final Fantasy games and used the crystal as a motif, which is at the root of the story. In addition to the graphical support, such as the use of buttons that match the actual game windows, we used Hiragino Mincho, which matches the Final Fantasy logo, to create a screen design that feels comfortable.
Typography
Hiragino Mincho
Aa123
Hiragino Sans
Aa123
Online And Offline User Experience
This experience incorporates a system that allows users to cross online and offline multiple times.
Analog to digital
Projection Mapping
We made it possible for users to acquire the main character of each generation on the original website by scanning QR codes at 29 stations on the Yamanote Line.
If you scan the same QR code three times, you get that character's BGM, and if you scan it five times, you get a video of a famous scene.
Digital to analog
Use the characters you have acquired to fight against the bosses of the past. The bosses are located in the facilities run by Square around the Yamanote Line.
You can attack the boss by reading the QR code on the poster and Tweeting.
The bosses are raid battles, and for all users there are 15 bosses in total, two in the first half and 2 in the second half.
As a secret boss, the Yamanote e235 train will also appear.
Analog to Digital to Analog
Projection Mapping
At the Suica Penguin Plaza in Shinjuku, a projection mapping "The Great Tweet March" was playing, showing characters from past generations marching.
Characters could be submitted from a special website, and by Tweeting their messages, they could participate in the march.
Impact On JR East
Looking at the statistics of station users, the number of QR readers tends to increase at major stations such as Shinjuku and Shibuya.
However, since the past characters were applied in the order of stations, regardless of the number of station users, there were some stations, such as Gotanda station(Cloud Strife from FF7), where the number of people getting off the train increased dramatically due to popular character.
In contrast, some of the past bosses could only be attacked by entering a paid building, so some bosses were defeated in a few days and others in a few weeks, making this a project with long-term development.
Users recommended each other's passes on Twitter and gave advice to each other, which had a positive effect on JR East's sales through the number of goods and passengers.
What I Learned
Never miss a big press opportunity
This collaboration was picked up not only by the press that JR and Square Enix are close to, but also by media that we hadn't expected, such as the fashion press.
We made additional pushes to a wide range of press during the course of the project, but when it comes to big collaborations, we should have started with a variety of directions from the beginning.
Putting in a level designer from the planning
We were able to adjust the HP of the final bosses internally to withstand the attacks of tens of thousands of users. By including a level designer at the start of the project, we were able to see the progress of the HP of the last boss and adjust the overall excitement of the project by interspersing official tweets at exciting points.
Effects of digital outdoor measures on analog
Depending on where the posters were displayed, there was a problem of users staying at stations with popular characters and stations where it was difficult to find where the posters were displayed, but the burden on the field staff was not excessive due to the nature of the digital stamp rally and the additional work required.
The problem was immediately resolved through the cooperation of the station staff, but the next time a large-scale initiative involves the intersection of digital and analog, it will be necessary to consider in advance the location of the postings and other on-site directions.
I usually work as a station attendant at Osaki Station. The character for Osaki Station was Squall from Final Fantasy VIII, which I played when I was in high school.
I did my best to create an original station guide using the dot-drawing character and make it fun. The entire staff worked together to support FFYL.
CASE STUDY
細田守監督の新作品を彩る4つのデジタル施策たち
細田守監督の新作品「未来のミライ」に合わせて、デジタル技術を合わせた展示を行いました。
プロジェクションマッピングとセンサーによって四季折々の主人公くんちゃんの庭を再現したり、特設ウェブサイトから本展示のデジタルサイネージへメッセージを送ることができたり、スタジオ地図へ正式な技術協力として本案件ではお手伝いをしました。
私は企画とUXデザインを担当し、ミライ展内で何を行うか、公式サイトから実施施策の内容を精査し、ユーザーの流れをデザインしました。
Mirai hero
Role
- UXデザイン
- プランニング
- プロジェクトマネジメント
Client
日本テレビ放送網株式会社
Date
2018年
会場の外にも広がる展示を設計する
Mirai diagram
前回の映画「バケモノの子」展から面白法人カヤックでは担当していますが、今回の施策はより会場を超えて広がるものにしています。
会場に行く前には「OZ応援メッセージ」から展示物の仮想空間へメッセージを送付できます。クイズスタンプラリーを軸にガイドブックとして、ミライ展付近をまわれるような設計がプロジェクトの特徴です。
ミライ展で体験できる4つのインタラクティブブース
プレショー・不思議な庭(『未来のミライ』より)
Projection Mapping
作中のキーポイントとなっているくんちゃん家の庭は、過去、未来を行き来できる不思議な庭です。この庭をさまざまな美しい背景に変わるプロジェクションマッピングで再現しています。線画が本編映像と移り変わる映像表現は、劇場映画では味わえないコンテンツです。
OZ応援メッセージ(『サマーウォーズ』より)
Projection Mapping
作中に登場する仮想世界「OZ」の中に、展覧会の感想やメッセージなどを好きなアバターで自由に書き込めます。特設のWebサイトからメッセージを投稿すると「OZ」の中に自分のアバターが現れ、作品の中に入り込むことができます。
フィギュア製作:アレグロ
ポストショー・細田作品インデックス
Projection Mapping
『未来のミライ』で描かれている系統樹(ファミリーツリー)の概念を用いて、細田守監督の作品を線でつないだインタラクティブコンテンツです。『未来のミライ』をはじめ、過去作4作品の映像を壁面にタップすることで見ることができます。笑う、泣く、喜ぶなど、作品の名シーンがカテゴライズされ、全180種類となっています。
4Kプロジェクター協力:SONY
デジタル・クイズスタンプラリー
Projection Mapping
「未来のミライ展」会場、東京ドームシティ ミーツポート、東京ミステリーサーカス「ミライからの手紙」、池袋パルコ本館7階「未来のミライカフェ」の計14箇所にQRコードを設置し、会場内外からも本展示を楽しめるコンテンツになっています。
展示を盛り上げるユーザー体験
見ているだけではつまらない!
Sensoring
プレショーのプロジェクションマッピングの床には人の足下を検知するセンサーがついています。
山下達郎の音楽に合わせて、刻々と変わる「くんちゃん家の庭」の季節に合わせ、木漏れ日を足で揺らしたり、鯉が足下に寄ってきたり、インタラクティブに楽しめる仕組みを入れています。
仮想空間OZを会場で再現する
会場外にいる方も会場内にいる方も会場内のサイネージにメッセージを投稿できます。
実際のOzのようにバーチャルからリアルへ、SNS上で友達とコミュニケーションをとりながら、離れていてもオンオフを超えて共に楽しめます。
誰かに言いたくなるクイズにする
全28のクイズはかなりの難易度で細田守ファンでないと解けない設定にしました。難しく設定することで「分からない」問題をつくり、仲間うちで話題になるように設計しています。
公式サポーターのアイドル「超特急」に関するクイズが期間限定で登場するなど、クイズを通してミライ展がより長く楽しめるようにデザインしました。
今回の展示を終えて
前回のバケモノの子展とは客層が違い、ファミリー層がメインでした。クイズスタンプラリーを軸にした企画は成功し、リピーターが10%発生しました。
企画後の2019年には長野でサマーウォーズの地上波放映に伴う企画の再利用が可能になるなど前回と比べると長期的な目線で価値のある企画になりました。
What I Learned
体験型の場合はラピッドプロトタイピング
センサーを使った展示の場合は、実際につくってみて触りながら微調整を加えていくのがマストになります。
デザインと資料を早急に作り終えて、プログラマーとともに自然な動作、直感的なアニメーションを追求していく時間がどれくらい持てるかが要になります。
次回案件につながるように整備していく
今回の案件に合わせて、現場で必要になったものを買い足していくことが多く、レーザー水平器や、色見本をこの案件のために買い足しました。
不都合に感じている場合はその場しのぎの対策をとるのではなく、今後、どのように活用できるかを判断して、次の案件に活かせる準備をすることが必要でした。
懇意にしている会社を増やしていく姿勢
クイズスタンプラリーは最後の最後で施策として決まりました。時間がない中で案件に間に合うことができたのは過去の施策で協力したアクリル製造の会社にすぐに連絡できたことでした。
案件を行うごとにお互いに協力して気持ちよく働いていけることが今後の施策の可能性を広げます。
寛人は多種多様なプロジェクトを全力でこなしていました。同時期に時をかける少女の金曜ロードショーのための特別施策も並行で行っていて、本当に体力のあるやつだなと関心しました。
やりきった後はぐったりしていたので、まだまだミライ展は後半のキャンペーンを残していますが、今のうちに夏休みをゆっくりととってください。
CASE STUDY
Four Digital Ways That Colored Mamoru Hosoda's New Work
In conjunction with a Japanese anime director, Mamoru Hosoda's new film "Mirai", we have created an exhibit that combines digital technology.
Projection mapping and sensors were used to recreate the main character Kun-chan's garden in each of the four seasons, and messages could be sent from a special website to the digital signage in this exhibit.We assisted Studio Chizu in this project as an official technical cooperation.
I was in charge of planning and UX design, and designed the flow of users by carefully examining what to do within the Mirai exhibition and the content of the measures to be implemented from the official website.
Mirai hero
Role
- UX Design
- Planning
- Project Management
Client
Nippon Television Network Corporation
Date
2018
Designing An Exhibit That Extends Beyond The Venue
Mirai diagram
Kayac Inc. has been in charge of this project since the last "The Boy and the Beast" movie exhibition, but this time we were trying to make it spread beyond the venue.
Before going to the venue, visitors can send messages to the virtual space of the exhibits from the "OZ Support Message". It is a feature of the project that it is designed as a guidebook with a quiz stamp rally at its core, so that visitors can go around the area even after enjoying the Mirai exhibition.
Four Things You Can Experience At The Mirai Exhibition
Pre-show: The Mysterious Garden (from Mirai)
Projection Mapping
The garden of Kun-chan's house, which is a key point in the work, is a mysterious garden where you can come and go between the past and the future. This garden is recreated by projection mapping that changes into various beautiful backgrounds. This visual expression, in which line drawings change with the main story, is something that cannot be experienced in theatrical movies.
OZ support message (from Summer Wars)
Projection Mapping
You can freely write your messages about the exhibition with your favorite avatar in the virtual world "OZ" that appears in the film. Once you post a message from the special website, your avatar will appear in "OZ" and you will be able to enter there.
Figure production: Allegro
Post-show index of Hosoda's works
Projection Mapping
Using the concept of the family tree depicted in "Mirai", this interactive content connects Mamoru Hosoda's works with lines. By tapping on the wall, visitors can see images from "Mirai" and four other past works. There are a total of 180 cuts of past works, categorized by laughing, crying, and rejoicing.
4K projector cooperation: SONY
Digital Quiz Stamp Rally
Stamp rally
QR codes are placed at 14 locations in total, including the Mirai exhibition site, Tokyo Dome City Meets Port, Tokyo Mystery Circus "Letters from Mirai", and the Mirai Cafe on the 7th floor of Ikebukuro Parco's main building. There are a total of 28 questions to enjoy this exhibition from inside and outside the venue.
User Experience To Enhance The Exhibition
It's boring to just watch!
Sensoring
The floor of the pre-show projection mapping is equipped with sensors that reacts people's feet.
To match the ever-changing seasons of Kun-chan's Garden with the main theme, we have included a system that allows visitors to enjoy interactively, such as swaying the sunlight through the trees with their feet, or having carp come close to their feet.
Recreating the virtual space OZ in the venue
Those who are outside the venue and those who are inside the venue can post messages on the signage inside the venue.
Just like the real Oz, you can communicate with your friends on social networking sites and have fun together, even if you are far away from each other.
Super difficult quizzes that will make you want to tell someone
All 28 quizzes are set to be so difficult that only Mamoru Hosoda fans can solve them. By making the quizzes difficult, we have created questions that are "impossible to understand" and designed them to become a topic of conversation among friends.
In addition, quizzes on an idol group, an official supporter of the exhibition, are available for a limited time only.
After This Exhibition
The audience was different from the previous exhibition, this time it was mainly families. The idea based on the quiz stamp rally was a success and generated 10% repeaters.
After the project, in 2019, it will be possible to reuse the project due to the terrestrial broadcast of Summer Wars in Nagano, making the project more valuable from a long-term perspective compared to the previous exhibition.
What I Learned
Rapid prototyping for hands-on experience
In the case of a sensor-based project, it is essential to actually build it, touch it, and fine-tune it.
The key is to finish the design and materials as soon as possible, and to have enough time to work with the programmer to pursue natural behavior and intuitive animation.
Maintaining tools for the next project
For this project, we bought new tools that we needed on site, such as a laser leveler and color swatches.
Rather than taking stopgap measures when we felt something was inconvenient, we needed to determine how we could utilize it in the future and be prepared to apply it to the next project.
Getting companies with which we are familiar
The quiz stamp rally was decided as a last minute measurement. The reason we were able to complete the project in time was that we were able to immediately contact the acrylic manufacturing company that had cooperated with us in past projects.
Being able to cooperate and work comfortably with each other on each project expands the possibilities for future projects.
Hiroto was doing his best to work on a wide variety of projects. At the same time, he was also working on a special project for the TV Show, and I was impressed by his physical strength.
He was limping after he had done it all. We still have the second half of the Mirai exhibition campaign left, but please take a relaxing summer vacation while you can.
CASE STUDY
ARTとchemistの可能性を探った実験的団体の発足
私の出身校である東京芸術大学と、東京大学のメンバーで有志をつのり、アートとサイエンスを合わせた団体を発足しました。
創立者の一人として、団体の意義づけ、企画、デザインも含めた総合的な戦略を立てていました。イケていない、暗い、化学を楽しくて華やかなフェスなんだというイメージ改革を進めました。
hero section
Role
- 企画
- デザイン
Date
2019年
閉じた学問である化学を広い世界へ
アートの世界と研究の世界で面白い共通点があります。それは「技術、文脈にかかわらず、今までにない新しい発見が評価される」というものです。
「分子」は複数年に跨ぐ研究が不可欠ですが、成果が出づらく、年々学生による化学離れが進んでおりました。
ARchemisT diagram
同じ志で集まった私たちは「新しい価値」をどうにかして、異分野を掛け合わせることで生み、研究だけでなく、新たな形で評価されるものが生まれる土壌をつくれないかという思いで、団体の発足を試みました。
クラウドファウンディングで資金を集める
ARchemisT Cloudfounding
まず手始めに、私たちは同士を探すことにしました。初期メンバーは芸大卒の私とブラウン大学の仲間、そして、東大教授2名の3人でした。
化学専門のクラウドファウンディングサービス「achademist」を通して、同じようにアカデミック出身、化学そのものの素晴らしさを外に発信したいメンバーを募集しました。
結果的に5日間で68人もの支援をいただき、ARchemisTの公式サイト、アート&サイエンスを芸術家、化学者とともに話し合うイベントを開催することができました。
ARchemisT Members
化学を楽しいお祭りにする
Brand Logo
ARchemisT Logo
サイエンスとアートが混ざり合うフェスにしようという願いを込めて、太めでクールな書体を1から作成しました。分子をイメージした丸と直線の組み合わせをベースにしています。
ARchemisTの活動は多岐に渡り、化学の枠をどれだけ伸ばすかを実験的に行っています。
どんな活動にも合うロゴ制作が今回のプロジェクトの鬼門でした。
Typography
Noto Sans
Aa123
Colors
-
●
222222
-
●
FFFFFF
サイエンスという何にでもなれて、何にも染まっていない色として黒を基調色として選びました。
コンテンツそのものの面白さを際立たせるため、フォントも主張が激しくない上に、多言語展開を行っている「Noto Sans」を使用しました。
ARchemisTの活動内容
化学者が経営するサイエンスバーFractal。理系のバックグラウンドを持った作者がつくる構造式のアクセサリー。ノーベル賞を取った分子をモチーフにしたカプセルトイなど、日々アイディアを出し合っています。
化学×バーテンダー
ARchemisT Science Bar
サイエンスバーFractalは研究室が併設されていて、化学者にも支持されています。
化学×ファッション
ARchemisT Accesory
東大生の譲によるアクセサリーブランド「化学屋」。デパート内にも出品しています。
化学×おもちゃ
ARchemisT Gacha
第一弾ノーベル賞編は開始1週間で300個が売り切れ、続編が期待されています。
化学団体を設置したことによる影響
団体を設立することで、雑誌編集者やメーカーから問い合わせが相次ぎましたが、イラストレーターだと思われたり、団体自体の認識がこちらとはずれていることが多々ありました。
また、新しく加わったメンバーの理想が強すぎたり、今後は来た話をどう意味のあるものにしていくかが課題になっています。
What I Learned
団体の目的をデザインする
全くのゼロから何かをはじめる時はデザイナーの役割がかなり重要になり、多岐に渡るようになります。
コンテンツの制作や、文章の構成、さらにはどのように集客するべきかなど、ARchemisTをはじめるには最低限何が必要なのかを代表やメンバーと数ヶ月に渡り議論したのを覚えています。
必要なメンバーをどう増やしていくか
初期の初期からいたため、メンバーが増えていく様を見ていました。化学者からバーテンダー、さらには教授からアーティスト、3Dデザイナーまで多種多様な職能とのコミュニケーションはまさに外国。
それぞれの役割がどのようにするか、また初期構想と軌道に乗ってからのメンバーの構成などを改めて考え直す必要があったりチームビルドの醍醐味を味わいました。
謝罪する時は丁寧に謝罪する
イベントのシステムに「Peatix Inc.」を使用していましたが、イベント終了後にPeatixが個人情報の流出を発表しました。
迅速で、周りと足並みを揃え、尚且つユーザーが納得する対応が必要になり、即座にメンバーと議論を重ねた上で1時間以内に謝罪文をサイト上に載せました。
幸い、クレームや返金騒動には発展せず、誠意のある対応ができたのではないかと思います。
ARchemisTの構想からクラウドファウンディングまで約1年間,デザインからライティング,企画の趣旨までトータルに指揮を取ってくれました.メンバーが増えた後にそれぞれの主義主張が違い,統率をとるのが大変だったかと思いますが,寛人がいないとARchemisTの発足は不可能でした.
CASE STUDY
An Experimental Organization To Explore the Possibilities of ART and chemist
Members of the University of Tokyo and Tokyo University of the Arts, where I graduated from, volunteered to start an organization that combines art and science.
As one of the founders, I was in charge of creating a comprehensive strategy that included the significance of the organization, planning, and design. We have also reformed the image of festivals related to chemistry from being uncool and gloomy to being fun and spectacular events.
hero section
Role
- Planning
- Design
Date
2019
Bringing Chemistry, A Closed Discipline, To The World At Large
It takes years to properly research "molecules", however it is difficult to get results right away, so students have been turning away from chemistry year after year.
There is an interesting similarity between the world of art and the world of research. It is that "new discoveries that have never been made before, regardless of technology or context, are valued.
ARchemisT diagram
As like-minded individuals, we created an organization to establish "new values" by somehow combining different fields and our aim was to create a soil not only for future research, but for something that would be valued in a new way.
Raise Funds Through Crowdfunding
ARchemisT Cloudfounding
To start with, we decided to look for like-minded people. The initial members were myself, a graduate of Tokyo University of the Arts, a fellow student from Brown University, and two professors from the University of Tokyo.
Through "achademist", a crowdfunding service specialized in chemistry, we recruited members who also came from an academic background and wanted to share the beauty of chemistry with the world.
As a result, we recruited 68 supporters in 5 days and were able to launch the official ARchemisT website together with an event to discuss artists and scientists to discuss art and science with other professionals.
ARchemisT Members
Rebranding Chemistry As A Fun Festival
Brand Logo
ARchemisT Logo
We created a bold and cool typeface from scratch with the hope of making this a festival where science and art mix. It is based on a combination of circles and straight lines that resemble molecules.
ARchemisT's activities are multifaceted, and we are experimenting to see how far we can stretch the boundaries of chemistry.
Typography
Noto Sans
Aa123
Colors
-
●
222222
-
●
FFFFFF
I chose black as the key color, as it is a color that can be used for everything, but at the same time it is not tainted by anything.
In order to make the content itself stand out, we used "Noto Sans," a font that is not too strong and is available in multiple languages.
The Activities Of ARchemisT
Fractal is a science bar run by a chemist. Ideas, such as capsule toys based on Nobel Prize-winning molecules, are exchanged on a daily basis.
Chemistry × Bartending
ARchemisT Science Bar
There is also a lab attached to Science Bar Fractal which is favored by chemists
Chemistry × Fashion
ARchemisT Accesory
”Kagakuya" is a brand of accessories created by Yuzuru, from Tokyo University. It is also displayed in a department store.
Chemistry × Toys
ARchemisT Gacha
The first edition "Nobel Prize" sold out 300 units in the first week and this trend is expected to continue.
The Impact Of Establishing The Organization
We received a number of inquiries from magazine editors and manufacturers, however they often thought we were illustrators or had a different perception of the organization itself than we did.
Furthermore, some of the newly joined members have too strong ideals, and in the future our main challenge will be how to turn regular stories into meaningful ones.
What I Learned
Design the purpose of the organization
When starting something from scratch, the role of the designer becomes quite important and multifaceted.
I remember having a discussion with the representatives and some other members for several months about the minimum requirements to start ARchemisT, such as content creation, writing structure, and how to attract customers.
How do we increase the number of members we need?
Having been there since the early days, I have watched the number of members grow. Communicating with people from various backgrounds, from chemists to bartenders, and even professors, artists, 3D designers, sometimes feels foreign.
We had to rethink not only how each role would be played, but how the initial concept of our team composition would change after the project got underway, and that is when we experienced the true joy of team building.
When you apologize, do it politely
Peatix Inc. was used as the system for the event, but afterwards Peatix announced that personal information had been leaked.
Keeping in line with others, we needed to address the matter quickly and in a way that would satisfy the users. We immediately discussed the issue with the members and posted an apology on the site within an hour.
Fortunately, the situation did not develop into a complaint or refund fiasco, and I believe that we were able to respond sincerely.
From the conception of ARchemisT to the crowdfunding project, he has been in total charge for a year. His responsibilities would include writing, designing and determining the purpose of projects. Every new member had their own principles and arguments, and it must have been difficult to control and lead the group, but without Hiroto, it would have been impossible to launch ARchemisT.
CASE STUDY
カナダと地元の学生を
つなぐための自走できる
教育サービス
カナダの有名大学の現役大学生が、海外の大学に行きたいカナダ外の高校生に直接受験のアドバイスができるサービスのデザインを行いました。
学生同士のプラットフォームだけでなく、ローカルのエージェンシーが新しい土地で商売をできるように、パッケージ販売を行い、BtoC、BtoBにも広がりを見せるサービスに仕上げました。
私はカナダのデザイナー2人、中国のデザイナー2人、フランスのデザイナー1人を取りまとめるデザインリードとして、カナダ内で留学エージェンシーを考えたい人、学生向けのハブになるプラットフォームを指揮しました。
USTARLinks hero section
Role
- UXデザイン
- UIデザイン
- ユーザーインタビュー
Client
Madoor Inc.
Date
2019年
中国親子のユーザーインサイト
CEOが北京からバンクーバーに大学留学する時に苦労したという話からはじまったこのプロジェクトはターゲットを中国の親子に設定しました。
3組の子供を留学させた親子の話から、教育のチャンス、サービスから利益を出る可能性を探りました。
また、インタビューだけでなく、実際の留学生10人と一緒に大学を選ぶ時のフローを可視化し、ユーザーが求める機能は何かを精査しました。
USTARLinks interview
親:必要なものは信頼できるエージェント
- 下手なサービスに手を出すより、信頼と実績のあるエージェンシーにお願いしたい。
- 行きたい大学があるというよりも、自分が現在ある成績で最大限にいける大学を探している。平均で20箇所は大学に応募する。
- 最後まで面倒みてくれることが保証されているなら100万円単位で出すことは厭わない。
子:できるなら大学生に直接話を聞いてみたい
- エージェンシーに言われた通りの大学に行くのが良いのか悩んでいる。
- 身内がいない大学にはどうやって話を聞けばいいのか分からない。
- 受験勉強で留学エージェンシーに自分は行く時間がない。
留学斡旋会社のユーザーインサイト
USTARLinks interview2
中国の親御さんたちはエージェントの利用以外ありえないということで、アメリカをベースに活動している教育エージェンシーに話を聞くことになりました。
新規参入したいがすでにある会社には勝てない
- 新規で顧客を広げたくてもすでに信頼のあるエージェンシーに太刀打ちするには厳しく、宣伝費などの費用がかかる。
- 新しく会社を立ち上げるには難しい産業なので、ライバル等は数年経たないと出てこない。
- 大学によってエキスパートが違い、得意な分野などスタッフが幅広い上に出入りが激しく管理が大変になる。
Wireframeを制作する
高校生と大学生のマッチング
まずは海外の大学に行きたい高校生に向けて、カナダの大学生とマッチングできるシステムをつくりました。
「自分の興味関心から行きたい大学を高校生が自分で選ぶこと」に需要を汲み取りました。
エージェンシーと高校生(親)のマッチング
ustar diagram
中国にいる大手のエージェンシーがバンクーバーで新規顧客を獲得する場合や、カナダのエージェンシーが中国で顧客を獲得することができます。
「自分の子供の得意分野で信頼がおけるエージェンシーを選びたい」というインサイトを可視化しました。
今回のサービスでは、受験エージェンシー、カナダ有名大学の学生、カナダ外の高校生と3パターンのプラットフォームに行き着きました。
Wireframeから出てきた課題
課題1:会社の大きさでマネジメントが変わる
エージェンシーは大企業から個人によってもかなりの幅がありました。特に人を増やすことによって、管理者がバラバラになって管理ができなくなるのではないかという危惧が出てきました。
課題2:今後の受験業界に付いていくのが難しい
従業員登録の画面から「多種多様の従業員を集めたいけど、方法が分からない」というインサイトが出てきました。
課題3:チャットで質問を受けると時間が取られる
マッチすることでチャット機能を入れておりましたが、大学生からは大学もあり、四六時中返信することはできないという意見が出てきました。
課題4:デザイナーが多岐に渡り修正が厳しい
3人別のデザイナーで突貫工事での制作となったため、デザインがバラバラになってしまいました。
ユーザー体験での解決策
課題1:会社の大きさでマネジメントが変わる
従業員の関わり方をフルカスタマイズできる
USTARLinks settings
ユーザーのアクセス権限をフルカスタマイズすることによって、正社員・アルバイト等を分けたり、自由な使い方ができるようにしています。
課題2:今後の受験業界に付いていくのが難しい
データによる必要なコンサルタントの可視化
USTARlinks company profile
多様化している受験に合わせて、エージェンシーが持っているエキスパートをデータ化できるようにしてます。また、データ化した情報により、自動で顧客とマッチができるようにして、ビジネスの機会を逃さないようにしています。
また、大学生をスカウトする機能を入れて、エージェンシー側と大学生側もつながるようにしています。
課題3:チャットで質問を受けると時間が取られる
質問単位でコミュニケーションを取る仕組み
高校生は個別に質問するという形式を取ることで、四六時中大学生の時間を取るということをなくしました。
1つの質問に微額課金にすることで、お金のやりとりの透明化を図っています。
課題4:デザイナーが多岐に渡り統一ができない
コンポーネントを活用し、レベルを3段階用意
USTARlinks components
展開がしやすくなるようにAtomic Designを採用し、デザインのばらつきを抑えました。
機能を増やす場合は、複数のコンポーネントを組み合わせて行うようにして、プログラマーにもユーザーにも使いやすいデザインになるよう仕上げています。
デザインの統一
誰にでもどんな会社にも使いやすいデザインをめざしました。アカデミックな雰囲気には渋い色がマッチするのですが、ビビットな色をぶつけてみた所、新規性とアカデミック性がバランスよいピンクでも赤でもない、心地よいオリジナルな色が生まれました。AppleのSFはニュートラルで柔軟なフォント。そして開発者たちも盛り上げるスタイリッシュなアイテムです。
Typography
USTARLinks font
Colors
-
●
FF5057
-
●
FF989A
-
●
FFFFFF
Brand Logo
USTARLinks Logo
すべでの学生からの海外の大学生をイメージするのは、この角帽。シンプルで強い形と、オリジナルなビビットな色で印象強く仕上がっています。
サービス開始から半年経って
留学エージェンシー数が50社を超えて、扱える会社数が増えてきました。個人事業者が登録者としては多く、大きくジャンプアップできる段階には今はありませんが、事業を畳まなくても問題ない状態ではあります。
中国政府は国内のエージェンシーに規制をかける動きにあり、カナダでの展開が増えてくる算段になっており、今後の展開が期待できます。
次に向けて
クレジット機能の実装是非
- 現状お金のやり取りはブロックチェーンにて仮想通貨「スターコイン」で行っています。
- クレジット機能の実装は今のメンバーでは工数がかかり、優先度が高いものを先に開発するべき。
- クレジット機能の実装でエージェンシーと大学生の間口は広がります。
質問という資産の共有
- 過去の別のユーザーが行った質問を閲覧することを可能にするべきかどうか。
- 他ユーザーの質問を微額課金で閲覧可能にするか。
- 大学生は一回の回答で複数回お金を稼げるのでメリット。
What I Learned
スタートアップの環境に身を置いてみる
CEOの決定や、方向性を定めた時に大掛かりにユーザーフローが変わることがスタートアップでは多々あります。1からベースをつくるのではなく、今までのフローをどうやって利用するか、そして、無理に合わせるのではなく、最大限にアイディアが昇華できるよう捨てることも大事だと気付きました。
国際的な文化の違いを理解する
マネージャーがフランスから来ており、アジア文化とは大きく違い、個を大切にする文化と、和を大切にする文化で、意思疎通に問題が発生したケースがありました。
常に案件のことを考えてしまいがちですが、プライベートを重点に置く彼女の働き方は日本人には眼から鱗でした。
複数のデザイナーでシステムを共有する
根幹のディレクションとUXを考えてはおりましたが、一人では手が回らない規模のプロジェクトだったので、複数システムを3人で回す必要がありました。
デザインシステムを精錬させることが、それぞれのデザイナーが自走している案件では最も大事なことでした。
Hiroは本当にHeroでした。チームが煮詰まった時に問題を解決をするアイディアを思いついたり、刻々と変わるスタートアップの状況にも着いてきてくれて、職能を超えたサポートをしてくれました。
ビジネスだけでなく、アニメーションを作成したりちょっとしたアクセントもこだわる人間です。
CASE STUDY
A Platform Connects Canadian Universities and Global Students
USTARlinks is a service platform that allows Canadian university students to give educational advices to high school students outside Canada who want to attend universities abroad.
More than just a platform facing students, packaged services are open for local agencies to expand their business to BtoC and BtoB.
As the design lead with two other Canadian designers, we were responsible for designing a bridging hub between education agencies and students who consider to study overseas.
USTARLinks hero section
Role
- UX & UI Design
- User Research
Client
Madoor Inc.
Date
2019
User Insights: Chinese Families
USTARlinks has a primitive goal to help Chinese families with children. It was all initiated by the CEO's own challenges in moving to and studying abroad in Vancouver from China.
During the first stage of user research, three parents were interviewed for their background of sending their children to study overseas. This stage was significant as we explored any potential educational opportunities and business models.
In addition to the interviews, we also conducted user journey maps with ten international students, learning how they chose universities and educational needs.
USTARLinks interview
Parents: A Need for Reliable Agency
- When it is about education, parents want work with agencies with a well-trusted and renowned background.
- Rather than specific schools, they prioritize applying for schools that accept their children’s current GPA. They apply to an average of 20 schools.
- Parents are willing to pay $8,700 USD for an agency that promises to help until they settle down with a satisfied school option.
Children: Getting direct guidance from actual university students
- Children prefer hearing from the personal experience of university students rather than an education agency.
- Communication with the schools is more challenging when they do not have any relatives locally.
- Students are extremely busy preparing for exams, leaving them not enough time to communicate with education agencies.
User Insights: American Agencies
USTARLinks interview2
Chinese parents will reach out to education agencies based in the US when they have no choice but to find agents.
Entering the education industry is competitive for new agencies
- New companies need to invest hugely in advertisements to compete with reputable agencies and expand their client connection.
- It is a difficult industry to start a new company, so it takes years to identify who their competitors are.
- Every university comes with its expertise, advancements, and human connections, making management very hard.
Wireframing
Matching high school students and university students
First, we created a system that allows high school students in Asia to connect with Canadian students.
As we recognized the importance of passion and interests for students, students should be able to choose their schools based on interests.
Matching Agencies and Families (Parents & Students)
ustar diagram
Through the platform, renowned agencies in China can reach out to clients in Vancouver, while Canadian agencies can acquire clients in China.
Based on our research, we have concluded our primary user insights: Families are looking for a trusted agency to assist in helping children to find their areas of expertise.
The insight led us to form three different connection points that shaped our final platform structure - exam agencies, students from well-known Canadian universities, and high school students from outside Canada.
Problems From Wireframe
Problem 1: Management system lacks flexibility
To our surprise, the scale of agencies varies from big corp to one-man-army. The existing management system is too simple to accommodate different agencies’ needs.
Solution: The account owner has control over how employees interact with the system
USTARLinks settings
The account owner can customize employees' accessibility to the system based on their types of employment.
Problem 2: Keeping up with the ever-changing industry
The feedback from the employee registration page shows us that "agencies want to attract a wide variety of employees, but they do not know how."
Solution: Visualize key information
USTARlinks company profile
In order to keep up with the diversification of the examinations, we have converted relevant experts from different agencies into data, building a database that can automatically match students with the corresponding agencies.
In addition, a feature for reaching out to university student scouting is added for the purpose of connecting agencies with students.
Problem 3: Delayed response
Parents expect immediate responses from college students. The latter, however, finds it hard to keep track of inquiries from those living in a different timezone.
Solution: Q&A
An alternative format for getting guidance would be allowing high school students to ask questions individually on a Q&A forum. University students get paid for every answered question, making the profit gaining transparent for both sides.
Students pay for each questions not the person, it makes the cash flow clear.
Problem 4: Too many designers, too many revisions
As the design lead, I realized that having three designers working on the same project within a limited time can cause chaos if team management is not structured.
Solution: Utilize UI Components
USTARlinks components
We adopted Atomic Design Methodology to keep the design consistent. We broke the design system into groups of components, which can later be combined together to create new features.
Unifying The Design
To stand out from our competing brands, I decided to stay away from conventional educational palettes and explore underused options instead. Finally, I came up with salmon pink, a color that speaks of novelty, youthfulness, and care.
Typography
USTARLinks font
Colors
-
●
FF5057
-
●
FF989A
-
●
FFFFFF
Brand Logo
USTARLinks Logo
The logo itself is a graduation cap that represents educational accomplishment.
Six Months After The Launch
USTARlinks has helped over 50 agencies reach out to potential clients.
Recently the Chinese government issued a nationwide ban on after-school tutoring. USTARlinks could come in handy for Chinese parents seeking tutors outside of China; thus, the number of users is expected to increase.
Future Platform Features
Credit System Implementation
- Currently, users can only make payments with virtual currency "Star Coin."
- Implementing a credit system requires a lot of human resources, but the current stage of the project has other priorities in developing the platform.
- The credit system can attract more clients as it becomes more convenient and accessible.
Whether to make questions public
- Should we allow all users to see existing questions?
- Should users be able to view existing answers for a fee?
- University students could gain more profit from their answers.
What I Learned
Ability to adapt quickly
Startups tend to find their way out through trial and error. For designers, it means a constant change in project scope and design direction. Thus, it is important to utilize existing resources rather than creating everything from scratch. Sometimes it is necessary to cut down resource- draining features to ensure MVP delivery.
Understanding cultural differences
I had problems communicating with my French manager, a culture that is very different from Asian ones. Europeans tend to value individuality while Asian cultures prefer harmony.
It is easy to always think about the project, but her way of working, focusing more on her personal life, was eye-opening for Japanese people.
Sharing a design system
When designers collaborate, it is crucial to set up a guideline or design system that all parties can follow.
Hiro was a real hero. He came up with ideas to solve problems when the team was stumped, kept up with the ever-changing startup situation, and provided support beyond his job function.
He is not just a business person, also an animator and a stickler for the little accents.