Overview
Accelerate purchase decision-making by streamlining pre-checkout discovery, comparison, and selection.
My Role
I owned design decisions for key pre-checkout experiences, focusing on problem framing, iterative testing, and measurable improvements to user decision-making.
Team
1 Product Manager
2 UI/UX Designer
This case study examines how I approached improving pre-checkout experiences to balance user needs and business goals.
Timeline
1 Month
Achievement
time to purchase decision
↓29%
Achievement
purchase conversion likelihood
↑6%
Achievement
decision confidence score
decision confidence score
↑1.8 pts
Overview
Accelerate purchase decision-making by streamlining pre-checkout discovery, comparison, and selection.
My Role
I owned design decisions for key pre-checkout experiences, focusing on problem framing, iterative testing, and measurable improvements to user decision-making.
Team
1 Product Manager
2 UI/UX Designer
This case study examines how I approached improving pre-checkout experiences to balance user needs and business goals.
Timeline
1 Month
Achievement
time to purchase decision
↓29%
Achievement
purchase conversion likelihood
↑6%
Achievement
decision confidence score
↑1.8 pts
Background
“ They Come, but They Don’t Commit. ”
We observed a notable pattern: while Old Navy’s share of online sales continued to grow, its conversion rate declined.
→ Old Navy’s online channel has grown to account for 38% of total sales in Fiscal 2024
→ Old Navy’s app conversion rate, which remains below 4%
It is evident that the growth in Old Navy’s online purchasing share has been driven by the migration of loyal in-store customers and the appeal of online-only discounts, while significant traffic drop-off has resulted in conversion rates remaining below 4%.
→ To address this gap, this project focuses on understanding user behavior before checkout and identifying where decision-making breaks down. From a strategic product design perspective, it explores how the experience can better support confidence—bridging engagement and conversion through a redesigned flow aligned with users’ decision-making needs.
Background
“ They Come, but They Don’t Commit. ”
We observed a notable pattern: while Old Navy’s share of online sales continued to grow, its conversion rate declined.
→ Old Navy’s online channel has grown to account for 38% of total sales in Fiscal 2024
→ Old Navy’s app conversion rate, which remains below 4%
It is evident that the growth in Old Navy’s online purchasing share has been driven by the migration of loyal in-store customers and the appeal of online-only discounts, while significant traffic drop-off has resulted in conversion rates remaining below 4%.
→ To address this gap, this project focuses on understanding user behavior before checkout and identifying where decision-making breaks down. From a strategic product design perspective, it explores how the experience can better support confidence—bridging engagement and conversion through a redesigned flow aligned with users’ decision-making needs.
Kick off
Who Are We Really Designing For?
The complexity and density of information on Old Navy’s homepage initially led me to assume it was designed for casual, exploratory shoppers. However, insights from Old Navy’s customer data and broader market research revealed a different picture.
→ Research indicates that a majority of Old Navy’s core audience (70%+) consists of value-driven women aged 30–44 from young-family households, a segment that demonstrates consistent repeat-purchase behavior over time.
Kick off
Who Are We Really Designing For?
The complexity and density of information on Old Navy’s homepage initially led me to assume it was designed for casual, exploratory shoppers. However, insights from Old Navy’s customer data and broader market research revealed a different picture.
→ Research indicates that a majority of Old Navy’s core audience (70%+) consists of value-driven women aged 30–44 from young-family households, a segment that demonstrates consistent repeat-purchase behavior over time.
Design Challenge
3 major UX gaps from the engineering-built prototype
The engineering-built MVP validated strong demand, but user journey analysis exposed three key UX gaps.
1) Lack of task flow clarity
1) Lack of task flow clarity
Users struggled to understand how to progress through their tasks within the app.
Users were interrupted in their primary navigation task due to poorly prioritized features.
2) Unclear feature prioritization
Inconsistent visual cues and mismatched information across screens broke continuity.
3) Loss of context between screens
Design Challenge
3 major UX gaps from the engineering-built prototype
The engineering-built MVP validated strong demand, but user journey analysis exposed three key UX gaps.
1) Lack of task flow clarity
Users struggled to understand how to progress through their tasks within the app.
Users were interrupted in their primary navigation task due to poorly prioritized features.
2) Unclear feature prioritization
Inconsistent visual cues and mismatched information across screens broke continuity.
3) Loss of context between screens
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.
→ 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.