Concept Intro and Problem Statements
The opening FigJam board reframed the opportunity around rider value and business value, establishing what 'add-ons' should mean in practice across compatible accessories, apparel, and service parts.
UX StrategyResearch & IdeationMerchandising
Designing a Smarter 'Complete Your Ride' Experience for Higher-Intent Shopping
This work focused on a familiar commerce problem with more nuance underneath it: how do you help riders discover the right add-ons without making the experience feel like a generic upsell rail? Working with a senior UX strategist, I helped shape the concept from KPI framing and problem definition through competitive review, flow design, technical constraints, and final implementation guidance.
Research, Framing, and Iteration
This project is useful in interviews because the process work is visible. Rather than jumping directly to polished UI, the team clarified business goals, defined the rider problem, studied adjacent patterns, and mapped the intended flow before final visual design and implementation.
Competitor Analysis
Competitive review helped identify where adjacent brands were solving compatibility and attach problems well, and where their patterns created friction or felt too transactional.
Business Goals and KPIs
A shared KPI frame aligned the team on items per transaction, average order value, PDP exit rate, and rider satisfaction so the concept was anchored in outcomes instead of opinion.
Complete Your Ride Flow
The full flow documents how strategy turned into a shippable experience, including viewport previews, technical considerations, image guidance, and content constraints. Open it to inspect at full size.
Detailed Flow Walkthrough
These individual frames make the flow easier to discuss in an interview. They show how the concept moved from high-level strategy into concrete UX decisions, viewport planning, and implementation-ready detail.
Expanded By Default
The add-ons accordion is expanded by default so riders immediately see compatible products without needing to hunt for the attach experience.
Responsive Design
The final responsive mocks translated the strategy into concrete desktop and mobile layouts, keeping the attach experience useful, contextual, and visually integrated with the rest of the PDP journey.
Attach Strategy Coverage
Compatible AccessoriesApparel KitsService PartsFit-Based AttachMerchandising Logic
Accessory TypeBike MatchPrice RangeUse CaseAll Add-ons
Initial rollout shipped to one product listing surface with room to expand the pattern.
Helmet + Light Bundle
Safety AttachBottle Cage + Bottle
EssentialsFlat Kit
PreparednessCommuter Gear
UtilityApparel Collection
Style & ComfortService Parts
CompatibilityKey Design Features
KPI-Led Framing
The team aligned on concrete business and rider outcomes before exploring interface patterns, keeping the work focused on measurable value.
Concept Definition
We clarified what kinds of add-ons belonged in the experience and how they should ladder back to rider needs rather than generic product promotion.
Cross-Functional Readiness
The flow included implementation details such as image specs, content rules, and viewport guidance so the handoff was useful to engineering and merchandising alike.
1PLP Rollout
AttachRevenue Opportunity
EarlierAccessory Discovery
StrongerCross-Sell Strategy
The Challenge
The team wanted to increase attachment and basket size, but the UX problem was broader than adding recommendations. We needed to define what add-ons actually meant in a rider context, identify where guidance would feel useful rather than intrusive, and create a pattern that balanced merchandising, relevance, and implementation feasibility.
- Business goals centered on items per transaction, AOV, and lower PDP exits
- Existing shopping flows made it easy to buy the bike but harder to build confidence around accessories
- The team needed a rider-centered concept, not a generic 'you may also like' module
- We had to align technical constraints, content rules, image specs, and viewport behavior early
- The initial rollout was narrower than the bike wayfinding work, so the concept had to prove value before expanding
The Solution
We approached the feature as a guided merchandising system rather than a recommendation widget. The work began with KPI alignment and problem statements, then moved through concept framing, precedent analysis, flow definition, and design specifications that engineering could implement cleanly. The resulting experience connected riders to compatible accessories and supporting products in a way that felt intentional, contextual, and easier to act on.
- Established shared definitions for the rider problem and the business opportunity
- Used FigJam artifacts to align stakeholders on concept direction before moving into final UI
- Reviewed competitor patterns to identify gaps and avoid copying lower-quality attach experiences
- Paired design strategy with engineering detail including content limits, image behavior, and viewport rules
- Delivered a live feature that created a stronger platform for future cross-sell improvements
Results
This feature was rolled out more narrowly than the bike wayfinding carousel, but it is one of the best examples of how I work through upstream UX strategy. It shows how I help teams move from loosely defined revenue goals to a more coherent, rider-centered concept that can be designed, specified, and shipped.
- Created a clearer attach strategy tied to basket-size and AOV goals
- Produced reusable problem-framing artifacts for stakeholder alignment
- Connected concept work to implementation details early in the process
- Shipped a live merchandising feature with room for broader expansion
- Useful example of design strategy before high-fidelity UI
- Demonstrates strong collaboration between UX strategy and UX engineering
- Shows how business goals were translated into rider-centered decisions
- Good secondary case study for discussing iteration, alignment, and tradeoffs
© 2026 Sara Keyser