Prepaid travel certificates, from template to booking

A members-only travel club wanted to sell prepaid nights that members redeem later. I designed the certificate program on both sides: the back office that defines and controls it, and the member's path from catalogue to booking.

Stage
Shipped product feature
Role
Product Designer
Timeframe
January to May 2026
Publication
NDA. Client identity and sample data have been anonymized.
Scope
  • Back-office tools
  • Purchase and payments
  • Member wallet
  • Booking with certificates
  • Dashboards and audit
Travel Membership platform Back office New product feature

Decision summary

One certificate, designed end to end. The business publishes a template, the member keeps the certificate in a wallet, and the booking flow shows only what is left to pay. Live on the club's sites.

01 / The product

Pay now.
Book the trip later.

A members-only travel club sells hotels, condos and cruises at member rates, through many branded club sites. It added a new product: a prepaid travel certificate. Members buy a bundle of nights now, in full or in instalments, and book the stay later.

Prepaid certificate Active

Luxury Hotel Week

What it covers
Hotel, 7 nights
What it costs
$967, in full or in instalments
When it can be used
Any stay within 12 months
What is left to pay
Taxes and fees, at booking
Every screen a member sees answers these four questions.

The member

On a club site

  • Buys a certificate
  • Keeps it in MyWallet
  • Books with it once the dates are known

The admin

In the back office. A business user, not an engineer.

  • Defines templates and publishes them to club sites
  • Issues certificates by hand
  • Manages them after the sale
  • Watches what the program still owes

What made it hard

  1. Prices already meant savings. Listings and checkout showed member rates against public prices. With a certificate, part of the stay is already paid.

  2. Money moves before travel. Once a member pays, their terms cannot shift, and the business must explain any later change.

  3. One template, many club sites. Whatever the admin writes appears on member pages across the network.

My part

Mine

  • The certificate feature on both sides: every new page, state and change to the booking flow
  • The new back-office shell it lives in
  • A working back-office prototype in Figma Make, for client demos and developer handoff

Already there

  • The club sites and their booking engine
  • The legacy back office

I was the only designer on the feature. AltexSoft's business analysts and project managers wrote the stories from the client's requirements, and the development team built them.

02 / One lifecycle

One object,
seen from both sides.

Before drawing screens, I fixed the model every screen reads from. A template is what is for sale. A certificate is one sold or issued copy of it, with one item per product type. Each has its own states, and every state has a place where someone sees it.

Template

What is for sale. The admin writes it once.

Other ways out

Certificate

One sold or issued copy of a template.

Other ways out

A certificate starts as Pending when it has no recipient yet, or when only a down payment is paid. Paid in full, it starts as Active.

Item

One product type inside a certificate, with its nights.

Other ways out

While its certificate is pending, an item shows as Pending and offers Preview instead of Redeem.

Three ways a certificate is created

  • ManualIssued in the back office
  • Club siteBought by a member
  • APICreated by another system

Where each state shows up

StateBack officeMyWalletBooking
Pending Status badge, audit entry Badge, instalment progress, items offer Preview Preview: real prices, checkout blocked
Active Status badge Items offer Redeem Eligible: prices adjusted, search limited to where it can be used
Partially redeemed Status badge, redeemed items listed Used items dated, the rest offer Redeem Eligible for the remaining items
Redeemed Status badge Every item dated Not eligible
Expired Status badge Badge, items dated Not eligible
Cancelled Status badge, audit entry Badge, items marked cancelled, no actions Not eligible

“Eligible”: a certificate the booking selector may apply.

03 / The template

Define once.
Show it everywhere.

A template is the only place an offer is written: every card and page a member sees renders from it. Here is one being made in the back-office prototype I built. Click the highlighted control to go on, or press Play.

Back office, certificate templates list: ten templates with products, prices, margin, total, 12-month validity and a Live or Off switch.
Step 1 Template list. Every template in one list: products with their reserve prices, margin, total, validity, and a Live or Off switch per row. A new one starts with Add.
Add certificate template drawer: name Luxury Hotel Week, 12 months, and the Standard Hotel Description with its rich text.
Step 2 Details. A name, a validity in months, and a description picked from reusable description templates. The description is the text the member reads on the details page.
Product and value: hotel, 7 nights, reserve price $767, margin $200, total $967, average retail $1,372, savings $405.
Step 3 Product and value. Tick a product, give it nights and an internal reserve price. The margin on top makes the total, $967, as you type. The average retail price sets the saving the member will see, $405.
Select a photo dialog with six gallery images over the drawer.
Step 4 Photo. The photo comes from a shared gallery, or an upload.
Edit photo dialog: a 2:1 crop frame over the chosen building photo.
Step 5 Crop. One crop, at 2:1. It carries the catalogue card, the landing and the details page.
The cropped photo in the drawer, above the club-site list, every site not publishing yet.
Step 6 Club sites. Then where it sells. The public marketplace and every resort club site has its own switch.
Three club sites switched on, 3 of 16 published, with terms and conditions below.
Step 7 Reach. Three of sixteen club sites. The running count shows the template's reach before it is saved.
Confirmation: the certificate will be added to the certificate templates grid.
Step 8 Confirm. Adding asks once more, in plain words.
Template details for TMP-120 in read-only view, with a saved confirmation.
Step 9 Saved. Saved. The drawer turns read-only: the same blocks, now as the record, with Edit Template behind a guard.
Template list with Luxury Hotel Week first: hotel, $767 for 7 nights, total $967, 12 months, Live.
Step 10 Live. Live on three club sites, first in the list. From here, the member's catalogue renders it.

Step 1 of 10

Template list

Every template in one list: products with their reserve prices, margin, total, validity, and a Live or Off switch per row. A new one starts with Add.

Two guards

Before it goes live

No photo, no publishing. No club site, no publishing either: switching the global status on with none selected keeps the template Off and says why.

Add certificate template, club sites: a red notice says you must select at least one club site to publish; every site is still off.

Once it is live

A live template is never edited in place. Editing it, or switching it off, first asks to pause it and counts the club sites it will leave: one template can sit in many catalogues at once.

Pause template? The template is going to be paused on 3 club sites. Cancel or Pause, over the template's read-only drawer.

Where the template shows up

The template saved above, beside the details page members see for it. The same numbers mark the same fields.

Back office Template TMP-120, read-only
Template TMP-120, read-only: name Luxury Hotel Week, 12 months, the Standard Hotel Description, hotel for 7 nights at a $767 reserve price, margin $200, total $967, savings $405, average retail $1,372, and the building photo.
Club site The details page members see
Details page for a hotel certificate: price breakdown with the estimated saving, description, and seven business rules.

  1. Name → The page title, and the card title in the catalogue.

  2. Validity, in months → “Expiry period: 12 month” under the title.

  3. Description template → The description, word for word. Every template that shares it changes with it.

  4. Product and nights → The item chip under the title, hotel for 7 nights, and the first line of the price details.

  5. Total price → The certificate's price, $967.00. Reserve price and margin stay in the back office.

  6. Average retail price → Struck through in the price details, beside the estimated saving. The page counts that saving against the total with taxes, $998.

  7. Photo, cropped to 2:1 → The hero of the page, the catalogue card and the landing.

Not on any member page: reserve prices, margin and internal notes. The club sites decide where the page exists at all; the terms and conditions appear at purchase.

04 / After the sale

After the money moves,
the price stops moving.

Once a certificate exists, someone has paid for it or been promised it. From then on, the back office keeps two lists apart: what an admin may still fix, and what nobody may change.

Issuing by hand

Most certificates are bought on a club site. Some are issued in the back office: the admin picks a template, and its terms come with it.

Back office, certificates list: ten certificates with issue type, status badge, template and products.
Step 1 Certificate list. Every certificate: ID, name, how it was issued, its status, template and products. A certificate can also be issued by hand, with Add.
Add new certificate drawer: the name Anniversary Gift, no template yet, and an empty products table.
Step 2 Name and template. A name, then a template. Until one is chosen, there is nothing to price: products stay empty.
Template dropdown: every option lists its products with prices and nights.
Step 3 Pick by content. Each option lists its products, nights and reserve prices, so the admin picks by what is inside, not by name.
The drawer after choosing Island Escape Bundle: cruise, hotel and condo with nights and prices, margin $200, total $1,430, expiry a year ahead.
Step 4 Filled in. The template fills in products, margin and total, and sets the expiry from its 12-month validity. With no recipient yet, the certificate is created as Pending.

Step 1 of 4

Certificate list

Every certificate: ID, name, how it was issued, its status, template and products. A certificate can also be issued by hand, with Add.

The certificate drawer

Two zones. Name, recipient and expiry stay editable. Items, nights, reserve prices and each item's status are read-only, and so is the redemption history. Cancel certificate sits apart from Cancel and Save, in red.

View certificate CRT-1004, partially redeemed: editable name, expiry and recipient; read-only products with each item's status, margin and total; Cancel Certificate in red, apart from Cancel and Save Changes.
  1. Editable: name, expiry and recipient.
  2. Locked: items, nights, reserve prices and each item's status.
  3. Cancel certificate, apart from Cancel and Save.

Cancelling

Cancelling asks first. The dialog says what the recipient loses and that it cannot be undone, and its buttons say what they do: Keep certificate, or Cancel certificate, in the drawer's red.

Cancel this certificate? CRT-1004 stops working for its recipient, and its unredeemed items are cancelled. This cannot be undone. Keep certificate, or Cancel certificate in red.

The audit log

Every change writes an entry: what changed, on which record, from which source (back office, club site, API or the system), by whom and when. A question like “who activated this certificate?” is answered by the record itself.

Audit log: ten entries with timestamp, action, entity type and ID, source, author and number of changes.
Step 1 The log. One certificate's week, newest first: created on a club site, paid, activated by the system, its recipient corrected in the back office, an item redeemed.
Audit record details: Activated, certificate CRT-1004, by the system; certificate status changed from Pending to Active.
Step 2 One entry. Each entry opens to the field that changed, its previous value and its new value.

Step 1 of 2

The log

One certificate's week, newest first: created on a club site, paid, activated by the system, its recipient corrected in the back office, an item redeemed.

05 / The member's path

What you own, what it covers,
when you can use it, what you'll still pay.

Every member-facing step answers the same four questions. They decided what each page shows, and what it leaves out.

Step 1

Landing

The landing page explains the idea in three steps: choose a certificate, pay today, redeem when you're ready. Then it lists what a certificate does and shows the most popular ones.

Certificates landing page: Lock In Your Next Vacation, and three steps: choose, purchase, redeem.

Step 2

Catalogue

Only published templates appear. Each card carries the four answers in order: what the bundle covers, what it costs, the estimated saving against average retail, and how long it stays valid. Product filters narrow the grid to hotels, condos or cruises.

Certificate catalogue: product filters and cards with price, estimated saving, items and nights, validity, and Buy.

Step 3

Details

The details page gives the offer in full and adds the rules. The price block breaks the total down by item and shows the estimated saving. Seven business rules are on the page before any payment step.

Details page for a hotel certificate: price breakdown with the estimated saving, description, and seven business rules.
  1. Price by item, total, and the estimated saving against average retail.
  2. Seven business rules, before any payment step: non-refundable, not combinable, each item redeemed once, exact nights only, taxes and fees extra, not a booking, provider policies apply.

Step 4

Purchase

Four ways to pay: in full; in full across two cards; in instalments with at least 20% down; or in instalments with the down payment split across two cards.

The instalment option states its terms next to the form: 20% down, a fee on each instalment, and pending until the last instalment is paid.

Paid in full, the certificate is active straight away. After a down payment, it is pending. A failed or abandoned payment creates nothing.

Purchase page with instalments selected: 20% down, pending until the last instalment, a fee per instalment, and the order summary.
  1. The instalment terms, stated next to the form.
Purchase confirmation: added to the wallet, expiry date, instalment payment type, amount paid, non-refundable.

The certificate, its expiry, the payment type, the amount paid, and MyWallet.

Step 5

MyWallet

MyWallet opens as a drawer over the current page, one card per certificate. Expanded, a card lists its items, each with its own status. Redeem appears only on an item that can be redeemed; everywhere else the status explains itself.

A certificate bought in instalments appears at once, as Pending, with its instalment progress and a plain “not redeemable until fully paid”. Its items offer Preview instead of Redeem. The payment card can be replaced in place.

MyWallet drawer with five certificates: pending with instalment progress and Preview, active with three items to redeem, partially redeemed, redeemed, and expired with dates.
Pending certificate with a scheduled-payment tooltip and the update-card form open.
Three payment tooltips on the instalment bar: scheduled, paid and failed.

Each segment of the instalment bar: scheduled, paid or failed.

Step 6

Booking with a certificate

Search gets a certificate selector, with the first eligible certificate already applied, and results narrow to where it can be used. From then on, every price is what the member will pay after the certificate. A stay it fully covers shows $0.00, with “Certificate applied” beside the price.

Retail prices, savings and comparisons are left out. Price filters and price sorting are hidden too: they would rank stays by numbers the member is not paying.

The certificate covers accommodation only, so checkout splits the total into what is paid now and what is paid at the property.

Results filter bar with no certificate selected: a Price filter is present.

No certificate: the Price filter is there.

The same filter bar with a certificate selected: no Price filter.

Certificate applied: the Price filter is gone.

Condo results with a certificate applied: each stay shows US$ 0.00 for 7 nights and Certificate applied.
Hotel result prices after the certificate: $0.00, $48.00 and $72.00 for 6 nights, each marked certificate applied.

Prices after the certificate.

Checkout summary: the total marked certificate applied, split into pay now and pay at the property.

Pay now, and pay at the property.

Step 7

Preview and demo

Two later change requests opened the booking flow to members who cannot book yet. Search, results and prices work as in step 6; only checkout stays closed. A banner says so on every page, one dialog explains it on the way in, and another stops the booking at checkout and leads back to search.

Preview opens from a pending certificate in MyWallet. Demo is the same flow for a member who has no certificate yet.

PreviewDemo
ForA member paying in instalmentsA member with no certificate
PricesTheir own certificate's, at real ratesA sample certificate's, to show the discount
At checkoutBooking opens once every instalment is paidAn active certificate is needed, and a representative sells one

Demo uses the same screens and dialogs, with its own words.

Preview entry dialog over hotel results: the discounts come from your own certificate, the rates are real, and booking opens once all instalments are paid. Got it, let's explore.

On the way in: real rates, bookable once paid.

Preview checkout dialog, Certificate Purchase Required: the certificate is still pending, and all instalments must be paid before a booking. Go back to search, or Close.

At checkout: the booking waits for the last instalment.

The states nobody hopes to see

The requirements also asked for these. A member with no certificates gets an empty wallet that leads to the catalogue. A certificate the business cancelled stays in the wallet, marked as cancelled and with no actions. A template unpublished while a member reads its details page says it is no longer available and offers the way back. A page that fails to load says so and offers Retry.

Empty wallet: no certificates yet, with a link to the catalogue.
Cancelled certificate in the wallet: items marked cancelled with a date, no actions, and a note to contact support.
Details page for a certificate taken off sale, with a way back to the catalogue.
Details page that failed to load, with Retry.

06 / Program health

Sales are half the story.
The other half is what's still owed.

Every unredeemed night is a promise the business has already been paid for. So the statistics put outstanding liability next to sales, as a headline number. Every view filters by club site, template and dates.

Certificate statistics overview: 60 sold, $44,635 revenue, $27,480 outstanding liability, counts by status and two monthly charts.
Step 1 Overview. Sold, revenue and outstanding liability, side by side. Counts by status. Sold against redeemed, and liability, month by month.
Sales and revenue: monthly revenue and sales charts and three tables by template, club site and payment type.
Step 2 Sales and revenue. Revenue and sales by month, then by template, by club site and by payment type. Each table exports.
Redemption and liability: 36 not redeemed, 1 partially, 11 fully, $27,480 liability, 6 expired unused worth $3,150, and two monthly charts.
Step 3 Redemption and liability. What is not, partly or fully redeemed, what the program still owes, and what expired unused, by count and by value.
Certificates list with status badges: pending, expired, cancelled, redeemed, partially redeemed and active.
Step 4 Certificates. The certificates themselves, with their status and how each was issued.
Certificate templates list with a Live or Off switch per row.
Step 5 Templates. And the templates they come from, each Live or Off.

Step 1 of 5

Overview

Sold, revenue and outstanding liability, side by side. Counts by status. Sold against redeemed, and liability, month by month.

Figures are fictional prototype data, rewritten so they add up.

07 / Decisions

Four decisions
behind the screens.

  1. The template is the single source.

    Signal

    One offer had to appear on many club sites, in a card, a details page and a checkout summary, and the person writing it is not an engineer.

    Decision

    Every member-facing surface renders from the template. While setting costs, the admin already sees the member-facing total, average retail and saving.

    Trade-off

    No tailoring per certificate, and no quiet edits. Changing a live template means pausing it on every club site it is live on, and the admin is told how many before it happens.

  2. One price language inside the booking flow.

    Signal

    The flow was built to show savings against public prices. With a certificate applied, those numbers no longer describe what the member pays.

    Decision

    Show the price after the certificate, everywhere. Drop retail prices, savings and comparisons, and hide price filters and price sorting.

    Trade-off

    The savings story leaves the booking flow. It lives in the catalogue and on the details page, where the member is still deciding.

  3. Pending is a visible state.

    Signal

    Instalment buyers pay for months before they can redeem.

    Decision

    The certificate appears in MyWallet at once, with progress, a plain “not redeemable until fully paid”, a card update and Preview.

    Trade-off

    More states to explain. In return, members can see what they are paying for. Fewer “where is my certificate?” questions is the expectation, a hypothesis rather than a measurement.

  4. Lock what money depends on, log the rest.

    Signal

    Once a member has paid, the terms they bought must not shift, and the business must be able to explain every change.

    Decision

    Items, pricing and redemption history are immutable. Name, recipient and expiry stay editable. Every change is audited with its source and field-level values. Cancel is set apart and confirmed.

    Trade-off

    A pricing mistake means cancel and reissue, not edit.

08 / What this page claims

Shipped.
Not measured.

  • Requirements came from the client's business stakeholders, through stories written by AltexSoft's business analysts and project managers. I did not run user research for this feature.
  • I prototyped the back office in Figma Make, with fictional data. The prototype served both client demos and developer handoff. Its figures were rewritten for this page so they add up.
  • The development team implemented the designs. The feature is live on the club's sites.
  • I have no adoption, revenue or support figures to report, so this page reports none.
  • Client identity and sample data have been anonymized. Photos are replaced with licensed stock images.

09 / What I'd take forward

What I'd take
to the next one.

  • Model the object before the screens.

    Fixing the three lifecycles first turned five months of change requests into one feature, not a pile of pages.

  • A price is a sentence.

    Adding a certificate meant rewriting what every number in the booking flow says, not adding a badge.

  • What I'd measure next.

    How many instalment buyers open Preview, how many certificates are redeemed before they expire, and how fast liability turns into stays.

Design preview

Next case

Interlace: turning a codebase-intelligence platform into a guided path

Interlace turns a codebase into a knowledge graph that AI assistants query over MCP. I audited its admin application and redesigned the path from uploading code to a working IDE connection.

Read next case

Have a complex product problem?

Get in touch Selected work