🇳🇱 Netherlands

Tripaneer
( 3 Samples )

Scope: UX Audit & Full Redesign for Website, App, and Admin Dashboard

Role: UX/UI Designer, Researcher, QC Tester, Implementation Strategist

Important note:

This portfolio section contains only 3 samples of work, meant to demonstrate UI/UX thinking and problem-solving capability. As the only in-house UX designer, I redesigned or led the redesign of almost the entire website and its supporting platforms. Due to NDA restrictions, sensitive business and user data, and ongoing development, most of this work cannot be publicly displayed and is available only partially, through interview discussion and selected visuals. Some of the most important tasks worked on: Full Design System Redesign of Login and Sign-up flows Restructuring global navigation and information architecture Landing pages and marketing page optimization Homepage redesign and content hierarchy definition Payment and checkout flow improvements Card, listing, and component anatomy standardization User account and profile management flows Admin dashboards and internal management tools Organizer and partner platforms

● 15 min read

Search Bar Diagnosis

Search Bar UI/UX Pain Points

Looked like a search bar but did not function like one; behaved as a hard redirect instead of a progressive discovery tool
No autosuggestions or autocomplete despite inviting free-text input (“Try ‘Bali’ or ‘Health and Wellness’”), creating a false affordance
No recommended, popular, or trending results shown to guide users with low intent
No search history or recent searches, forcing users to restart exploration every time
Immediate redirection after typing or selecting an option, removing the ability to compare, refine, or confirm intent
Date selection was optional, unclear, and visually secondary, leading users to skip it unintentionally
Faulty date picker UX made it hard to understand what dates or durations were being selected
Limited flexibility in date selection (unclear duration vs. arrival logic, poor feedback)
No clear primary CTA to signal when the search would actually be executed
No exploratory features such as “Nearby,” “Flexible dates,” or “Surprise me” to support undecided users
Same search bar structure used across different contexts without adaptation
- Homepage, category pages, and landing pages shared identical behavior
- No adjustment based on user intent (inspiration vs. goal-oriented search)
Overall lack of a clear strategy for how the search bar should scale and adapt visually and functionally across the product

These issues made the search bar feel passive, rigid, and misleading, reducing exploration, increasing friction, and limiting its role as a core discovery and conversion tool.

Older version of the search bar displayed on desktop and mobile layouts for Tripaneer, a health and wellness travel website.

Search Bar Solutions

New search bar design showcasing modular filters for destination, experience type, and travel dates across desktop and mobile

Implemented Solutions & UX/UI Improvements (New Search Experience)

Clear separation of intent
- Search is divided into explicit steps: Where to?, What to do?, When to go?
- Each input reflects a distinct user decision, reducing cognitive load
Real search behavior
- Inputs now behave as true search fields, not redirect triggers
- Users can type, explore, and refine before executing the search
Autosuggestions & recommendations
- Recently viewed searches surfaced for quick re-entry
- Popular destinations and experiences shown to guide low-intent users
- “Everything” option supports broad exploration
Discovery support for undecided users
- “Nearby destinations” feature encourages exploration without a fixed goal
- Popular categories and experiences are visually promoted
- Supports both inspiration-driven and goal-driven users
User control before commitment
- Selections are confirmed via Apply actions instead of instant redirects
- Users can review and adjust choices without losing context
Improved date picker UX
- Clear distinction between Arrival Day, Arrival Month, and Flexible
- Visual calendar with explicit selection states
- Flexible date options (±1, ±2, ±3 days) support uncertainty
- Clear Apply CTA communicates when dates are locked in
Context-aware interaction
- Search bar adapts between desktop and mobile layouts
- Inputs expand into focused panels, improving readability and usability
Consistent CTA strategy
- Single, clear Search Results CTA
- Removes ambiguity around when the search is executed
Scalable design system
- Modular structure allows reuse across homepage, search results, and landing pages
- Search adapts to context without changing core behavior
Improved visual hierarchy
- Icons reinforce meaning and reduce reliance on text
- Spacing, alignment, and card structure improve scannability
- Information density is controlled, preventing overwhelm
Trust and confidence
- Predictable interactions reduce anxiety and hesitation
- Users understand what will happen before results are shown
- The search experience feels intentional, reliable, and user-centere

These changes transformed the search bar from a passive input into an active discovery and conversion tool, improving usability, exploration, and user confidence.

Implementation Strategy - Content Aware

Diagram illustrating a content-aware search bar strategy, showing adaptive placement and behavior across homepage, search res

Implementation Strategy – Context-Aware Search Bar Design

To improve usability and relevance, the search bar UI and features were intentionally adapted based on page context and user intent. Instead of using a single, rigid search pattern, the search experience was customized to support different mental models and decision stages.

Overall Impact

Search behavior adapts to user intent instead of forcing a single pattern
Reduces cognitive load at each stage of the journey
Improves speed for decisive users and guidance for exploratory users
Creates a cohesive, predictable experience across the platform

This context-aware approach transformed the search bar into a flexible, scalable tool that supports discovery, refinement, and conversion across different entry points.

● 15 min read

Booking Flow Findings

Before redesign: Tripaneer booking flow showing the original book-now modal, checkout page, and booking confirmation screen.

Old booking flow — why it failed?

1. Zero retention logic
The flow was designed as a one-shot transaction. If the user left, the system forgot them. No recovery, no memory, no second chance. This is conversion leakage by design.

2. No way to save intent
Users interested but not ready to pay had no way to save an offer. No email capture with value, no deferred decision support. Closing the page meant losing everything.

3. Abandoned payment = dead end
If the user exited during checkout, there was no structured return path. The system treated abandonment as failure instead of a high-intent state.

4. Unclear payment logic
Payment information was scattered across the page. Deposit rules, totals, and timing were cognitively expensive to parse. Users had to work to understand what they were paying and why.

5. Redundant and low-value information
Too much noise during a high-stakes moment. Repeated labels, secondary actions, and non-essential content diluted focus from the primary task: completing the booking.

6. No system feedback during payment
After clicking pay, the interface went silent. No loading state, no reassurance, no status visibility. This creates anxiety and increases drop-off or double submissions.

7. Weak confirmation hierarchy
The booking confirmation page lacked structure. Critical information (status, next steps, payment context) competed visually with secondary content. Users had to scan instead of instantly understand.

8. Account creation was an afterthought
Guests were allowed to leave without any incentive to create an account. The platform lost long-term value for short-term friction avoidance.

Booking Flow & UI Solutions

Redesigned Tripaneer booking flow diagram showing improved user paths, payment states, return modals, and confirmation screen

New booking flow — what was fixed and why it works

1. Retention-first flow design
The flow now assumes users may leave and plans for it. Returning visitor modals allow users to continue abandoned payments instead of restarting. This converts hesitation into delayed commitment.

Why it works:
Abandonment is reframed as “not yet,” not “no.” High-intent users are recovered instead of lost.

2. “Send offer by email” as a save mechanism
Users can explicitly save an offer and access it later via email.

Why it works:
This captures intent without forcing payment. It reduces pressure, builds trust, and creates a re-entry point outside the session.

3. Clear recovery paths for both guests and logged-in users
Returning modals differentiate between users with accounts and guests, nudging guests toward account creation without blocking progress.

Why it works:
Accounts are promoted at moments of value, not at entry. This increases account creation without increasing friction.

4. Explicit payment processing state
A dedicated loading / reminder state during payment communicates that the system is working.

Why it works:
Removes uncertainty, reduces anxiety, and prevents premature exits or repeated actions.

5. Simplified and focused payment information
Payment details are consolidated, prioritized, and contextual. Only essential information is shown at the moment it’s needed.

Why it works:
Lower cognitive load increases completion rates. Users understand what they’re paying, when, and why—without effort.

6. Strong visual and copy hierarchy
Primary actions, statuses, and next steps are visually dominant. Secondary information is demoted.

Why it works:
Users no longer scan; they recognize. The interface does the thinking for them.

7. Confirmation page redesigned around user intent
The confirmation page now clearly answers:

Is my booking complete?
What happens next?
Where can I find this later?

Why it works:
Clarity reduces post-purchase anxiety and support requests, and reinforces trust in the platform.

8. Strategic promotion of account creation
Account creation is positioned as a benefit (saving progress, reminders, access), not an obligation.

Why it works:
Users opt in because it helps them, not because the system demands it.

Bottom line

The old flow optimized for a single uninterrupted session.
The new flow optimizes for real human behavior: hesitation, distraction, comparison, and return.

This is the difference between a transactional interface and a retention system.

● 15 min read

Product Cards Solutions

UI/UX process showing evolution of a product card design, highlighting visual hierarchy improvements, accessibility updates,

Solutions introduced in the new cards

Main category label added
Clearly surfaces the primary product type to prevent misinterpretation at scan level.
Subcategory labels added
Wellness, teaching, yoga, hiking, etc. clarify multi-dimensional offerings and increase perceived value accuracy.
Country flag added next to location
Improves instant recognition and reduces reading friction.
Discounted price redesigned
Increased size, stronger weight, and red color to clearly emphasize savings and price difference.
WCAG-compliant discount label
Updated color contrast and added a white border to ensure visibility on image-heavy and red-dominant visuals.
Icons added for key logistics
Number of people, duration, and start date now rely on visual cues, improving speed of comprehension.
Gift label introduced
Allows organizers to highlight extra benefits included as gifts without cluttering the main content.
Shadows to indicate clickability
Subtle elevation was introduced to clearly signal interactivity and improve affordance.
Rounded corners for a friendlier UI
Softer edges create a more approachable, modern feel and align better with lifestyle and wellness content.

Why this helped

Faster decision-making through improved visual hierarchy
Reduced confusion between fundamentally different product types
Better scanability on listing pages with dense content
Clearer value communication, especially around discounts and inclusions
Improved accessibility and visual consistency across imagery

Tripaneer ( 3 Samples )

Search Bar Diagnosis

Search Bar Solutions

Implementation Strategy - Content Aware

Booking Flow Findings

Old booking flow — why it failed?

​

1. Zero retention logic The flow was designed as a one-shot transaction. If the user left, the system forgot them. No recovery, no memory, no second chance. This is conversion leakage by design.

2. No way to save intent Users interested but not ready to pay had no way to save an offer. No email capture with value, no deferred decision support. Closing the page meant losing everything.

3. Abandoned payment = dead end If the user exited during checkout, there was no structured return path. The system treated abandonment as failure instead of a high-intent state.

4. Unclear payment logic Payment information was scattered across the page. Deposit rules, totals, and timing were cognitively expensive to parse. Users had to work to understand what they were paying and why.

5. Redundant and low-value information Too much noise during a high-stakes moment. Repeated labels, secondary actions, and non-essential content diluted focus from the primary task: completing the booking.

6. No system feedback during payment After clicking pay, the interface went silent. No loading state, no reassurance, no status visibility. This creates anxiety and increases drop-off or double submissions.

7. Weak confirmation hierarchy The booking confirmation page lacked structure. Critical information (status, next steps, payment context) competed visually with secondary content. Users had to scan instead of instantly understand.

8. Account creation was an afterthought Guests were allowed to leave without any incentive to create an account. The platform lost long-term value for short-term friction avoidance.

Booking Flow & UI Solutions

New booking flow — what was fixed and why it works

1. Retention-first flow design The flow now assumes users may leave and plans for it. Returning visitor modals allow users to continue abandoned payments instead of restarting. This converts hesitation into delayed commitment.

Why it works: Abandonment is reframed as “not yet,” not “no.” High-intent users are recovered instead of lost.

2. “Send offer by email” as a save mechanism Users can explicitly save an offer and access it later via email.

Why it works: This captures intent without forcing payment. It reduces pressure, builds trust, and creates a re-entry point outside the session.

3. Clear recovery paths for both guests and logged-in users Returning modals differentiate between users with accounts and guests, nudging guests toward account creation without blocking progress.

Why it works: Accounts are promoted at moments of value, not at entry. This increases account creation without increasing friction.

4. Explicit payment processing state A dedicated loading / reminder state during payment communicates that the system is working.

Why it works: Removes uncertainty, reduces anxiety, and prevents premature exits or repeated actions.

5. Simplified and focused payment information Payment details are consolidated, prioritized, and contextual. Only essential information is shown at the moment it’s needed.

Why it works: Lower cognitive load increases completion rates. Users understand what they’re paying, when, and why—without effort.

6. Strong visual and copy hierarchy Primary actions, statuses, and next steps are visually dominant. Secondary information is demoted.

Why it works: Users no longer scan; they recognize. The interface does the thinking for them.

7. Confirmation page redesigned around user intent The confirmation page now clearly answers:

Is my booking complete?

What happens next?

Where can I find this later?

Why it works: Clarity reduces post-purchase anxiety and support requests, and reinforces trust in the platform.

8. Strategic promotion of account creation Account creation is positioned as a benefit (saving progress, reminders, access), not an obligation.

Why it works: Users opt in because it helps them, not because the system demands it.

Bottom line

The old flow optimized for a single uninterrupted session. The new flow optimizes for real human behavior: hesitation, distraction, comparison, and return.

This is the difference between a transactional interface and a retention system.

Product Cards Solutions

Solutions introduced in the new cards

Main category label added Clearly surfaces the primary product type to prevent misinterpretation at scan level.

Subcategory labels added Wellness, teaching, yoga, hiking, etc. clarify multi-dimensional offerings and increase perceived value accuracy.

Country flag added next to location Improves instant recognition and reduces reading friction.

Discounted price redesigned Increased size, stronger weight, and red color to clearly emphasize savings and price difference.

WCAG-compliant discount label Updated color contrast and added a white border to ensure visibility on image-heavy and red-dominant visuals.

Icons added for key logistics Number of people, duration, and start date now rely on visual cues, improving speed of comprehension.

Gift label introduced Allows organizers to highlight extra benefits included as gifts without cluttering the main content.

Why this helped

Tripaneer
( 3 Samples )

1. Zero retention logic
The flow was designed as a one-shot transaction. If the user left, the system forgot them. No recovery, no memory, no second chance. This is conversion leakage by design.

2. No way to save intent
Users interested but not ready to pay had no way to save an offer. No email capture with value, no deferred decision support. Closing the page meant losing everything.

3. Abandoned payment = dead end
If the user exited during checkout, there was no structured return path. The system treated abandonment as failure instead of a high-intent state.

4. Unclear payment logic
Payment information was scattered across the page. Deposit rules, totals, and timing were cognitively expensive to parse. Users had to work to understand what they were paying and why.

5. Redundant and low-value information
Too much noise during a high-stakes moment. Repeated labels, secondary actions, and non-essential content diluted focus from the primary task: completing the booking.

6. No system feedback during payment
After clicking pay, the interface went silent. No loading state, no reassurance, no status visibility. This creates anxiety and increases drop-off or double submissions.

7. Weak confirmation hierarchy
The booking confirmation page lacked structure. Critical information (status, next steps, payment context) competed visually with secondary content. Users had to scan instead of instantly understand.

8. Account creation was an afterthought
Guests were allowed to leave without any incentive to create an account. The platform lost long-term value for short-term friction avoidance.

1. Retention-first flow design
The flow now assumes users may leave and plans for it. Returning visitor modals allow users to continue abandoned payments instead of restarting. This converts hesitation into delayed commitment.

Why it works:
Abandonment is reframed as “not yet,” not “no.” High-intent users are recovered instead of lost.

2. “Send offer by email” as a save mechanism
Users can explicitly save an offer and access it later via email.

Why it works:
This captures intent without forcing payment. It reduces pressure, builds trust, and creates a re-entry point outside the session.

3. Clear recovery paths for both guests and logged-in users
Returning modals differentiate between users with accounts and guests, nudging guests toward account creation without blocking progress.

Why it works:
Accounts are promoted at moments of value, not at entry. This increases account creation without increasing friction.

4. Explicit payment processing state
A dedicated loading / reminder state during payment communicates that the system is working.

Why it works:
Removes uncertainty, reduces anxiety, and prevents premature exits or repeated actions.

5. Simplified and focused payment information
Payment details are consolidated, prioritized, and contextual. Only essential information is shown at the moment it’s needed.

Why it works:
Lower cognitive load increases completion rates. Users understand what they’re paying, when, and why—without effort.

6. Strong visual and copy hierarchy
Primary actions, statuses, and next steps are visually dominant. Secondary information is demoted.

Why it works:
Users no longer scan; they recognize. The interface does the thinking for them.

7. Confirmation page redesigned around user intent
The confirmation page now clearly answers:

Why it works:
Clarity reduces post-purchase anxiety and support requests, and reinforces trust in the platform.

8. Strategic promotion of account creation
Account creation is positioned as a benefit (saving progress, reminders, access), not an obligation.

Why it works:
Users opt in because it helps them, not because the system demands it.

The old flow optimized for a single uninterrupted session.
The new flow optimizes for real human behavior: hesitation, distraction, comparison, and return.

Main category label added
Clearly surfaces the primary product type to prevent misinterpretation at scan level.

Subcategory labels added
Wellness, teaching, yoga, hiking, etc. clarify multi-dimensional offerings and increase perceived value accuracy.

Country flag added next to location
Improves instant recognition and reduces reading friction.

Discounted price redesigned
Increased size, stronger weight, and red color to clearly emphasize savings and price difference.

WCAG-compliant discount label
Updated color contrast and added a white border to ensure visibility on image-heavy and red-dominant visuals.

Icons added for key logistics
Number of people, duration, and start date now rely on visual cues, improving speed of comprehension.

Gift label introduced
Allows organizers to highlight extra benefits included as gifts without cluttering the main content.