Ashish

JPMorgan Chase · ORXe 3.0

Travel, paid in points

I led Flights design for ORXe 3.0, the rewards travel platform behind JPMorgan Chase’s loyalty programs. Card members book flights, hotels, cars and activities with points, cash or both, and three usability studies showed exactly where the old platform let them down.

Redesigned home page: Where to next, John? A search bar for From, To, dates and travelers, with the balance of 72,000 points worth $720 in the header
Mobile departure results with the 72,000-point balance in the header and each fare priced in cash or points
Mobile Choose your fare screen: Basic Economy $137 per person or 13,700 points
My role
Flights Lead Designer
Research to build QA
Duration
4 years, 1 month
Web, mobile and tablet
Scope
35+ user flows
WCAG 2.0 AA, new design system
Reported impact
+21% cart to booking−19% abandonment14 new clients in 6 months

The short version

Summary

The problem

ORXe 2.0 made members work to spend their points. Three usability studies showed them abandoning searches they couldn’t complete, missing a points balance hidden in a menu, and second-guessing what they would pay.

What I did

As Flights lead, I turned those findings into the 3.0 booking flow: a destination search ranked for real travel, points shown as money on every screen, and a points calculator in the trip cart.

Outcome

After launch the team reported +21% cart-to-booking conversion, −19% abandonment and 14 new bank clients in six months.

Project overview

A booking site where the currency is points

ORXe is the travel platform behind JPMorgan Chase’s loyalty business. Banks offer it to their card members, who turn the reward points they have earned into flights, hotels, rental cars and activities.

Version 2.0 had fallen behind. Its task flows were overly complex, the interface and legacy system were dated, and it compared poorly with Expedia, Priceline and the airlines’ own sites.

ORXe 3.0 was a full rebuild: a modern stack on a micro-frontend architecture, a simpler booking flow, and an interface each bank client could adapt without the team designing it again.

The challenge

A booking site that made members work to spend their points

ORXe 2.0 compared poorly with Expedia, Priceline and the airlines’ own sites. Its flows were complex and its UI dated. For a product whose only job is turning points into trips, that cost bookings, and it made the platform harder to sell to new banks.

Business need

One platform every bank can sell

Rebuild on a modern micro-frontend stack, with an interface each bank client can rebrand and configure without the team designing it again.

User need

Know what my points buy, then book it

Find a destination, see what it costs in points and cash, and choose how to pay without doing the maths.

What we committed to

  • A mobile-first design that adapts to larger screens
  • An accessible UI that meets WCAG 2.0 AA
  • A design system robust enough for many clients and use cases
  • A simpler travel booking experience built around loyalty points
  • A front end built on a micro-frontend architecture

What made it hard

Building a design system from scratchAlongside product work
Usability research done remotelyDistributed team and testers
Stringent delivery timelinesPhased releases
Consistency across productsFlights, hotels, cars, activities, cruises

Who we designed for

Members who visit once or twice a year

Who

Card members of leading US banks, aged 25 and above.

What

Book flights, hotels, cars and activities with their rewards.

When

Once every six months to a year, because points take time to build up.

How

Mostly on mobile and desktop.

Design principle

Members come back too rarely to learn the interface. So every screen had to explain itself, and points had to read as money the moment they appeared.

Persona portrait of Jerome Bell
Age
32
Location
California
Occupation
Self-employed

Persona · Flight user

Jerome Bell

“My mom said I should get a rewards card to start racking up points since I’m travelling so much during breaks and summer.”

Goals

  • Find affordable destinations that are still comfortable and safe
  • Experience local cultures
  • See Europe before settling down

Frustrations

  • Doesn’t have enough points to cover the whole cost of most flights
  • Can’t use points on commuting or transit passes
  • Wants more hotel deals, like free nights and breakfast

Booking habits

  • Prefers non-stop, but takes more stops if it’s cheaper
  • Doesn’t mind red-eye flights
  • Prefers public transport to rental cars

User research

Three usability studies of the platform we were replacing

Before redesigning, we needed evidence of where ORXe 2.0 was losing members. Three usability studies covered the live booking flow and an early redesign of payment. Every major design decision in 3.0 traces back to what we saw in them.

A

Research objectives

Points are both the reason members come and the currency they pay with. So we focused the studies on the moments where points and travel decisions meet.

  1. Can members find where they want to go? How destination search and auto-suggest behave with real, loosely-defined trips.
  2. Do members understand what their points are worth? Where the balance appears, and how points and cash prices are read.
  3. Can members decide how to pay? How they choose between points, cash and a mix, and where that choice should live in the flow.
  4. Where does booking slow down? Friction in results, fare details and checkout, on mobile and desktop.

The answers set the priorities for 3.0: what to fix first in search, how to present points, and where the payment decision belongs.

B

Methodology

Study 1

Points and payment on mobile

Evaluated
ORXe 2.0’s mobile payment options, and an initial redesign that moved the payment choice next to the itinerary
Focus
Points balance, pricing labels, choosing how to pay
Platform
Mobile web

Study 2

Destination search

Evaluated
Destination auto-suggest on the live site, using recorded remote sessions
Scenarios
Open-ended trips, e.g. “use points on flights to Greece, not sure where yet”
Platform
Mobile and desktop

Study 3

End-to-end benchmark

Evaluated
The live booking site: search, flights, hotels and checkout
Participants
15: 9 desktop, 6 mobile. 8 women aged 26–54, 7 men aged 26–45
Platform
Mobile and desktop

Who took part (Study 3)

  • Not existing customers of the bank’s travel program
  • Spend $30,000 or more a year on credit cards
  • Own and use at least one travel rewards card
  • Redeemed points or miles for travel in the past 3 months

Limits of the evidence

Study 3 had 15 participants; Studies 1 and 2 report observations and session clips, but not their sample sizes. These are qualitative signals of where people struggle, not measures of how often. Client names are removed for the NDA.

C

Key observations

What participants did, where it happened, and why it matters. Quotes and timings are from the study reports.

High risk Study 2 · Destination search

Searched for over 3 minutes for Greece, then gave up

What happened
A participant planning a vacation in Greece, unsure where, never saw Athens. Auto-suggest offered four small island airports; she Googled them and picked one.
Evidence
Session recording, 3 min 24 s
Why it matters
She assumed flights were unavailable or sold out. The report’s verdict: “We lose the customer.”

High risk Study 2 · Destination search

Couldn’t find Sydney after 5 minutes

What happened
A participant returning to Australia knew some airport codes but got no relevant results. Typing “austr” suggested Green Bay, Austin and UK airports. Even a city he knew had an airport returned nothing.
Evidence
Session recordings, 5 min 26 s and 58 s
Why it matters
He abandoned the search, a booking lost before it began.

Study 2 · Destination search

Results ranked illogically, and typing a city broke the search

What happened
“San Juan” ranked an Argentine airport with 131,047 yearly passengers above Puerto Rico’s with 8,488,172. Typing only a city name invalidated the search, and truncated field text added confusion.
Evidence
Annotated screenshots and clips, desktop and mobile. One participant: “This is annoying as hell.”
Why it matters
Members expect the biggest, most likely airport first, the way other travel sites work.

Studies 2 and 3 · Destination search

People expected an “All airports” option, and the code on it misled them

What happened
On both platforms, participants looked for a way to search every airport in a city. Where the option existed, some fixated on its airport code and didn’t expect other airports in the results.
Evidence
Session clips (Study 2); observation and screenshot (Study 3)
Why it matters
A wrong airport assumption surfaces late, on the results page, after the member has invested effort.

Studies 1 and 3 · Points balance

No one found the points balance unless prompted

What happened
The balance lived inside the hamburger menu. Participants said knowing it from the start helps them choose flights, and that they use as many points as they have.
Evidence
Key findings, Study 1; observation, Study 3
Why it matters
Members were choosing flights without knowing their budget.

Studies 1 and 3 · Pricing

Prices were read as per leg, and “From” raised doubts

What happened
On mobile, 2 of 8 participants assumed a round-trip price was for one leg. Some said the word “From” before a points price made them wonder what was coming next.
Evidence
Study 3 flight findings; Study 1 key findings
Why it matters
Doubt about the total undermines the one number members are deciding on.

Study 1 · Choosing how to pay

Deciding how to pay on the same page felt “less clunky”

What happened
Participants understood the payment options when they could choose them from the itinerary page itself, rather than on a separate page.
Evidence
Key findings and recommendations, Study 1
Why it matters
The payment decision is the core of a points booking; it shouldn’t be a detour.

Study 3 · Results and checkout

Small labels and missing defaults slowed people down

What happened
Sort and filter weren’t apparent on mobile. More mobile users opened “What does this fare include?” than desktop users opened “Fare Details”. Participants preferred choosing flight by flight, and expected traveler and billing details to be filled in.
Evidence
Study 3 findings; Study 1 additional observations
Why it matters
Each is minor alone, but together they make a long checkout feel longer.

D

Findings by theme

Grouping the observations showed four problems. Each one separates what we saw from the need behind it and the opportunity it opened.

01Finding the destination

Observed
Abandoned searches for Greece and Sydney; small airports ranked above hubs; city names and countries not matched.
Problem
Auto-suggest matched text, not intent. It had no sense of airport size, popularity or country.
Need
Type a place the way you’d say it, and see the most likely airport first.
Opportunity
Rank by popularity and size; group airports under their city with an “All airports” option.

02Seeing what points are worth

Observed
Balance found by no one unprompted; prices read as per leg; “From” created doubt.
Problem
Points were treated as an account setting, not as the budget for the trip.
Need
Know my budget before I compare, and trust that a price is the whole price.
Opportunity
Show the balance and its dollar value on every screen; label every price as round trip, in points and cash.

03Deciding how to pay

Observed
Same-page choice felt less clunky; members use as many points as they have.
Problem
The payment choice sat on a separate page, behind reward names like “AIR REWARD VARIABLE”.
Need
Choose all, none or some of my points, and see the cash left to pay as I go.
Opportunity
Put the decision in the cart, default to using points, and keep it editable until checkout.

04Getting through results and checkout

Observed
Hidden sort and filter on mobile; weak “Fare Details” label; preference for flight by flight; details not pre-filled.
Problem
Many small frictions, each easy to fix, together slowing a long flow.
Need
Compare quickly, understand what a fare includes, and not retype what the site already knows.
Opportunity
Flight-by-flight results, question-style labels, visible controls, and saved travelers and cards.

E

Evidence from the studies

Screens captured during the studies. Numbered markers point to the problem; the key below each image explains it.

Old destination auto-suggest after typing 'austr': Green Bay WI, Austin TX, then Penzance Heliport and other UK airports. No Australian airport appears.
  1. The top match for “austr” is Green Bay, Wisconsin, matched on the airport name “Austin Straubel”.
  2. Next come Austin, Texas, and four small UK airports, one of them a heliport.
  3. Country names aren’t matched, so Sydney and Melbourne never appear.
Study 2 · Desktop The search a participant abandoned after more than five minutes.
Auto-suggest for 'San Juan p' with the study's annotations: San Juan, Argentina (131,047 yearly passengers) ranked above San Juan, Puerto Rico (8,488,172 yearly passengers)
Study 2 The study’s own annotation: a 131,047-passenger airport ranks above one serving 8.5 million a year.
Auto-suggest for Los Angeles with 'LAX All Airports - Los Angeles' at the top, circled by the researchers
Study 3 “All airports” carried the code LAX, so some participants assumed it meant LAX alone.
ORXe 2.0 mobile payment options: per ticket and total in points, an 'AIR REWARD VARIABLE - BASE R' bar, apply this reward to 2 tickets, total due, and stacked reward buttons including Pay in cash
  1. Reward options carry internal product names.
  2. Members apply a reward to a number of tickets.
  3. The points, cash and new balance sit in small type.
  4. Other ways to pay are a stack of look-alike buttons.
ORXe 2.0 · Mobile Payment options before the redesign. Markers are from our design review.
Initial redesign of payment options tested in Study 1: balance of 13,569 points, Use my points with a redeem field, $100 off, and Keep my points, pay $250.69
  1. The balance is restated where the decision happens.
  2. A field to redeem an exact number of points.
  3. “Keep my points” states the cash price instead.
  4. But the choice still lived on its own page.
Study 1 · Initial iteration Tested with participants. The labels worked; the separate page didn’t.

Focus finding · Study 3

Members prefer to pick one flight at a time

ORXe 2.0 showed round trips as a single card: the departure and the return stacked together, priced as one. Study 3 tested this against a flight-by-flight view, where members choose the departing flight first and the return flight next. In the report’s words, testing “continued to validate that users expect and prefer to see flight options in a flight by flight view, rather than round trip.”

What we saw

In the round-trip view, two legs per card made each card taller, and participants perceived fewer results. The flight-by-flight view showed more results when the page loaded.

What the study recommended

Display flight results flight by flight by default.

Related signal

On mobile, 2 of 8 participants read a round-trip price as the price of one leg.

Mobile round-trip results: a sort field reading Price: Low to High, a small Filter By link, and a card listing both flight legs with fare options below
  1. Sort is styled like a text field.
  2. Filter is a small underlined link.
  3. Both legs share one card; the price sits further down.
Study 3 · Mobile ORXe 2.0 round-trip results: both legs in one card. Sort and filter went unnoticed, and 2 of 8 read the price as per leg.
Study 3 desktop screenshot: round-trip format, one card listing LGA to MIA and MIA to LGA with a shared Basic Economy price of 21,440 miles or $214.40
Study 3 · Desktop · Round trip Both legs share one card and one price.
Study 3 desktop screenshot: flight-by-flight format, a single LGA to MIA flight per card with its fare options
Study 3 · Desktop · Flight by flight One leg per card, so cards are shorter and more fit on screen.
Why choosing each leg separately works better
  • More choice. Members aren’t limited to the pairings the site pre-builds. They can match any departure with any return by time, airline, price or stops.
  • One decision at a time. Each page answers one question, “which flight out?” and then “which flight back?”, instead of weighing two sets of times, stops and prices in one card.
  • Cleaner comparison. Sort, filters and fares apply to a single leg, so options line up directly against each other. The cards are shorter, so more of them fit on the screen.
  • Better-informed choices. Members can favour what matters most on each leg, such as an early departure or a cheaper, later return, and see what each choice costs as they go.

What outside research says

  • Staged disclosure. Jakob Nielsen (Nielsen Norman Group) describes revealing a subset of options at each step, as wizards do, as a way of making interfaces “easier to learn and less error-prone”. Progressive Disclosure, NN/g, 2006
  • The pattern members already know. Google Flights lists departing flights first and shows matching return flights once one is chosen, the same sequence ORXe 3.0 uses.
  • The trade-off to design for. A 2019 pilot with 23 users (Zlokazova et al., INTERACT) found a two-page flow faster than a one-page one, but with more errors and a higher memory load, because people must remember the first choice. IFIP Digital Library

The research also flagged the trade-off: on a two-step flow, members have to remember their first choice. See how ORXe 3.0 handles it in the final designs →

F

Synthesis

Prioritised by the risk each problem posed to a completed booking. Only Study 2 rated severity; the rest of the order is our judgement.

  1. 1

    If members can’t find the destination, nothing else matters

    Rated high risk in Study 2

    Root cause: text matching with no notion of airport size, popularity or country. Implication: fix search first; it’s the top of the funnel.

  2. 2

    Points are the budget, so they must read as money everywhere

    Seen in Studies 1 and 3

    Root cause: the balance was treated as account information and prices didn’t state their scope. Implication: show balance, dollar value and a complete points-and-cash price on every screen.

  3. 3

    The payment decision belongs inside the trip, not after it

    Seen in Study 1

    Root cause: payment was a separate step with product jargon. Implication: let members set points in the cart, with the cash balance updating live and a default of using their points.

  4. 4

    Remove small frictions that add up over a long flow

    Seen in Study 3

    Root cause: weak labels, hidden controls and no saved data. Implication: flight-by-flight results, question-style labels, visible sort and filter, and saved travelers and cards.

G

From research to design

Each 3.0 decision, traced back to the evidence behind it.

ObservationPain pointInsightOpportunityDesign decision
Gave up on Greece and Sydney after 3–5 minutes Can’t find the destination Search matched text, not intent Rank by size; group by city Auto-suggest ranked by popularity, with “All airports” and nested airports
No one found the balance unprompted Choosing flights without a budget Points are the budget Always show balance as money Balance and its dollar value in every header, e.g. “72,000 pts · $720”
2 of 8 read round trip as per leg; “From” raised doubts Unsure what the total is A price must state its scope Complete, labelled prices Every fare in cash and points, e.g. “$68 or 6,800 pts”, labelled per person
Same-page choice felt less clunky Payment was a detour Decide payment inside the trip Live points-and-cash control “How many points do you want to use?” under the trip summary: use my points or pay with card
More mobile users opened “What does this fare include?” “Fare Details” overlooked Questions invite a click Question-style labels Fare tiles listing what each fare includes, plus a full comparison on the fare step
Preferred flight by flight; expected pre-filled details Slow comparison and retyping Use what the site knows Simpler steps, saved data Departure then return, with the departing flight kept in view; saved traveler profiles and cards; flexible-dates grid
ORXe 3.0 destination auto-suggest for 'San': SFO San Francisco first, then San Diego All Airports with SAN and CLD nested beneath it, then SJC San Jose
  1. The busiest airport for “San” ranks first.
  2. Cities group their airports under “All Airports”.
  3. Each airport sits beneath its city: code, name, city and country.
ORXe 3.0 · Design The redesigned auto-suggest, answering Insight 1.

Not addressed in these screens: participants also asked for PayPal at checkout and for adding trips to a calendar. Neither appears in the 3.0 screens shown here.

Market and backlog

What competitors set as the baseline

Alongside the studies, we benchmarked five booking sites and turned the findings into user stories for the backlog.

Competitive analysis

We compared how five booking platforms and airlines handle 17 search and booking capabilities, to find the ones our members would expect.

ExpediaPricelineAmexDeltaUnited
  • Round-trip, one-way and multi-city search
  • Preferred airlines and cabin class
  • Non-stop and refundable filters
  • Nearby airports and flight times
  • Saved search within a session
  • Separate departure and return selection
  • Seat map within results
  • Fare upgrades and fare rules
  • Change flight within checkout
  • Seat assignment before checkout

User stories

We turned persona pain points into user stories and managed them in Jira with the development team. Two of them defined this product.

As a frequent flyer, I want to make reservations using my loyalty points or a combination of points and cash.

As a traveler, I need to know how much my points are worth in cash so I can choose the right flight.

As a budget-conscious traveler, I want a breakdown of all fees, including baggage and seats, so I can compare the true cost.

As a traveler, I want emails about delays and gate changes so I can adjust my plans.

Problem definition

Three questions for the team

The research and Jerome’s biggest frustration, not having enough points for a whole flight, pointed at the same core problem. I framed the brief as three questions: two for members, one for the business.

For members · Insights 1, 2

How might we make points read as money, so members know what they can afford at a glance?

For members · Insight 3

How might we let members pay with any mix of points and cash without doing the maths themselves?

For the business

How might we build one experience every bank client can rebrand and configure for its own program?

Design strategy

Treat points as a currency, not a payment method

On a normal travel site the main question is price. Here, members also ask what their points will cover, and what they will owe on top. The research made that the organising idea, and it became four principles that run through the product.

Balance Insight 2

Your balance is always in view

The points balance and its dollar value sit in the header of every page, so members know their budget before they compare a single flight. The home screen greets them with it too.

72,000 pts · $720

Mobile results with the points balance and its dollar value in the header

Pricing Insight 2

Every price in two currencies

Every flight shows its fare options upfront, each priced in cash and in points. Members compare flights in the currency they plan to pay with, and Discounted Points Fares show the points they save.

$104 or 7,000 pts 10,400

American Airlines AA 852 result with three fares: Basic Economy $68 or 6,800 points, Main Cabin $104 or 7,000 points instead of 10,400, Business $213 or 14,200 points

Payment Insight 3

Pay with any mix of points and cash

Under the trip summary, members choose to use their points or pay by card. With points, they can take the maximum or set an exact amount; what's left to pay by card and the points remaining update as they go.

How many points do you want to use? Use my points with 27,400 points applied, $20.00 left to pay by card and 44,600 points left, or Pay with card

Trips

One cart for the whole trip

Flights and a rental car collect in one trip cart, with hotels and activities added from the trip after booking. Everything then lives in the trip, with the full itinerary.

Add a car: Intermediate, Compact and Full-size SUV, each with a photo, daily price and an Add button

Design strategy · Journey

Where points enter the flow

From the sitemap and user stories we mapped more than 35 flows. The booking flow below is the spine of them all. The trip cart is where the points decision happens, so it sits before traveler details and payment, while members can still change their mind.

  1. Search
  2. Choose outbound flight
  3. Choose return flight
  4. Review, seat map and upgrades
  5. Trip cart Points calculator
  6. Traveler details
  7. Payment and review
  8. Confirmation and My Trips
Information architecture: home leads to Flights, Hotels, Cars, Activities, Cruises, Deals, My Trips, Cart and Profile; flights split into round trip, one way and multi-city
High-level information architecture. Some details are changed for the NDA.
Round-trip flight user flow from the home page through results to details
Round-trip flow, home to flight details, with modals for basic economy and mixed fares.
User flow from details through review cart, checkout and confirmation, including the points calculator
Details to confirmation. The points calculator is a component inside the review cart.

Exploration and iteration

From paper to fare grids, and back again

We sketched web and mobile on paper first, then moved to high-fidelity wireframes to test fare options, compare and mix-and-match fares, always with the cash price and points price shown together.

Hand-drawn wireframe of the desktop flight search page
Low-fidelity sketch of the desktop search page.
High-fidelity wireframe of a flight result with fare options and a points price
Results wireframe: fare options per flight and the price in dollars or points.
High-fidelity wireframe of a fare grid with five cabins, each priced in dollars and points
Fare grid exploration. Every cabin shows dollars and points. Swipe to see all five.

Iteration · Choosing how to pay

From a separate page to a control in the cart

The first redesign kept payment on its own page, reached from the itinerary. In Study 1 participants understood its options, but found making the decision on the same page “less clunky”.

The study recommended defaulting to “Use my points”, keeping a field for an exact amount, and labelling the alternative “Keep my points, pay $XX.XX”. That became the 3.0 points calculator, set inside the trip cart, beside the payment summary.

  1. ORXe 2.0Separate pageReward products and ticket counts
  2. Tested iterationPlain optionsUse my points, a redeem field, Keep my points
  3. ORXe 3.0In the cartA live calculator with three quick choices

The final solution

ORXe 3.0

Points first, mobile first, and built to be rebranded.

New in ORXe 3.0

Discounted Points Fares: the same seat for fewer points

On some flights and fares, points go further. ORXe 3.0 makes those offers easy to spot, easy to filter for, and visible all the way to checkout, so members can see exactly how many points they save.

  1. 01 · Spot it in the results

    The saving is on the fare itself

    Flights with an offer carry a Discounted points tag. On each eligible fare, a rocket icon marks the offer, the original points are struck through next to the reduced amount, and the saving is stated. The cash price doesn’t change.

    Main Cabin · $104 or 10,400 7,000 pts · Save 3,400 pts

    Offers apply per fare: on this flight Main Cabin and Business are discounted, Basic Economy isn’t.

    Flight result with a Discounted points tag: Basic Economy $68 or 6,800 points; Main Cabin $104 or 7,000 points, was 10,400, save 3,400; Business $213 or 14,200 points, was 21,300, save 7,100
  2. 02 · Filter for it

    Show only discounted fares

    A Discounted Points Fares switch sits next to Filters and Sort on both the departure and return steps. Turned on, it narrows the list to flights with an offer, here 2 of 6, while keeping sort and other filters.

    Departure results filtered to 2 of 6 flights, both tagged Discounted points, with struck-through and reduced points on their fares
  3. 03 · Keep it through the fare step

    Clear which fares and flights qualify

    When members compare fares for the whole trip, each fare with an offer is tagged, shows the original and reduced points, and says which flights it applies to, such as “on the departing and return flights”.

    Choose your fare: Main Cabin $208 per person or 14,000 points instead of 20,800, Business 28,400 instead of 42,600, both tagged Points Boost on the departing and return flights
  4. 04 · See it at checkout

    The saving is counted, not just promised

    In the trip cart, the points applied note that they include the discount, and a separate line shows the total points saved. In this example, two travelers cover $416 of flights with 28,000 points instead of 41,600, a saving of 13,600 points.

    Trip summary and points panel: 28,000 points applied, includes Points Boost, Points Boost saving 13,600 points, $20.00 left to pay by card, 44,000 points left

Why it matters

Points go furtherThe same seat costs fewer points, so a member’s balance covers more of the trip, or more of the cabin.

Easy to findMembers don’t have to scan every fare for a deal; one switch shows them where the offers are.

Easy to trustThe original points, the reduced points and the saving are shown together at every step, so the discount never looks like a different price.

Your balance, on every page

The header always shows the member’s points and what they’re worth. On the phone, the home screen leads with it.

Header account pill: 72,000 pts, $720
Mobile home: 72,000 points ready to use. Where to next, John? Your points are worth $720 toward flights

Prices in points and cash

Every flight lists its fares upfront, each in cash or points. Discounted Points Fares show the reduced points, the original struck through and the saving.

Flight result with Basic Economy, Main Cabin and Business fares in cash or points, two of them discounted

Research → design · Study 3

Flight by flight, with the departure kept in view

Members choose the departing flight, then the return, as Study 3 recommended. To answer the trade-off the research flagged, remembering the first choice, the return step carries a Departing flight strip with a Change link, and the trip summary beside the results keeps both choices and the running price in view.

ORXe 3.0 desktop return step: a Departing flight strip with Change, 5 return flights with fare options, and a trip summary panel showing the chosen departing flight
ORXe 3.0 · Desktop · Step 2 of 2 The departure stays visible while members compare returns.
ORXe 3.0 mobile return step: Departing flight strip with Change above 5 return flights
ORXe 3.0 · Mobile The same strip on mobile.

The core feature

The points calculator

Members rarely have enough points for a whole trip. Right under the trip summary they choose: use their points, up to the maximum or an exact amount, or pay by card and keep them. Points cover the flights; fees and extras go on the card. What’s left to pay and the points remaining update with every change.

Try it

Example · 1 point = $0.01

Las Vegas ⇄ San Francisco · 2 travelersTrip total $294.00
27,400 points + $20.00
Available points
72,000
Points to redeem
27,400
Left to pay by card
$20.00
Points remaining
44,600

The real screens

How many points do you want to use? Use my points with an amount field, Max and a slider, or Pay with card
How many points do you want to use, in the trip cart
Trip summary: trip total $294.00, pay with points 27,400 points, card payment $20.00
The split, in the trip summary

The split, restated before booking

Payment repeats exactly what the card will be charged and how many points will be redeemed, with the saved rewards card ready.

Card payment: We'll charge $20.00 to your card and redeem 27,400 pts, with the saved Visa ending in 1234 and a security code field

Fares, priced both ways

One fare for the whole trip, each shown in cash and in points.

Choose your fare: Basic Economy $137 per person or 13,700 points, then Main Cabin $209

One cart for the whole trip

A rental car goes into the same cart as the flight, with photos and daily prices. Hotels and activities are added from the trip after booking.

Add a car: three car options with photos, daily and total prices, and Add buttons

The confirmation shows how it was paid

Every confirmation states the points redeemed, the amount charged and the new balance, with links to the trip details, the calendar and print.

Confirmation trip summary: 27,400 points redeemed, $20.00 charged to card, points balance now 44,600
Booking confirmed: You're going to San Francisco! with View trip details, Add to calendar and Print

Refunds in the currency you paid

Cancelling within 24 hours shows exactly what comes back: the points returned to the balance and the cash refunded to the card.

Cancel your flights: both flights listed, and Your refund with 27,400 points returned and $20.00 back to the card

Flexible dates at a glance

A date grid shows the fare for every departure and return pair, so members can spot the cheapest combination.

Flexible dates: a grid of round-trip fares for each departure and return date, with the lowest prices in green

Schedule changes, side by side

When an airline moves a flight, members compare the new schedule with the original and accept it, or look at other options.

Schedule change: the new flight next to the original flight, with Accept new flight and a refund eligibility check

Mobile first

Designed for the phone, then scaled up

Every flow started at mobile width. Points stay visible at each step, from the first search to the seat map.

Mobile home: Where to next, John? with the points balance and a stacked search form
SearchPoints up front, one short form
Mobile departure results with fares in cash or points
ResultsEvery fare in cash or points
Flexible dates grid with prices for each date pair
Flexible datesCheapest dates at a glance
Mobile Choose your fare
FareOne fare for the whole trip
Traveler information with saved traveler profiles
TravelersSaved profiles fill the form
Mobile Review and pay with the card charge and points to redeem
PaymentThe split, restated before booking
Mobile booking confirmation with View trip details, Add to calendar and Print
ConfirmationCalendar and print, one tap away
Choose seats: seat map with seat types and a seat for each traveler
Seat mapSeats for each traveler
Mobile Cancel your flights within the free 24-hour window
CancelRefund in points and cash

Desktop

The same flow, scaled up

On desktop, the extra width goes to the trip summary, which sits beside every step from return flights to payment.

Desktop Search screen
1. SearchPoints and search in one bar
Desktop Departing flight screen
2. Departing flightEvery fare in cash and points
Desktop Return flight screen
3. Return flightDeparture kept in view
Desktop Fare screen
4. FareOne fare for the whole trip
Desktop Trip cart screen
5. Trip cartChoose how many points to use
Desktop Travelers screen
6. TravelersSaved profiles fill the form
Desktop Review and pay screen
7. Review and payThe split, restated
Desktop Confirmation screen
8. ConfirmationHow the trip was paid

Before and after

From ORXe 2.0 to 3.0

Drag the handle to compare the same screen in both versions.

Search results, before and after

From a crowded list to fares you can compare at a glance

Search results are where members spend most of their decision-making time. ORXe 2.0 surrounded results with notices and showed one fare per flight. ORXe 3.0 puts the controls in one row, shows every fare upfront in cash and points, and keeps the trip in view.

Desktop

ORXe 2.0 desktop results: a long filter column on the left, a COVID notice, a points banner and a mixed-class notice above the list, and each flight with a single Economy Class fare and an orange Select button
ORXe 2.0 Notices push the first result down; one fare per flight.
ORXe 3.0 desktop results: editable search bar, one row with flight count, Discounted Points Fares, Filters and Sort, flight cards with three fare tiles, and a trip summary panel
ORXe 3.0 Controls in one row, three fares per flight, trip summary alongside.

Mobile

ORXe 2.0 mobile round-trip results: a sort field, a small Filter By link, and both legs in one card with fare options further down
ORXe 2.0 · Study 3 Two legs per card; sort and filter easy to miss.
ORXe 3.0 mobile departure results: Discounted Points Fares switch, Filters and Sort buttons, and flight cards with Basic, Main and Business fares in cash or points
ORXe 3.0 One leg per card; Filters and Sort as buttons; all fares visible.
What changedORXe 2.0ORXe 3.0
Information hierarchyTravel notices, a points banner and a mixed-class notice sit above the list on desktop. Internal codes show inside result cards.The flight count, controls and results come first. The points balance moves to the header on every page.
Comparing optionsEach card shows a single fare, with the price repeated in a side column. On mobile, both legs share one price.Every flight shows Basic Economy, Main Cabin and Business side by side, each in cash and points. Choosing a fare tile selects the flight.
Layout and screen spaceA tall filter column takes a third of the desktop width. Round-trip cards on mobile are tall, so fewer results fit.Filters open in a drawer, leaving room for wider cards and a trip summary. Mobile cards hold one leg, so more flights fit per screen.
Navigation and controlsSort looks like a text field and Filter is a small link on mobile. Changing the search means leaving the page.Filters, Sort and the discount switch are buttons in one row. The search bar can be edited in place, and filters show as removable chips.
Finding the right flightMembers compare whole round trips and can’t isolate the leg they care about.Flight by flight, with discounted fares one switch away and the departing flight kept in view on the return step.

Design system

Built to be rebranded

ORXe serves many bank clients, so every component needed a solid default plus a set of properties a client could change. We documented each component’s anatomy, behavior, properties and usage for designers and developers. The properties marked Custom are the ones a client can rebrand.

Accordion item properties

One of the documented components. Every other component followed the same format.

PropertyValue
Min height (header)64px
Max widthMobile 100% of screen
Desktop 100% of parent
Padding (header)$spacing-06
Border CustomNone
Border radius CustomMobile none
Desktop $border-radius-base
Shadow CustomType 2
Margin bottom Custom$spacing-05
Background Custom$neutral
Header font Custom$text-md, Semibold
Header color Custom$primary-text
Touch targetContainer height
Global colors table with WCAG pass and fail results for each text size
Global colors, each checked against WCAG at every text size.
Accordion anatomy documentation with numbered parts
Anatomy for the standard and custom accordion.

Design QA

Holding quality through the build

Under deadline, function usually wins over finish. So we reviewed every build against the spec and sent back annotated fixes.

In this fare picker, the build used the wrong link color, added underlines, and lost the selected-state circle. Small things, but across 35+ flows they decide whether the product feels finished.

Annotated build screenshot with fixes for link color, underlines and the radio button
An annotated build review.

Validation

Testing the 3.0 designs

Usability testing of the redesigned screens. Most participants liked the look and feel; the rest of the feedback shaped the final details.

What we heard

Search

  • Most participants liked the look and feel.
  • Most wanted to use their current location as the departure airport.
  • 6 found choosing a seat for an infant very tedious.
  • Most hoped to see flight deals on the home page.

What we heard

Results

  • People confirmed they prefer choosing flight by flight, not round-trip pairs.
  • They wanted to compare prices against another travel site.
  • The included, not included and extra-cost icons were easy to understand.
  • The desktop link “Fare details” was weaker than the mobile label “What does this fare include?”

What we heard

Checkout

  • Checkout pages were slow to load.
  • Traveler details didn’t fill in automatically.
  • The checkout felt long.
  • The points display was a bit confusing.

What changed as a result

Flight by flightResults ask for the departure first, then the return.
Clear fare contentsEach fare lists what it includes, with a full comparison table.
Saved travelersA traveler profile fills in names and dates of birth.
Points in dollarsThe header shows the balance and its dollar value on every screen.

Outcomes

What changed after launch

Reported after the 3.0 release.

▲ Up12%

Search to cart conversion

▲ Up21%

Cart to booking conversion

▼ Down19%

Overall abandonment rate

▲ New14

Clients onboarded within 6 months of launch

Thanks for
reading

JPMorgan Chase

Introducing infant booking for international flights

ZestMoney

Improving the experience of a fast-growing fintech