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%を達成しました。
I overcame the tight deadline by choosing prototype over mockup, compressing weeks of revision cycles into single sessions. These prototypes powered alignment sessions with the Head of Engineering and Project Manager, surfacing edge cases and technical constraints that would have stayed buried in static mockup reviews.
I overcame the tight deadline by choosing prototype over mockup, compressing weeks of revision cycles into single sessions. These prototypes powered alignment sessions with the Head of Engineering and Project Manager, surfacing edge cases and technical constraints that would have stayed buried in static mockup reviews.
To decide what each role should actually see, I built a content strategy and permission design layer before touching visual design, turning an overwhelming permission matrix into four tailored, decision-ready dashboards.
To decide what each role should actually see, I built a content strategy and permission design layer before touching visual design, turning an overwhelming permission matrix into four tailored, decision-ready dashboards.
The result: a platform that felt purpose-built for every role, delivered on time, and shaped by collaboration rather than guesswork.
The result: a platform that felt purpose-built for every role, delivered on time, and shaped by collaboration rather than guesswork.
背景ストーリー
背景ストーリー
2024年に戻ると、910はモバイルコマースアプリを構築する野心を抱いています。ICUBEとのコラボレーション。私はシニアUI/UXデザイナーのラディティア・パムンガスと共にプロジェクトに参加していました。
このプロジェクトの開始以来、長期的な目標の一つはStravaとの同期機能を導入することでした。
このアイデアは、地元のランナーが自身のStravaアカウント（ランニングトラッキングアプリ）を910アプリに直接接続し、さまざまなチャレンジに参加できるようにすることです。
これらのチャレンジは後にランニング結果を生成し、累積されてリーダーボードに表示されるため、ランナーは他の人と自分のパフォーマンスを比較することができます。
2024年に戻ると、910はモバイルコマースアプリを構築する野心を抱いています。ICUBEとのコラボレーション。私はシニアUI/UXデザイナーのラディティア・パムンガスと共にプロジェクトに参加していました。
このプロジェクトの開始以来、長期的な目標の一つはStravaとの同期機能を導入することでした。
このアイデアは、地元のランナーが自身のStravaアカウント（ランニングトラッキングアプリ）を910アプリに直接接続し、さまざまなチャレンジに参加できるようにすることです。
これらのチャレンジは後にランニング結果を生成し、累積されてリーダーボードに表示されるため、ランナーは他の人と自分のパフォーマンスを比較することができます。
The SLA Impact Tracker is not intended to redesign workflows or replace current project management (PM) systems.
The SLA Impact Tracker is not intended to redesign workflows or replace current project management (PM) systems.
Instead, it introduces a centralized SLA monitoring layer that delivers consistent, defensible, and auditable performance data. The tool functions as a structured logbook that captures milestone-level events, distinguishes clearly between 'Blocked' and 'Delayed' statuses, and tracks expected versus actual performance with full audit traceability.
Instead, it introduces a centralized SLA monitoring layer that delivers consistent, defensible, and auditable performance data. The tool functions as a structured logbook that captures milestone-level events, distinguishes clearly between 'Blocked' and 'Delayed' statuses, and tracks expected versus actual performance with full audit traceability.
主な目標
主な目標
ユーザー（特に地元のランナー）を説得して、Stravaの同期を通じて910からの通知を有効にし、チャレンジを受け入れることが、機能のクライアント体験の重要な部分になります。
ユーザー（特に地元のランナー）を説得して、Stravaの同期を通じて910からの通知を有効にし、チャレンジを受け入れることが、機能のクライアント体験の重要な部分になります。
A 7 to 9 day timeline The project had to move from kickoff to delivery in under two weeks. There was little room for long discovery cycles or multiple revision rounds, which forced every design decision to be deliberate and defensible the first time.
Four user roles, one cohesive system The platform had to serve Super Admin, SLA Lead, PM/AM, Management, each with different goals and access levels. Designing a single experience that felt tailored to each role, without fragmenting the product into four disconnected interfaces, was the core design challenge.
A 7 to 9 day timeline The project had to move from kickoff to delivery in under two weeks. There was little room for long discovery cycles or multiple revision rounds, which forced every design decision to be deliberate and defensible the first time.
Four user roles, one cohesive system The platform had to serve Super Admin, SLA Lead, PM/AM, Management, each with different goals and access levels. Designing a single experience that felt tailored to each role, without fragmenting the product into four disconnected interfaces, was the core design challenge.
ミニ研究が始まりました：ナイキ
ミニ研究が始まりました：ナイキ
クライアントはナイキをベンチマークの参考として提供しました。その方向性を念頭に置き、私はミニリサーチスタディを開始しました。
クライアントはナイキをベンチマークの参考として提供しました。その方向性を念頭に置き、私はミニリサーチスタディを開始しました。
スケジュールが厳しかったため、クライアントへの最初の成果物を納品するまでに1～3日しかなく、調査は主にいくつかの重要な側面に絞られました。
スケジュールが厳しかったため、クライアントへの最初の成果物を納品するまでに1～3日しかなく、調査は主にいくつかの重要な側面に絞られました。
調査結果 ミニリサーチ
調査結果 ミニリサーチ
私はミニリサーチを行い、3つの重要な側面が浮かび上がりました:
1. コンテンツ
コンテンツは一連の質問を通じてパーソナライズされています。
コピーは温かく、歓迎するものであり、個人的で、ユーザーが体験にスムーズに入れるように手助けします。
2. 体験
ユーザーは自分のショッピングの好みに対する完全なコントロールを得られます。
プログレスバーは、オンボーディングフローにおいてどの程度進んでいるかを理解するのに役立ちます。
オンボーディングを完了した後も、ユーザーは製品を探索するための検索ページへと導かれます。
3. インタラクション
スムーズなアニメーションは、ユーザーが一つの画面から次の画面へシームレスに移行するのを助けます。
要約すると、ナイキのオンボーディングはユーザーが自分の好みを形作る力を与え、最終的にはよりパーソナライズされたショッピング体験を創出します。
私は簡単な研究を行い、3つの重要な側面が浮かび上がりました:
1. コンテンツ
コンテンツは、一連の質問を通じてパーソナライズされています。
コピーは温かく、歓迎的で個人的な印象を与え、ユーザーが体験にスムーズに入る手助けをします。
2. 体験
ユーザーは自分のショッピングの好みを完全にコントロールできます。
プログレスバーは、オンボーディングフローのどの段階にいるかを理解するのに役立ちます。
オンボーディングを完了した後も、ユーザーは製品を探索し始めるために検索ページに誘導されます。
3. インタラクション
スムーズなアニメーションは、ユーザーを次の画面へシームレスに移行させるのに役立ちます。
要約すると、Nikeのオンボーディングはユーザーが自分の好みを形成することを可能にし、最終的によりパーソナライズされたショッピング体験を創出します。
Why prototype-first?
Mockups answer "what does it look like." Prototypes answer "how does it work." For a multi-role platform with conditional logic and role-based access, the second question mattered far more.
Why prototype-first?
Mockups answer "what does it look like." Prototypes answer "how does it work." For a multi-role platform with conditional logic and role-based access, the second question mattered far more.
How it changed collaboration?
Prototypes turned design reviews into working sessions. The Head of Engineering spotted technical constraints in real time. The Project Manager walked through flows as if onboarding a client, surfacing edge cases that would have stayed buried in static frames. A flow that would have taken three async revision rounds got resolved in a single 30-minute or a hour session.
How it changed collaboration?
Prototypes turned design reviews into working sessions. The Head of Engineering spotted technical constraints in real time. The Project Manager walked through flows as if onboarding a client, surfacing edge cases that would have stayed buried in static frames. A flow that would have taken three async revision rounds got resolved in a single 30-minute or a hour session.
The trade-offs
Some screens shipped with rougher visual polish than I would normally allow. I prioritized interaction clarity over pixel-perfect detail, trusting that polish could come after the structure was validated.
The trade-offs
Some screens shipped with rougher visual polish than I would normally allow. I prioritized interaction clarity over pixel-perfect detail, trusting that polish could come after the structure was validated.
The Outcome
By handover, every key flow had already been pressure-tested by the people who would build and manage it. The prototype was the spec.
The Outcome
By handover, every key flow had already been pressure-tested by the people who would build and manage it. The prototype was the spec.
別の発見…
別の発見…
前述の観点から、Nike のオンボーディングにはまだいくつかの欠点があります。具体的には：
非常に長いオンボーディングプロセスで、完了までに時間がかかります（言語画面を除いて六つの画面があります）。
明らかな商品販売（これは良いことで、会社のビジネスモデルを支持します）。
明確さに欠ける進捗バーがあり、ユーザーが現在のステージを理解するのが難しくなっています。
これらの問題は、有名ブランドであってもビジネス目標、ユーザーの期待、オンボーディング体験内での明確さのバランスを取るのに苦労することを示しています。
前述の点から見ると、Nikeのオンボーディングにはいくつかの欠点があります。具体的には：
非常に長いオンボーディングプロセスがあり、完了するのに時間がかかります（言語画面を除いて六つの画面があります）。
明らかな製品販売（これは良いことですが、企業のビジネスモデルを支えています）。
明確さに欠ける進捗バーがあり、ユーザーが現在のステージを理解するのが難しいです。
これらの問題は、知名度の高いブランドでさえ、ビジネス目標、ユーザーの期待、そしてオンボーディング体験内の明確さのバランスを取るのに苦労する可能性があることを示しています。
Mapping content to roles
I'm not starting with layouts due we already use Fillament Design System. I built a content inventory pulled from the technical document.
Every data point, action, and module was mapped against the six roles, asking one question: does this role need to see it, act on it, or stay out of it?
That's why I created prototype over mockup first to know and mapping by collaboration with Head of Engineer and PM.
Mapping content to roles
I'm not starting with layouts due we already use Fillament Design System. I built a content inventory pulled from the technical document.
Every data point, action, and module was mapped against the six roles, asking one question: does this role need to see it, act on it, or stay out of it?
That's why I created prototype over mockup first to know and mapping by collaboration with Head of Engineer and PM.
The Outcome
Out of four roles. I hope to overcome the question "what should each role actually see." by mapping content. Here is what i do for each role.
The Outcome
Out of four roles. I hope to overcome the question "what should each role actually see." by mapping content. Here is what i do for each role.
Super Admin
Super Admin
Full system authority. Manages all users, roles, projects, SLA profiles, and has unrestricted cross-client
visibility. Responsible for platform governance and onboarding new clients that assign to PM/AM.
Full system authority. Manages all users, roles, projects, SLA profiles, and has unrestricted cross-client
visibility. Responsible for platform governance and onboarding new clients that assign to PM/AM.
SLA Lead
SLA Lead
Operational SLA Lead for SLA Template and project creation. Can create and manage SLA Profile templates
and projects that PM/AM was assigned.
SLA Template is a base template created by SLA Lead for PM/AM to create project that assigned for them.
Operational SLA Lead for SLA Template and project creation. Can create and manage SLA Profile templates
and projects that PM/AM was assigned.
SLA Template is a base template created by SLA Lead for PM/AM to create project that assigned for them.
PM/AM
PM/AM
PM/AM Is the people that create project based on SLA Template. PM/AM can log step events and update project milestones. Restricted to projects explicitly assigned to them, cannot view other clients' projects.
PM/AM Is the people that create project based on SLA Template. PM/AM can log step events and update project milestones. Restricted to projects explicitly assigned to them, cannot view other clients' projects.
Management
Management
The executive view. Full read access across all reports and statistic overview for strategic oversight, analytics, audit, and reporting. Cannot create or modify any records.
The "what should each role actually see." is a framework to build the content Management's dashboard overview.
The design is focus on summary of delayed vs on time project and Late activity. The main reason is the executive could monitor and dast look overview for what PM/AM do in on going project in each activity by day to day.
The executive view. Full read access across all reports and statistic overview for strategic oversight, analytics, audit, and reporting. Cannot create or modify any records.
The "what should each role actually see." is a framework to build the content Management's dashboard overview.
The design is focus on summary of delayed vs on time project and Late activity. The main reason is the executive could monitor and dast look overview for what PM/AM do in on going project in each activity by day to day.
私が学んだこと
私が学んだこと
910appのローンチ以来（2025年11月まで）観察してきた中で、いくつかの重要なことを学びました：
チーム全体の一定のコミュニケーションを維持することの重要性、特にエンジニアリングと連携し、すべての決定が整合しており、技術的に根拠があることを確認すること。
フィードバックの機会を開けることの価値と、デザイン決定の背後にある理由をクライアントに透明に伝えること、その結果彼らが私たちがデザインする何だけでなく、なぜ デザインするのかを理解すること。
クライアントが意思決定の完全な権限を持つ中で、私たちはUXの視点を考慮すべきです。それは最終的に、実際のユーザーが製品を体験する方法を形成するからです。
910appのローンチ以来（2025年11月まで）観察してきた中で、いくつかの重要なことを学びました：
チーム全体の一定のコミュニケーションを維持することの重要性、特にエンジニアリングと連携し、すべての決定が整合しており、技術的に根拠があることを確認すること。
フィードバックの機会を開けることの価値と、デザイン決定の背後にある理由をクライアントに透明に伝えること、その結果彼らが私たちがデザインする何だけでなく、なぜ デザインするのかを理解すること。
クライアントが意思決定の完全な権限を持つ中で、私たちはUXの視点を考慮すべきです。それは最終的に、実際のユーザーが製品を体験する方法を形成するからです。
一方、プロジェクトが開始された後に改善の機会をいくつか特定しました：
ユーザーにテストを行いフィードバックを収集する必要がありますが、クライアントのための機能が目的であるため、それを行っていません。
ストラバを同期してチャレンジに参加するための深い作業が必要です。
よりパーソナライズされたオンボーディング体験を開発する必要がありますが、クライアントに依存します。
一方、プロジェクトが開始された後に改善の機会をいくつか特定しました：
ユーザーにテストを行いフィードバックを収集する必要がありますが、クライアントのための機能が目的であるため、それを行っていません。
ストラバを同期してチャレンジに参加するための深い作業が必要です。
よりパーソナライズされたオンボーディング体験を開発する必要がありますが、クライアントに依存します。
Translation is part of design.
Dense technical documentation is not a barrier, it is raw material. Turning unfamiliar terminology into structured insights is a core design skill, not a prerequisite to design work.
Translation is part of design.
Dense technical documentation is not a barrier, it is raw material. Turning unfamiliar terminology into structured insights is a core design skill, not a prerequisite to design work.
What I've Learn
What I've Learn
The PMG SLA Impact Tracker case demonstrated that designing under constraint is not about cutting corners, but about choosing the right ones to cut.
The PMG SLA Impact Tracker case demonstrated that designing under constraint is not about cutting corners, but about choosing the right ones to cut.
Designers don't need to understand everything before designing.
I started this project not fully understanding the SLA terminology, the operational logic, or the business context. What mattered was my ability to ask the right questions, structure the unfamiliar into something workable, and trust the process of iteration. Confidence came from method, not prior knowledge.
Designers don't need to understand everything before designing.
I started this project not fully understanding the SLA terminology, the operational logic, or the business context. What mattered was my ability to ask the right questions, structure the unfamiliar into something workable, and trust the process of iteration. Confidence came from method, not prior knowledge.
Collaboration changes when the artifact changes.
Static mockups invite opinions. Interactive prototypes invite decisions. Switching the artifact changed the entire dynamic of how the Head of Engineering, the Project Manager, and I worked together. The lesson: the format of what you bring to a meeting often matters more than what's inside it.
Collaboration changes when the artifact changes.
Static mockups invite opinions. Interactive prototypes invite decisions. Switching the artifact changed the entire dynamic of how the Head of Engineering, the Project Manager, and I worked together. The lesson: the format of what you bring to a meeting often matters more than what's inside it.
