910アプリ
ユーザーがStravaを同期するよう促すシームレスな体験を作成する
910アプリ
ユーザーがStravaを同期するよう促すシームレスな体験を作成する
役割
役割
UI/UXデザイナー
UI/UXデザイナー
約910
約910
910 (ナイテン)、インドネシアのウィジャヤ アルタ マンディリ グループに属する主要なランニングシューズブランドの1つで、国際的な靴の大手メーカーの1つです。
910 (ナイテン)、インドネシアのウィジャヤ アルタ マンディリ グループに属する主要なランニングシューズブランドの1つで、国際的な靴の大手メーカーの1つです。
数字による影響
数字による影響
シームレスなオンボーディング体験の構築により、ユーザーがStravaアカウントを同期してチャレンジに参加する大幅な増加が見られました。これは、アプリの最初のローンチのための強固な基盤となりました。
主な成果 (2025年11月):
総ダウンロード数3,051から、1,384ユーザーがStravaアカウントを同期しました — 同期率45%。(結果)
その1,384人の同期ユーザーのうち、320以上がチャレンジに参加し、コンバージョン率23%を達成しました。
シームレスなオンボーディング体験の構築により、ユーザーがStravaアカウントを同期してチャレンジに参加する大幅な増加が見られました。これは、アプリの最初のローンチのための強固な基盤となりました。
主な成果 (2025年11月):
総ダウンロード数3,051から、1,384ユーザーがStravaアカウントを同期しました — 同期率45%。(結果)
その1,384人の同期ユーザーのうち、320以上がチャレンジに参加し、コンバージョン率23%を達成しました。
When the CPO extended the request from travel consultants to consumers, I used storyboards of both journeys to decide what stays shared and what adapts. The result was one capability with entry points fitted to each context, built from existing components.
When the CPO extended the request from travel consultants to consumers, I used storyboards of both journeys to decide what stays shared and what adapts. The result was one capability with entry points fitted to each context, built from existing components.
背景ストーリー
背景ストーリー
2024年に戻ると、910はモバイルコマースアプリを構築する野心を抱いています。ICUBEとのコラボレーション。私はシニアUI/UXデザイナーのラディティア・パムンガスと共にプロジェクトに参加していました。
このプロジェクトの開始以来、長期的な目標の一つはStravaとの同期機能を導入することでした。
このアイデアは、地元のランナーが自身のStravaアカウント（ランニングトラッキングアプリ）を910アプリに直接接続し、さまざまなチャレンジに参加できるようにすることです。
これらのチャレンジは後にランニング結果を生成し、累積されてリーダーボードに表示されるため、ランナーは他の人と自分のパフォーマンスを比較することができます。
2024年に戻ると、910はモバイルコマースアプリを構築する野心を抱いています。ICUBEとのコラボレーション。私はシニアUI/UXデザイナーのラディティア・パムンガスと共にプロジェクトに参加していました。
このプロジェクトの開始以来、長期的な目標の一つはStravaとの同期機能を導入することでした。
このアイデアは、地元のランナーが自身のStravaアカウント（ランニングトラッキングアプリ）を910アプリに直接接続し、さまざまなチャレンジに参加できるようにすることです。
これらのチャレンジは後にランニング結果を生成し、累積されてリーダーボードに表示されるため、ランナーは他の人と自分のパフォーマンスを比較することができます。
A family of two adults and two children applying for a UK Standard Visitor Visa had to edit the profile and switch back and forth to check each person. They could never see all four together.
A family of two adults and two children applying for a UK Standard Visitor Visa had to edit the profile and switch back and forth to check each person. They could never see all four together.
主な目標
主な目標
ユーザー（特に地元のランナー）を説得して、Stravaの同期を通じて910からの通知を有効にし、チャレンジを受け入れることが、機能のクライアント体験の重要な部分になります。
ユーザー（特に地元のランナー）を説得して、Stravaの同期を通じて910からの通知を有効にし、チャレンジを受け入れることが、機能のクライアント体験の重要な部分になります。
Before designing, I mapped both journeys in storyboards: Travel consultants preparing requirements while serving a customer, and consumers exploring requirements before buying.
I sketched the scenarios on paper and used AI to turn them into clearer storyboard visuals. The storyboards served as a design exploration tool, helping me reason about possible workflows rather than validate them through formal user research.
Scenario exploration, not direct user observation.
Scenario exploration, not direct user observation.
When the CPO proposed bringing the capability to SPUN’s consumer side as well, the storyboards showed what the two journeys shared and where they had to differ.
When the CPO proposed bringing the capability to SPUN’s consumer side as well, the storyboards showed what the two journeys shared and where they had to differ.
The work moved through a two-week design sprint, with two design reviews each week. This cadence made it important to communicate design rationale clearly, resolve trade-offs quickly, and align with Engineering and stakeholders throughout the process.
The team had a two-week sprint, with two design reviews a week, so each decision had to hold up the first time.
私たちは製品や関連ビジネスモデルの販売に焦点を当てていないため、ユーザーが私たちの910アプリでのオンボーディング中にStravaを同期できる方法にのみ焦点を当てています。
私たちは製品や関連ビジネスモデルの販売に焦点を当てていないため、ユーザーが私たちの910アプリでのオンボーディング中にStravaを同期できる方法にのみ焦点を当てています。
ミニ研究が始まりました：ナイキ
ミニ研究が始まりました：ナイキ
クライアントはナイキをベンチマークの参考として提供しました。その方向性を念頭に置き、私はミニリサーチスタディを開始しました。
クライアントはナイキをベンチマークの参考として提供しました。その方向性を念頭に置き、私はミニリサーチスタディを開始しました。
Consumers see an outline banner on the service detail page. It opens a pop-up for applicant details that shows the number of applicants alongside the price, so people can see how group size affects what they pay.
Consumers see an outline banner on the service detail page. It opens a pop-up for applicant details that shows the number of applicants alongside the price, so people can see how group size affects what they pay.
Both entry points were built from components already on the service detail page, so the new capability didn’t introduce a new component and customers already knew the flow.
Both entry points were built from components already on the service detail page, so the new capability didn’t introduce a new component and customers already knew the flow.
調査結果 ミニリサーチ
調査結果 ミニリサーチ
私はミニリサーチを行い、3つの重要な側面が浮かび上がりました:
1. コンテンツ
コンテンツは一連の質問を通じてパーソナライズされています。
コピーは温かく、歓迎するものであり、個人的で、ユーザーが体験にスムーズに入れるように手助けします。
2. 体験
ユーザーは自分のショッピングの好みに対する完全なコントロールを得られます。
プログレスバーは、オンボーディングフローにおいてどの程度進んでいるかを理解するのに役立ちます。
オンボーディングを完了した後も、ユーザーは製品を探索するための検索ページへと導かれます。
3. インタラクション
スムーズなアニメーションは、ユーザーが一つの画面から次の画面へシームレスに移行するのを助けます。
要約すると、ナイキのオンボーディングはユーザーが自分の好みを形作る力を与え、最終的にはよりパーソナライズされたショッピング体験を創出します。
私は簡単な研究を行い、3つの重要な側面が浮かび上がりました:
1. コンテンツ
コンテンツは、一連の質問を通じてパーソナライズされています。
コピーは温かく、歓迎的で個人的な印象を与え、ユーザーが体験にスムーズに入る手助けをします。
2. 体験
ユーザーは自分のショッピングの好みを完全にコントロールできます。
プログレスバーは、オンボーディングフローのどの段階にいるかを理解するのに役立ちます。
オンボーディングを完了した後も、ユーザーは製品を探索し始めるために検索ページに誘導されます。
3. インタラクション
スムーズなアニメーションは、ユーザーを次の画面へシームレスに移行させるのに役立ちます。
要約すると、Nikeのオンボーディングはユーザーが自分の好みを形成することを可能にし、最終的によりパーソナライズされたショッピング体験を創出します。
On desktop, I added a side navigation on the right in both SPANVISA and SPUN that lists every applicant. Travel consultants and customers can jump between requirement lists without leaving the page.
On desktop, I added a side navigation on the right in both SPANVISA and SPUN that lists every applicant. Travel consultants and customers can jump between requirement lists without leaving the page.
The same panel holds an Add action and lets users edit each applicant’s details. Managing the group and reading the requirements happen in one place.
The same panel holds an Add action and lets users edit each applicant’s details. Managing the group and reading the requirements happen in one place.
On mobile, the applicant list moves into a dropdown under the Documents tab. Selecting an applicant takes users straight to that person’s requirements, so they don’t have to scroll past everyone else’s to find them. The Add more applicants action sits at the bottom of the same list.
On mobile, the applicant list moves into a dropdown under the Documents tab. Selecting an applicant takes users straight to that person’s requirements, so they don’t have to scroll past everyone else’s to find them. The Add more applicants action sits at the bottom of the same list.
Key Decision: Let requirements leave the product the way people share them
Key Decision: Let requirements leave the product the way people share them
A customer often needs only one person’s list, so each applicant has its own download action in a familiar button group, with download-all for the full set.
A customer often needs only one person’s list, so each applicant has its own download action in a familiar button group, with download-all for the full set.
To share with others, users copy formatted text for one applicant or for everyone. I structured it into header, subheader and body, using WhatsApp asterisks for emphasis so it scans inside a chat bubble. Copying happens in the product; sending stays manual in WhatsApp.
The only difference between SPANVISA and SPUN is the text header.
To share with others, users copy formatted text for one applicant or for everyone. I structured it into header, subheader and body, using WhatsApp asterisks for emphasis so it scans inside a chat bubble. Copying happens in the product; sending stays manual in WhatsApp.
The only difference between SPANVISA and SPUN is the text header.
私が学んだこと
私が学んだこと
一方、プロジェクトが開始された後に改善の機会をいくつか特定しました：
ユーザーにテストを行いフィードバックを収集する必要がありますが、クライアントのための機能が目的であるため、それを行っていません。
ストラバを同期してチャレンジに参加するための深い作業が必要です。
よりパーソナライズされたオンボーディング体験を開発する必要がありますが、クライアントに依存します。
一方、プロジェクトが開始された後に改善の機会をいくつか特定しました：
ユーザーにテストを行いフィードバックを収集する必要がありますが、クライアントのための機能が目的であるため、それを行っていません。
ストラバを同期してチャレンジに参加するための深い作業が必要です。
よりパーソナライズされたオンボーディング体験を開発する必要がありますが、クライアントに依存します。
Preventing lost work
Refreshing the browser mid-flow could wipe several documents. With Engineering, I designed a pop-up that asks whether to start over or keep the saved documents, so the consequence is the user’s choice.
Preventing lost work
Refreshing the browser mid-flow could wipe several documents. With Engineering, I designed a pop-up that asks whether to start over or keep the saved documents, so the consequence is the user’s choice.
The sprint left room for only one of two options: ship the pop-up and delay the release, or ship a simpler safeguard on time. We chose the second. The system now saves every generated document, so users who return to the service detail page find their list waiting for them.
The sprint left room for only one of two options: ship the pop-up and delay the release, or ship a simpler safeguard on time. We chose the second. The system now saves every generated document, so users who return to the service detail page find their list waiting for them.
We gained a release on schedule with no lost work. We gave up the option to start fresh, a gap worth revisiting.
We gained a release on schedule with no lost work. We gave up the option to start fresh, a gap worth revisiting.
Outcomes: Shipped across both products
Outcomes: Shipped across both products
Consultants got the capability first; consumer desktop and mobile followed one sprint later. Users can now:
Consultants got the capability first; consumer desktop and mobile followed one sprint later. Users can now:
Add applicants and get requirements tailored to each one
Download one applicant’s list or the full set
Copy ready-to-paste text for one applicant or everyone
Add applicants and get requirements tailored to each one
Download one applicant’s list or the full set
Copy ready-to-paste text for one applicant or everyone
Evidence: release and stakeholder acceptance.
What’s next
What’s next
Carry applicant details into checkout to remove duplicate entry, then measure task success, time on task and checkout progression.
Carry applicant details into checkout to remove duplicate entry, then measure task success, time on task and checkout progression.
Reflection
Reflection
This project sharpened how I look at a feature: not just what it does, but where else it lands. If multi-applicant requirements ship in one product, does that affect the other? If so, how should the feature adapt there? This case study is my answer to both questions.
This project sharpened how I look at a feature: not just what it does, but where else it lands. If multi-applicant requirements ship in one product, does that affect the other? If so, how should the feature adapt there? This case study is my answer to both questions.
It also taught me that seamless navigation doesn’t come from a single pattern. Each flow raised its own cases, from one applicant to a large group, and each one needed to be thought through on its own.
It also taught me that seamless navigation doesn’t come from a single pattern. Each flow raised its own cases, from one applicant to a large group, and each one needed to be thought through on its own.
Design ideas got stronger once they went through the team first. The PM and Engineering each saw the problem from their own angle. I treated their feedback, and the stakeholders’, as input to shape the design rather than a box to tick, and every iteration got sharper because of it.
Design ideas got stronger once they went through the team first. The PM and Engineering each saw the problem from their own angle. I treated their feedback, and the stakeholders’, as input to shape the design rather than a box to tick, and every iteration got sharper because of it.
Despite a tight sprint and several rounds of design review, the capability shipped across both products.
Despite a tight sprint and several rounds of design review, the capability shipped across both products.
