Core User Flows
Purpose
This section describes the essential journeys users take through the website. Each flow shows the path from intent to completion, establishing the conceptual foundation for detailed design work.
These are not wireframes or specifications. They describe journey logic and experience principles.
User Archetypes
Every flow must accommodate three primary buyer types:
| Archetype | % of Users | Knows | Needs | Measures Success By |
|---|---|---|---|---|
| Veteran Buyer | ~30% | Exact part number | Speed | Seconds to checkout |
| Problem Solver | ~50% | Their application | Guidance | Confidence in choice |
| Researcher | ~20% | They need to learn | Education | Comprehensive understanding |
Flow 1: Product Search
| Step | Action | System Response |
|---|---|---|
| 1 | Types “RVC-375-16” in search | Recognizes valid part number |
| 2 | Presses enter | Direct to product page (no results page) |
| 3 | Confirms correct item | Shows negotiated price (logged in) |
| 4 | Adds to cart | Pre-fills saved shipping/payment |
| 5 | Confirms order | Complete |
Target time: Under 2 minutes from landing to order confirmation
Key Principles
- Part number searches resolve directly to product
- Logged-in customers see their pricing
- Saved information accelerates checkout
| Step | Action | System Response |
|---|---|---|
| 1 | Clicks “Shop by Application” | Shows application categories |
| 2 | Selects “Masking” → “Thread Protection” | Educational landing page explains options |
| 3 | Selects “Metric Thread Masking” | Filterable product table |
| 4 | Enters thread dimensions | Table filters to compatible products |
| 5 | Uncertain between two options | Selects both for comparison |
| 6 | Reviews comparison view | Sees specs side-by-side, differences highlighted |
| 7 | Chooses silicone (higher temp rating) | Adds to cart |
| 8 | Wants to test first | Adds samples to same cart |
| 9 | Checks out | Single order for purchase + samples |
Key Principles
- Application entry points serve problem solvers
- Educational content explains before selling
- Comparison enables confident decisions
- Samples integrate with purchase flow
| Step | Action | System Response |
|---|---|---|
| 1 | Browses tube categories | Understands catalog scope |
| 2 | Downloads catalog PDF | Offline review capability |
| 3 | Saves products to list | ”New Product Line Evaluation” |
| 4 | Returns two weeks later | Logs in, finds saved list |
| 5 | Now knows dimensions needed | Filters to 2” × 12” tubes |
| 6 | Identifies three candidates | Adds all to comparison |
| 7 | Requests samples with context | Notes “evaluating for Q3 production run” |
Key Principles
- Downloadable resources support offline evaluation
- Saved lists enable multi-session research
- Sample requests capture context for follow-up
Flow 2: Browse and Discovery
| Step | Action | System Response |
|---|---|---|
| 1 | Hovers on “Products” in main nav | Mega-menu shows full category structure |
| 2 | Clicks “Plastic Caps” | Category landing page with subcategories |
| 3 | Scans subcategory options | Sees Tapered, Flanged, Threaded, Straight |
| 4 | Clicks “Threaded Caps” | Product listing page with filters |
| 5 | Applies filters: thread type, material, size | Results narrow with each selection |
| 6 | Clicks product of interest | Product detail page |
Key Principles
- Navigation reveals structure progressively
- Category pages orient before listing
- Filters narrow without dead ends
-
Application-Based Discovery “I need to protect hydraulic fittings but don’t know the product category.”
| Step | Action | System Response |
|---|---|---|
| 1 | Clicks “Shop by Application” | Application categories display |
| 2 | Selects “Hydraulic Protection” | Landing page explains protection needs |
| 3 | Reviews fitting type options | Sees SAE flange, JIC, O-ring ports, tube fittings |
| 4 | Selects their fitting type | Products for that application display |
| 5 | Browses products | Sees caps and plugs together by use case |
Key Principles
- Application paths are organized by customer problem
- Products present in the application context
- User doesn’t need to learn taxonomy
| Step | Action | System Response |
|---|---|---|
| 1 | Views MOCAP product page | ”Complete Solutions” section visible |
| 2 | Notices related Cleartec tubes | Suggestion based on complementary use |
| 3 | Clicks through to Cleartec product | Cleartec product page loads |
| 4 | Adds Cleartec tubes to cart | Same cart as MOCAP products |
| 5 | Proceeds to checkout | Single order, single checkout |
Key Principles
- Cross-brand suggestions appear naturally
- Unified cart enables a single-order purchase
Flow 3: Product Configuration
Expert Path:
| Step | Action | System Response |
|---|---|---|
| 1 | Views product series page | Size chart displayed |
| 2 | Filters by ID, OD, length | Table narrows to matching rows |
| 3 | Finds matching row | Highlights selection |
| 4 | Selects SKU | Image updates to show selection |
| 5 | Adds to cart | Configured product in cart |
Guided Path:
| Step | Action | System Response |
|---|---|---|
| 1 | Clicks “Help Me Choose” | Guided selection opens |
| 2 | Answers: What are you plugging? | Options narrow |
| 3 | Answers: Outer diameter of hole? | Options narrow further |
| 4 | Answers: Depth needed? | System recommends SKU |
| 5 | Adds to cart | Configured product in cart |
Both paths end at the same destination.
Key Principles
- Size charts work for experts
- Guided selection works for novices
- Image updates to show selected configuration
| Step | Action | System Response |
|---|---|---|
| 1 | Selects shape and size | Round, 2” × 12” entered |
| 2 | Chooses material | Only shows materials available in this size |
| 3 | Selects closures | Only shows compatible closures |
| 4 | Adds customization | Upload artwork, select colors |
| 5 | Reviews summary panel | Shows all selections + running total |
| 6a | Standard config: Adds to cart | Product added |
| 6b | Custom config: Submits quote | Request sent to sales |
Key Principles
- Complex configuration progresses step by step
- Dependencies enforce valid combinations
- Custom work routes to the appropriate workflow
Flow 4: Sample Request
Integrated Sample Flow
| Step | Action | System Response |
|---|---|---|
| 1 | Finds products through browse/search | Identifies candidates |
| 2 | Clicks “Request Sample” on product | Sample adds to cart as $0 item |
| 3 | Repeats for additional products | Multiple samples in cart |
| 4 | Views cart | Samples clearly distinguished from purchases |
| 5 | Proceeds to checkout | Shipping info required, no payment |
| 6 | Receives confirmation | Distinguishes samples from purchases |
Mixed Cart Example:
| Item | Type | Price |
|---|---|---|
| RVC-375-16 (qty 500) | Purchase | $127.50 |
| SH-250-12 (qty 1) | Sample | $0.00 |
| EP-500-16 (qty 1) | Sample | $0.00 |
Key Principles
- Samples request through same flow as purchases
- Cart handles mixed item types
- Context fields capture project info for sales follow-up
Flow 5: Purchase Flow
| Step | Action | System Response |
|---|---|---|
| 1 | Reviews cart | Shows items, quantities, prices |
| 2 | Adjusts quantities if needed | Subtotal updates |
| 3 | Clicks checkout | Choice: Guest or Create Account |
| 4 | Selects guest checkout | Shipping form displays |
| 5 | Enters shipping address | Carrier options with costs appear |
| 6 | Selects shipping method | Delivery estimate shown |
| 7 | Enters payment info | Credit card or PO request |
| 8 | Reviews complete order | Full summary displayed |
| 9 | Confirms order | Order number and tracking provided |
Key Principles
- Guest checkout reduces friction
- Shipping costs are shown before the final step
- Clear confirmation with next steps
| Step | Action | System Response |
|---|---|---|
| 1 | Logs into account | Dashboard displays |
| 2 | Views order history | Past orders listed |
| 3 | Clicks “Reorder” on previous order | Items added to cart |
| 4 | Adjusts quantities if needed | Cart updates |
| 5 | Proceeds to checkout | Saved addresses displayed |
| 6 | Selects saved address | Carrier account pre-fills |
| 7 | Confirms payment method | Stored method available |
| 8 | Completes order | Minimal data entry required |
Key Principles
- Order history enables easy reordering
- Saved information accelerates checkout
- Negotiated pricing displays throughout
| Step | Action | System Response |
|---|---|---|
| 1 | Browses while logged in | Negotiated prices display |
| 2 | Adds products to cart | Contract pricing applied |
| 3 | Proceeds to checkout | B2B options available |
| 4 | Selects “Bill to Account” | PO number field appears |
| 5 | Enters PO reference | Order associated with PO |
| 6 | Confirms order | Invoice generates automatically |
| 7 | Receives confirmation | Shows PO reference and billing terms |
Key Principles
- B2B customers see their pricing throughout
- Purchase order workflow integrates with terms
- Invoice handling matches enterprise processes
Flow 6: Category Navigation
| Step | Action | System Response |
|---|---|---|
| 1 | Enters Silicone Caps category | Hundreds of products displayed |
| 2 | Applies filter: Temperature ≥ 500°F | Results narrow, count updates |
| 3 | Applies filter: ID 0.5” – 1.0” | Results narrow further |
| 4 | Views active filters | Clear display with removal option |
| 5 | Sorts by price | Results reorder |
| 6 | Scans narrowed results | Manageable product set |
| 7 | Clicks product of interest | Product detail page |
Key Principles
- Filters apply immediately
- Multiple filters combine
- Zero-result combinations prevented
- Active filters show with one-click removal
| Step | Action | System Response |
|---|---|---|
| 1 | Enters Masking category | Category landing with subcategories |
| 2 | Scans subcategory options | High-Temp, Standard, Threaded, Custom |
| 3 | Clicks into High-Temp Masking | Further breakdown by material/application |
| 4 | Explores multiple branches | Uses breadcrumbs to track position |
| 5 | Returns to parent category | Breadcrumb navigation |
| 6 | Explores different branch | Builds understanding of full scope |
Key Principles
- Category structure is revealed through exploration
- Breadcrumbs maintain orientation
- Multiple paths through the same content
Flow 7: Account Management
| Step | Action | System Response |
|---|---|---|
| 1 | Clicks “Sign In / Register” | Options displayed |
| 2 | Selects “Create Account” | Registration form |
| 3 | Enters email, password, name | Minimal required fields |
| 4 | Submits registration | Account created, logged in |
| 5 | Prompted to link previous orders | By email address match |
| 6 | Accepts linking | Guest orders appear in history |
Key Principles
- Account creation is quick
- Guest history can migrate
- Account unlocks features without blocking access
| Step | Action | System Response |
|---|---|---|
| 1 | Clicks account menu | Dashboard options display |
| 2 | Views Recent Orders | Orders with status, tracking, reorder |
| 3 | Views Saved Lists | Product collections for future |
| 4 | Views Addresses | Saved shipping addresses |
| 5 | Views Payment Methods | Stored payment options |
| 6 | Views Support History | Past requests and resolutions |
| 7 | Accesses Settings | Password, preferences, notifications |
Key Principles
- Dashboard provides quick access to frequent tasks
- Order history enables self-service
- Saved information manages across sessions
| Step | Action | System Response |
|---|---|---|
| 1 | Views order in account | Order detail displayed |
| 2 | Clicks “Get Help” on order | Support form with order context |
| 3 | Describes issue | Text field for details |
| 4 | Submits request | Confirmation with ticket number |
| 5 | Views support history | Request appears with status |
| 6 | Receives response | Notification and history update |
Key Principles
- Support connects to order context
- Multiple contact channels available
- History maintains continuity
Cross-Cutting Principles
These apply to all flows:
| Principle | Meaning |
|---|---|
| Orientation | Users always know where they are (breadcrumbs, headers) |
| Recovery | Mistakes are reversible (back buttons, filter clearing, cart editing) |
| Progress | Multi-step processes show progress indicators |
| Confirmation | Important actions confirm (orders, samples, account changes) |
| Continuity | Sessions persist (cart survives browser close, lists save) |
| Accessibility | Keyboard navigation, screen reader support, color not sole indicator |
Flow Integration
Flows connect naturally in real sessions:
| Starting Flow | Transition Trigger | Resulting Flow |
|---|---|---|
| Search | Results prompt exploration | Browse |
| Browse | Discovery reaches variant selection | Configuration |
| Configuration | Want to test before buying | Sample Request |
| Sample Request | Samples prove satisfactory | Purchase |
| Purchase | Success motivates registration | Account Creation |
Navigation, cart, and account state persist across transitions.
Success Metrics
| Flow | Key Metrics |
|---|---|
| Search | Time to product page, direct resolution rate, zero-result rate |
| Browse | Category depth, filter usage, browse-to-cart conversion |
| Configuration | Completion rate, abandonment points, guidance usage |
| Sample | Request rate, sample-to-purchase conversion, context completion |
| Purchase | Cart abandonment, checkout completion, time to purchase |
| Account | Creation rate, feature usage, return purchase rate |