Overview

Enable sustained learning focus through structured onboarding, AI mentoring, and visualized learning structures.

My Role

In this project, I joined the team as a Product Designer, leading the overall experience design of a career-oriented learning platform for neurodivergent youth. Over the course of the project, I played a key role in designing and refining core modules, including guided learning pathways, in-context learning support, and visualized representations of skill development and learning progress.

Team

1 Product Manager

3 UI/UX Designer

5 Developers / Ai Engineer

This case study demonstrates how I collaborated with a cross-functional team to align user needs, cognitive considerations, and career-development goals across the product lifecycle. Rather than focusing on individual features, my work emphasized system-level decisions that shaped a more sustainable learning journey and career readiness for neurodivergent users.

Timeline

2024 - 2025

Achievement

Weekly Active Users (WAU)

16%+

Achievement

Key Task Completion Rate

23%

Achievement

Learning Path Progression Rate

Learning Path Progression Rate

19%+

Overview

Enable sustained learning focus through structured onboarding, AI mentoring, and visualized learning structures.

My Role

In this project, I joined the team as a Product Designer, leading the overall experience design of a career-oriented learning platform for neurodivergent youth. Over the course of the project, I played a key role in designing and refining core modules, including guided learning pathways, in-context learning support, and visualized representations of skill development and learning progress.

Team

1 Product Manager

3 UI/UX Designer

5 Developers / Ai Engineer

This case study demonstrates how I collaborated with a cross-functional team to align user needs, cognitive considerations, and career-development goals across the product lifecycle. Rather than focusing on individual features, my work emphasized system-level decisions that shaped a more sustainable learning journey and career readiness for neurodivergent users.

Timeline

2024 - 2025

Achievement

Weekly Active Users (WAU)

16%+

Achievement

Key Task Completion Rate

23%

Achievement

Learning Path Progression Rate

19%+

Overview

Enable sustained learning focus through structured onboarding, AI mentoring, and visualized learning structures.

My Role

In this project, I joined the team as a Product Designer, leading the overall experience design of a career-oriented learning platform for neurodivergent youth. Over the course of the project, I played a key role in designing and refining core modules, including guided learning pathways, in-context learning support, and visualized representations of skill development and learning progress.

Team

1 Product Manager

3 UI/UX Designer

5 Developers / Ai Engineer

This case study demonstrates how I collaborated with a cross-functional team to align user needs, cognitive considerations, and career-development goals across the product lifecycle. Rather than focusing on individual features, my work emphasized system-level decisions that shaped a more sustainable learning journey and career readiness for neurodivergent users.

Timeline

2024 - 2025

Achievement

Weekly Active Users (WAU)

16%+

Achievement

Key Task Completion Rate

23%

Achievement

Learning Path Progression Rate

19%+

Background

Major Choice, a career-oriented learning platform for neurodivergent youth

Who's the user?

→ Neurodivergent youth seeking guided support to explore careers and build job-ready skills.

Neurodivergent youth, including individuals with ADHD and dyslexia, often struggle with unstructured career preparation and overwhelming choices. They need clear direction, timely support, and a learning environment that helps them sustain focus while building confidence toward future careers.

What’s Major Choice?

→ A guided career learning platform designed to support focus, progress, and career readiness.

Major Choice combines structured onboarding, in-context mentoring, and visualized learning progress to help learners move forward without unnecessary cognitive load. By supporting consistent engagement and clear next steps, the platform empowers neurodivergent youth to develop skills and prepare for their careers with confidence.

Background

Major Choice, a career-oriented learning platform for neurodivergent youth

Who's the user?

→ Neurodivergent youth seeking guided support to explore careers and build job-ready skills.

Neurodivergent youth, including individuals with ADHD and dyslexia, often struggle with unstructured career preparation and overwhelming choices. They need clear direction, timely support, and a learning environment that helps them sustain focus while building confidence toward future careers.

What’s Major Choice?

→ A guided career learning platform designed to support focus, progress, and career readiness.

Major Choice combines structured onboarding, in-context mentoring, and visualized learning progress to help learners move forward without unnecessary cognitive load. By supporting consistent engagement and clear next steps, the platform empowers neurodivergent youth to develop skills and prepare for their careers with confidence.

Design Challenge

Three major friction points in user flow

1) Guided Course Discovery

1) Guided Course Discovery

Users struggle to choose where to start when faced with too many course options and no onboarding guidance.

2) In-Learning Support Gap

When learners get stuck during lessons, the lack of immediate, low-pressure support often breaks their focus and momentum.

3) Invisible Progress Tracking

Without clear progress visualization, learners rely on memory to track their learning, which increases cognitive load and reduces motivation.

Design Challenge

Three major friction points in user flow

1) Guided Course Discovery

Users struggle to choose where to start when faced with too many course options and no onboarding guidance.

2) In-Learning Support Gap

When learners get stuck during lessons, the lack of immediate, low-pressure support often breaks their focus and momentum.

3) Invisible Progress Tracking

Without clear progress visualization, learners rely on memory to track their learning, which increases cognitive load and reduces motivation.

Design challenge 1: Guided Course Discovery

Step 1: Giving Users a Confident Place to Begin

8% of usability testing participants struggled to locate the entry point for starting helper tasks (Dogpool) on the map.

→ Make the task entry easier to discover on the map.

→ Make the task entry easier to discover on the map.

From a user mental model perspective, the map is the immediate, immersive place to begin a walk. Whether they’re walking their own dog or helping someone else, users should be able to start directly from the map with ease.

Design challenge 1: Lack of task flow clarity (IA)

Step 1: Giving Users a Confident Place to Begin

8% of usability testing participants struggled to locate the entry point for starting helper tasks (Dogpool) on the map.

→ Make the task entry easier to discover on the map.

From a user mental model perspective, the map is the immediate, immersive place to begin a walk. Whether they’re walking their own dog or helping someone else, users should be able to start directly from the map with ease.

Step 2: Putting Each Action Where It Truly Belongs

15% of usability testing participants kept mixing up what’s on Home and what’s on Profile

→ Group actions under the correct tasks.

→ Group actions under the correct tasks.

Through card sorting, we uncovered how users naturally grouped these actions, revealing a clearer and more intuitive task structure.

Step 2: Putting Each Action Where It Truly Belongs

15% of usability testing participants kept mixing up what’s on Home and what’s on Profile

→ Group actions under the correct tasks.

Through card sorting, we uncovered how users naturally grouped these actions, revealing a clearer and more intuitive task structure.

→ Consolidating shared self-related tasks reduces navigation complexity.

→ Consolidating shared self-related tasks reduces navigation complexity.

This shortens navigation paths, reduces cognitive load, minimizes back-and-forth trial and error, and makes task entry points easier to find.

→ Consolidating shared self-related tasks reduces navigation complexity.

This shortens navigation paths, reduces cognitive load, minimizes back-and-forth trial and error, and makes task entry points easier to find.

Step 3: Ensuring Every Role Enjoys an Effortless Task Flow

24% of usability testing participants jumped back and forth just to check if something was done.

→ Redesigned role-specific task flows.

→ Redesigned role-specific task flows.

Combining mental model insights, card sorting results, and role-based usability testing, we identified a clear role-based task flow that aligns with how users think and act across different walking scenarios.

Step 3: Ensuring Every Role Enjoys an Effortless Task Flow

24% of usability testing participants jumped back and forth just to check if something was done.

→ Redesigned role-specific task flows.

Combining mental model insights, card sorting results, and role-based usability testing, we identified a clear role-based task flow that aligns with how users think and act across different walking scenarios.

Design challenge 2: Unclear Feature Prioritization

When a “Helpful” Report Road Condition Feature Starts Disrupting Navigation

The System Needed It

→ The AI Relied on This Data to Improve Route Safety Over Time

→ The AI Relied on This Data to Improve Route Safety Over Time

1) Road-condition reports provide essential data that strengthen AI prediction accuracy and improve the safety of recommended routes.

2) Low usage of the Report feature reduces the system’s feedback loop, limiting the model’s ability to improve through continuous iteration.

Users Didn’t Need It

→ Feature placement was misaligned with task priority

→ Feature placement was misaligned with task priority

1) 79% users were not as enthusiastic as we had assumed and rarely tapped the “Report road condition” button during walk sessions.

2) The button’s placement took up valuable map space, making it difficult for users to see their route and interrupting their primary navigation task with unnecessary visual distractions.

Clearly, a feature we considered valuable failed to deliver impact. Users rarely engaged with it, and its placement disrupted the core walking experience.

Design challenge 2: Unclear Feature Prioritization

When a “Helpful” Report Road Condition Feature Starts Disrupting Navigation

The System Needed It

→ The AI Relied on This Data to Improve Route Safety Over Time

1) Road-condition reports provide essential data that strengthen AI prediction accuracy and improve the safety of recommended routes.

2) Low usage of the Report feature reduces the system’s feedback loop, limiting the model’s ability to improve through continuous iteration.

Users Didn’t Need It

→ Feature placement was misaligned with task priority

1) 79% users were not as enthusiastic as we had assumed and rarely tapped the “Report road condition” button during walk sessions.

2) The button’s placement took up valuable map space, making it difficult for users to see their route and interrupting their primary navigation task with unnecessary visual distractions.

Clearly, a feature we considered valuable failed to deliver impact. Users rarely engaged with it, and its placement disrupted the core walking experience.

Decision-making: Why we chose Design Directions 1 & 2 instead of 3 ?

1) Secondary Placement

Move the Report feature into a secondary entry point.

2) Contextual Report

Surface the Report feature only at moments of high relevance, increasing meaningful usage.

3) Post-Walk Reporting

Integrate Report into the post-walk rating flow.

Decision-making: Why we chose Design Directions 1 & 2 instead of 3 ?

1) Secondary Placement

Move the Report feature into a secondary entry point.

2) Contextual Report

Surface the Report feature only at moments of high relevance, increasing meaningful usage.

3) Post-Walk Reporting

Integrate Report into the post-walk rating flow.

Design Directions 1 & 2 in Action

Balancing UX priorities and engineering needs

→ Increase the visibility of the Report feature without disrupting the user’s primary walking task.

I replaced the distracting Report button with a lightweight dropdown and pull-up panel that restore map visibility and reduce interference with the primary walking task. The pull-up panel also improves the discoverability of the Report feature, which is important for the engineering team’s data needs. To support timely feedback, a contextual Report menu appears automatically when the user stays still.

Design Directions 1 & 2 in Action

Balancing UX priorities and engineering needs

→ Increase the visibility of the Report feature without disrupting the user’s primary walking task.

I replaced the distracting Report button with a lightweight dropdown and pull-up panel that restore map visibility and reduce interference with the primary walking task. The pull-up panel also improves the discoverability of the Report feature, which is important for the engineering team’s data needs. To support timely feedback, a contextual Report menu appears automatically when the user stays still.

Design challenge 3: Loss of context between screens

When Visual Details Change, Confidence Quietly Breaks

What we observed

As users moved across screens—from the map, to request cards, to walk details—the visual focus frequently shifted between the owner and the dog.

As users moved across screens—from the map, to request cards, to walk details—the visual focus frequently shifted between the owner and the dog.

This inconsistency made it difficult for users to maintain a clear mental picture of “who this task is about” as they progressed through the flow.

Design challenge 3: Loss of context between screens

When Visual Details Change, Confidence Quietly Breaks

What we observed

As users moved across screens—from the map, to request cards, to walk details—the visual focus frequently shifted between the owner and the dog.

This inconsistency made it difficult for users to maintain a clear mental picture of “who this task is about” as they progressed through the flow.

Design System

Accessibility as a Design Constraint, Not a Limitation

CEO, PM

While the CEO prioritized maintaining Ebark’s calm, friendly brand tone through its purple palette, the PM was focused on minimizing development overhead.

Accessibility Requirements

As I evaluated the interface against WCAG contrast standards, several key UI elements failed to meet accessibility requirements—especially in outdoor walking scenarios where glare and motion further reduce readability.

Balancing Aesthetics X Readability X Product Realities

Rather than treating accessibility as a purely technical requirement or triggering a complete rebrand, I framed it as a strategic design constraint. I made targeted adjustments within the existing color system—refining saturation, brightness, and usage hierarchy—to improve contrast while maintaining brand continuity and development efficiency.


This approach allowed us to:


- Meet WCAG AA contrast standards for primary actions and key content

- Preserve the original brand feeling familiar to existing users

- Avoid introducing visual heaviness or slowing down development with a full rebrand

Design System

Accessibility as a Design Constraint, Not a Limitation

CEO, PM

While the CEO prioritized maintaining Ebark’s calm, friendly brand tone through its purple palette, the PM was focused on minimizing development overhead.

Accessibility Requirements

As I evaluated the interface against WCAG contrast standards, several key UI elements failed to meet accessibility requirements—especially in outdoor walking scenarios where glare and motion further reduce readability.

Balancing Aesthetics X Readability X Product Realities

Rather than treating accessibility as a purely technical requirement or triggering a complete rebrand, I framed it as a strategic design constraint. I made targeted adjustments within the existing color system—refining saturation, brightness, and usage hierarchy—to improve contrast while maintaining brand continuity and development efficiency.


This approach allowed us to:


- Meet WCAG AA contrast standards for primary actions and key content

- Preserve the original brand feeling familiar to existing users

- Avoid introducing visual heaviness or slowing down development with a full rebrand

Implementation

Create comprehensive handoff to developer

After confirming the key screen of the user flow, I started to create the design document for development, and I needed to consider as much detail as possible for each interaction status.

Implementation

Create comprehensive handoff to developer

After confirming the key screen of the user flow, I started to create the design document for development, and I needed to consider as much detail as possible for each interaction status.

Reflections & Next

When Visual Details Change, Confidence Quietly Breaks

Designing Ebark as a single app that supports owners, walkers, and helpers was a strategic product decision that created long-term value, but also introduced significant complexity at the experience level. I learned that the core challenge in multi-role systems is not role switching itself, but helping users stay oriented around what task they are completing at any given moment. Through mental model research, task-based IA, and role-based usability testing, I shifted the product from a role-driven structure to a task-first experience that preserves context across screens.


This project also reinforced that accessibility and visual clarity are not purely technical concerns, but strategic design constraints that must be balanced with brand identity and development realities. Moving forward, I will continue to approach design problems by framing constraints early and making intentional trade-offs that prioritize real-world usability without sacrificing product momentum.


Next, I would expand personalization by adapting task flows and route recommendations based on user preferences and walking behavior. I would also explore additional accessibility improvements beyond visual contrast, such as haptic and audio feedback for in-motion use. Finally, I would validate key design decisions through A/B testing to further optimize discoverability, task completion, and long-term engagement.

Reflections & Next

When Visual Details Change, Confidence Quietly Breaks

Designing Ebark as a single app that supports owners, walkers, and helpers was a strategic product decision that created long-term value, but also introduced significant complexity at the experience level. I learned that the core challenge in multi-role systems is not role switching itself, but helping users stay oriented around what task they are completing at any given moment. Through mental model research, task-based IA, and role-based usability testing, I shifted the product from a role-driven structure to a task-first experience that preserves context across screens.


This project also reinforced that accessibility and visual clarity are not purely technical concerns, but strategic design constraints that must be balanced with brand identity and development realities. Moving forward, I will continue to approach design problems by framing constraints early and making intentional trade-offs that prioritize real-world usability without sacrificing product momentum.


Next, I would expand personalization by adapting task flows and route recommendations based on user preferences and walking behavior. I would also explore additional accessibility improvements beyond visual contrast, such as haptic and audio feedback for in-motion use. Finally, I would validate key design decisions through A/B testing to further optimize discoverability, task completion, and long-term engagement.

Have ideas to share? Or just want to say hi?

Copyright@Jin Xu 2026

Have ideas to share? Or just want to say hi?

Copyright@Jin Xu 2026

Have ideas to share? Or just want to say hi?

Copyright@Jin Xu 2026