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.
JPMorgan Chase · ORXe 3.0
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.
The short version
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
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
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
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
Find a destination, see what it costs in points and cash, and choose how to pay without doing the maths.
Who we designed for
Card members of leading US banks, aged 25 and above.
Book flights, hotels, cars and activities with their rewards.
Once every six months to a year, because points take time to build up.
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 · Flight user
“My mom said I should get a rewards card to start racking up points since I’m travelling so much during breaks and summer.”
User research
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
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.
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
Study 1
Study 2
Study 3
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
What participants did, where it happened, and why it matters. Quotes and timings are from the study reports.
High risk Study 2 · Destination search
High risk Study 2 · Destination search
Study 2 · Destination search
Studies 2 and 3 · Destination search
Studies 1 and 3 · Points balance
Studies 1 and 3 · Pricing
Study 1 · Choosing how to pay
Study 3 · Results and checkout
D
Grouping the observations showed four problems. Each one separates what we saw from the need behind it and the opportunity it opened.
E
Screens captured during the studies. Numbered markers point to the problem; the key below each image explains it.
Focus finding · Study 3
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.”
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.
Display flight results flight by flight by default.
On mobile, 2 of 8 participants read a round-trip price as the price of one leg.
What outside research says
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
Prioritised by the risk each problem posed to a completed booking. Only Study 2 rated severity; the rest of the order is our judgement.
Root cause: text matching with no notion of airport size, popularity or country. Implication: fix search first; it’s the top of the funnel.
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.
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.
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
Each 3.0 decision, traced back to the evidence behind it.
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
Alongside the studies, we benchmarked five booking sites and turned the findings into user stories for the backlog.
We compared how five booking platforms and airlines handle 17 search and booking capabilities, to find the ones our members would expect.
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
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
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
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
Pricing Insight 2
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
Payment Insight 3
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.
Trips
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.
Design strategy · Journey
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.
Exploration and iteration
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.
Iteration · Choosing how to pay
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.
The final solution
Points first, mobile first, and built to be rebranded.
New in ORXe 3.0
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.
01 · Spot it in the results
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.
02 · Filter for it
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.
03 · Keep it through the fare step
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”.
04 · See it at checkout
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.
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.
The header always shows the member’s points and what they’re worth. On the phone, the home screen leads with it.
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.
Research → design · Study 3
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.
The core feature
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
The real screens
Payment repeats exactly what the card will be charged and how many points will be redeemed, with the saved rewards card ready.
One fare for the whole trip, each shown in cash and in points.
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.
Every confirmation states the points redeemed, the amount charged and the new balance, with links to the trip details, the calendar and print.
Cancelling within 24 hours shows exactly what comes back: the points returned to the balance and the cash refunded to the card.
A date grid shows the fare for every departure and return pair, so members can spot the cheapest combination.
When an airline moves a flight, members compare the new schedule with the original and accept it, or look at other options.
Mobile first
Every flow started at mobile width. Points stay visible at each step, from the first search to the seat map.
Desktop
On desktop, the extra width goes to the trip summary, which sits beside every step from return flights to payment.
Before and after
Drag the handle to compare the same screen in both versions.
One clear taskA single search bar replaces stacked tabs, notices and secondary links.
Faster repeat searchesRecent searches sit right under the form.
Inspiration belowDestination cards show each trip’s lowest price in cash and points.
Fare options per flightBasic Economy, Main Cabin and Business sit side by side on each result.
Points on every fareEach fare shows its points price, and discounted fares show the saving.
Flight by flightMembers pick the departure first, then the return.
A real cart“My Itinerary” becomes a trip cart that holds the flights, trip protection and a car.
Summary always in viewThe trip summary shows the points and cash split next to the trip.
Points in context“How many points do you want to use?” sits right under the summary, before checkout.
Grouped into cardsBilling, trip review, protection and contact details each get their own card.
Saved cardsMembers pick a saved card, with a reminder to use the rewards card to keep earning points.
One clear actionA single Complete booking button after the terms.
Search results, before and after
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.
| What changed | ORXe 2.0 | ORXe 3.0 |
|---|---|---|
| Information hierarchy | Travel 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 options | Each 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 space | A 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 controls | Sort 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 flight | Members 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
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.
One of the documented components. Every other component followed the same format.
| Property | Value |
|---|---|
| Min height (header) | 64px |
| Max width | Mobile 100% of screen Desktop 100% of parent |
| Padding (header) | $spacing-06 |
| Border Custom | None |
| Border radius Custom | Mobile none Desktop $border-radius-base |
| Shadow Custom | Type 2 |
| Margin bottom Custom | $spacing-05 |
| Background Custom | $neutral |
| Header font Custom | $text-md, Semibold |
| Header color Custom | $primary-text |
| Touch target | Container height |
Design QA
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.
Validation
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
What we heard
What we heard
Outcomes
Reported after the 3.0 release.
Search to cart conversion
Cart to booking conversion
Overall abandonment rate
Clients onboarded within 6 months of launch
JPMorgan Chase
ZestMoney