Today we open the new site to the internal team for review. This deck walks the board through what the team has built, how it is hosted, and what is coming next before public launch.
A complete rebuild of Border Pharmacy is now ready for internal review. Forty-five public pages, eight patient flows, six signature features, all running on a Cloudflare-fronted, Google Cloud hosted stack that is already engineered to handle launch-day traffic when the doors open.
45+
Pages & flows shipped
8
Services in the stack
24/7
Shopping assistant
100%
Mobile-first & responsive
Page Walk-through
03 / 23
Homepage tour
A welcome that does the work.
Every part of the homepage earns its place. Each section has one job and does it well. Here is a curated tour through the highlights. Click any tile to enlarge the full screenshot.
+
Hero & Talk to Anna
+
How it works journey
+
Stats
+
Why choose us
+
Clinic highlight
+
Services
+
Popular medications
+
Testimonials
Signature Feature · 01
04 / 23
Shopping assistant · "Anna"
Just say hello. Talk to your pharmacy.
We built a real-time voice shopping assistant directly into the storefront. A patient clicks the orb on the homepage and is in a sub-second conversation with Anna. She can search products, add items to the cart, explain coverage, and walk a patient through booking a service.
Feels like a phone call.Sub-100 ms audio response time. No typing, no waiting, no clunky chatbot loops.
She can take action.Anna does not just describe products. She actually adds them to the cart, opens checkout, and navigates the site on the patient's behalf.
Every interaction is measured.Every question, every action, every outcome lands in analytics so we can keep improving Anna against real patient behaviour.
Hit the search bar (or press ⌘ K on any page) and a panel opens. Start typing. Products, services, FAQ articles, blog posts and pages all appear in milliseconds. It is the kind of search experience patients already expect from sites like Amazon and Shopify, and now it is on Border Pharmacy.
Powered by Typesense.The same search-engine technology trusted by Shopify, GitHub, the Linux Foundation and thousands of other major brands. Sub-50 ms results across our entire catalogue.
Finds everything, not just products.Patients can also jump straight to coverage information, vaccination booking, prescription transfer, FAQ articles and more from the same search.
Tells us what to stock next.Every search is logged. When a patient searches for something we do not carry, the team sees it before the patient even has to ask.
Signature Feature · 03
06 / 23
"How it works"
A guided journey, drawn as you scroll.
The "How it works" section turns the prescription process into a visual story. As the patient scrolls, an animated line traces the journey from Vancouver across Canada, pausing at each step (order, fill, ship, deliver) so anyone can understand how Border Pharmacy works in under a minute.
Easy to follow at any age.No paragraphs to read, no jargon to decode. The animation does the explaining. A 70-year-old and a 17-year-old understand it equally fast.
Real Canadian geography.The map traces real provinces, real cities, and the real delivery footprint of our pharmacy. Not a stock illustration.
Built for performance.The animation only loads when the patient scrolls near it. The rest of the page stays light and fast, even on older phones.
Home · animated "How it works" journey
Signature Feature · 05
07 / 23
Coverage estimator
"Will my insurance cover this?" Estimated.
The coverage estimator gives patients a transparent ballpark before they reach out to the pharmacy. It walks them through BC PharmaCare plans (Fair PharmaCare, Plan C, Plan W and more) and private insurers, and runs the whole calculation right in the patient's browser, so sensitive details like family income never leave the device.
Private by design.Family income, plan choice, prescription details. None of it travels to our servers. The whole calculation runs locally in the patient's browser.
Knows every BC plan, plus private insurers.A live rules engine encodes BC PharmaCare deductibles, family-income tiers, and Plan-W exemptions. The top private insurers in BC are pre-loaded too. Easy to update as policy changes.
An estimate, not an invoice.Wording stays clear that the final number is confirmed by the pharmacist at the time of dispensing. The patient walks in already knowing what to expect.
For many medications, the generic version costs a fraction of the brand and works exactly the same. Most patients never realise this. We built a dedicated comparison page that shows the active ingredient, the price difference, and the option to switch in one click.
Side-by-side comparison.Patients see the brand and the generic on the same page, with the same active ingredient called out so they can switch with confidence.
Educational, not pushy.The page explains how generics work and why they cost less. Patients understand the choice, they do not feel sold to.
Backed by a deep-dive article.An accompanying blog article (Generic vs. Branded Medications) gives the longer story for anyone who wants it.
Patient Education
09 / 23
MSP & PharmaNet, explained
BC's pharmacy system, in plain English.
Most patients have heard the terms MSP and PharmaNet without really knowing what they mean. This page explains both in plain language. What they are, how they work, what the patient needs to bring, and how each one shows up in the prescription process.
Removes a real source of confusion.The pharmacy team may get asked these questions, now the website answers them, so the team can focus on dispensing instead of explaining.
Written for a non-clinical reader.No jargon, no acronyms left unexplained. A first-time patient can read the page once and walk away knowing what they need.
Builds trust before the first prescription.Explaining the system clearly is itself a signal of competence. Patients arrive at checkout already comfortable with the process.
Commerce
10 / 23
Product detail
A product page that educates before it sells.
Each medication page presents a Health Canada-aligned monograph, a brand vs. generic comparison, patient reviews, related products, and a coverage estimate. All assembled from live pharmacy data, all server-rendered for speed.
Product detail
Drug information
How it works
Content
11 / 23
Resources hub
More than a blog. An education hub.
The resources area collects everything that helps a patient make a decision before they have to call. Long-form articles, plain-English explainers, a help center, and health tools, all linked together and updated by the marketing team without engineering involvement.
Articles & deep-dive guides.Long-form pieces like "Generic vs. Branded Medications", condition guides, and medication explainers. Written for patients first, search engines second.
Tools live alongside the text.The BMI calculator, coverage estimator, and brand-vs-generic comparison sit inside the same content area, cross-linked from every article that mentions them.
Help center, built in.FAQ, contact, and plain-English explainers (MSP, PharmaNet, deductibles) answer the questions patients hear all the time but rarely understand.
Patient onboarding is a friendly three-step wizard. Account, address, then a short medical questionnaire. Each step validates before the next, the medical step only asks what is actually needed, and a visible progress indicator keeps the patient confident throughout.
Progress you can see.An animated progress bar with check marks at each completed step. Patients always know how far they have to go.
Address autocomplete built in.Powered by Google Places. The patient starts typing, the system suggests. No mistyped postal codes.
Pick up where you left off.Half-finished registrations are saved. Patients can come back later and finish without starting over.
/register
Patient Journey · 02
13 / 23
Login & verification
Strong by default. Stronger by choice.
Every patient signs in with a password, governed by PharmacyWire, the same trusted clinical system that already protects prescription records across the province. That part is mandatory. Multi-factor authentication (a one-time code or a passkey on their phone) is optional but strongly recommended, and the screen guides patients to turn it on the first time they sign in.
Password is required.Every account is protected by a PharmacyWire-backed password. Failed login attempts are throttled. No exceptions.
MFA is optional, but encouraged.Patients can add a one-time code or a passkey (Face ID, Touch ID, Windows Hello) for an extra layer. One tap, no extra password, much harder to steal.
Step-up when it matters.Sensitive actions (prescription transfer, address change, refund) re-prompt for verification even when the patient is already signed in.
Audit trail for compliance.Every sign-in, every failure, every MFA challenge is logged. The compliance team can answer any question after the fact.
Patient Journey · 03
14 / 23
Cart & checkout
From "I need this" to "thanks" in three taps.
The cart is a slide-out panel, so adding a product never breaks the page. Checkout supports saved addresses, an insurance picker, cold-chain shipping notices, and pay-by-link. We built for the messy reality of buying medication, not the textbook flow.
Cart sidebar
Cart page
Checkout
Patient Journey · 04
15 / 23
Account dashboard
Their pharmacy, in their pocket.
A patient dashboard that puts what matters front and centre. Active prescriptions, refill reminders, an adherence diary, recent orders, family members, document uploads, address book, and the standout feature: prescription transfer.
Prescription transfer, in-app.Patients can move a prescription from their current pharmacy to Border Pharmacy without phone calls or forms. The pharmacist picks it up on the back end and handles the rest.
Adherence diary.A calendar view of medication intake. Patients track their doses, pharmacists can support them when they slip.
Manage the whole family.One account, many family members. Caregivers can manage dependents safely, all from a single sign-in.
A complete self-service pharmacy, in their pocket.
Beyond the headline features (prescription transfer, adherence diary, family management), the account dashboard packs nine more capabilities that put patients in control of their pharmacy experience.
01 · PRESCRIPTIONS
Live prescription list
A real-time list of every prescription on file. Status, prescribing pharmacist, refills remaining, next due date. All in one screen.
02 · REFILLS
One-click refill
Patients tap to refill an existing prescription. The request lands in the pharmacist's queue immediately. No phone call, no waiting on hold.
03 · REORDER
Reorder recent items
Recently purchased items surface as one-tap reorders. The pharmacy remembers what the patient bought, the patient does not have to.
04 · DOCUMENTS
Upload once, on file forever
Insurance card, government ID, prescriber notes. Upload once and the pharmacy team has them ready for every future order.
05 · ADDRESSES
Multiple delivery addresses
Home, work, parents' place, the cottage. Patients save as many addresses as they need and pick one at checkout in two taps.
06 · SECURITY
Change password & manage MFA
Patients can rotate their password, turn on multi-factor authentication, and review trusted devices any time. Compliance has a full audit trail.
07 · PREFERENCES
Communication preferences
Email, SMS, refill reminders, marketing opt-ins, light or dark theme. Patients tune the experience to their own habits in one panel.
08 · QUESTIONNAIRE
Medical questionnaire
A guided form for prescription-related questions, allergies, current medications. Filled once, surfaced automatically when relevant.
09 · FIND A PHARMACY
Locate a pharmacy nearby
Patients can search for a nearby Border Pharmacy partner location, with map results, hours, and contact details, right inside the account.
Engineering Craft
17 / 23
Business Infrastructure problems solved
The problems worth solving.
Coast to coast
Equally fast from Vancouver to Halifax
Border Pharmacy ships across Canada, and Canada is a big country. Without a global edge, a patient in Halifax or Calgary would wait while our Toronto server's response travels thousands of kilometres. Cloudflare's Canadian data centres in Vancouver, Calgary, Toronto, Ottawa, Montreal and Halifax mean the website feels equally instant from any major city in the country.
Find anything fast
Search that feels like Amazon's
Patients expect search to be instant, forgiving of typos, and aware of synonyms. We built Border Pharmacy's search on Typesense, the same engine trusted by Shopify, GitHub and the Linux Foundation, so a patient can find a medication in two keystrokes.
Less paperwork
Prescription transfer without the phone call
Moving a prescription from another pharmacy used to mean a phone call. The website now captures the request from the patient, attaches the supporting documents, and drops it into the pharmacist's queue. Less friction for the patient, no new tools for the pharmacist.
Voice that acts
A shopping assistant that takes action
Most chatbots can only talk. Anna can actually do things: add to cart, search, open checkout, walk a patient through a transfer. Each action is wired through a single audited channel so we always know what the assistant did on the patient's behalf.
No ticket required
Marketing publishes without code
Blog posts, resource articles, FAQ updates, featured content: the marketing team writes and publishes on their own. No engineering ticket, no deploy, no waiting. Engineering owns the structure, marketing owns the words.
Ready for the rush
The day a press article goes viral
The site is hosted on Google Cloud in Toronto, and Cloud Run is pre-staged to absorb a burst of thousands of new visitors in under a minute. A newsletter blast, a press hit, or a launch announcement will not take the site down.
Architecture & Infrastructure
18 / 23
How it is hosted
Built to scale from day one.
The new website runs on a layered, container-based architecture sitting behind Cloudflare's global edge network. Every layer was picked for a reason. Speed at the edge, predictability at the origin, and headroom for the burst traffic a newsletter blast or press hit will send our way.
Edge
Cloudflare · DNS · WAF · CDN · image optimisation
→
~20 ms response · from nearest data centre
DDoS protection · always on
Origin
Google Cloud · Toronto region
↳
Hardened reverse proxy · TLS · HTTP/3
Health checks · every service
App
Next.js 16 · storefront
WordPress 6.7 · content engine
Shopping assistant · real-time voice
Typesense · product search
Data
MariaDB 11 · 12 GB cache pool
Redis 7 · object cache
Redis 7 · sessions & queues
Cloud Run ready · auto-scale on demand
8 services
Each one isolated and reversible
~20 ms
From nearest Cloudflare data centre
0 → 100s
Cloud Run auto-scale, ready to flip
1-command
Rollback. Every release tagged.
Engineering
19 / 23
Under the hood
A stack chosen with intent.
Every dependency had to earn its place. Nothing here is fashion. Each piece solves a specific problem the pharmacy faces. Speed, accessibility, real-time interaction, or clinical integration.
FRONTEND
Next.js 16 · React 19
Server-rendered pages for instant first paint. The freshest stable Next.js release, the same engine that powers TikTok, Twitch, and OpenAI.
DESIGN
Tailwind v4 · Custom type system
A bespoke design language paired with a warm serif (Fraunces) and a clean sans (Geist). One typographic system across forty-five pages.
MOTION
Framer Motion · GSAP
Hand-tuned scroll choreography. Animation that helps the eye follow the story without slowing the page down.
VOICE
Real-time shopping assistant
An always-on voice channel for "Anna," our pharmacy assistant. Sub-second response time, action-capable, telemetry from day one.
AUTH
Password + passkey MFA
Primary password protection backed by PharmacyWire. Optional passkey (Face ID, Touch ID, Windows Hello) as a second factor.
SEARCH
Typesense · Instant results
The same search technology used by Shopify, GitHub, and the Linux Foundation. Sub-50 ms across thousands of products.
DATA
GraphQL content layer
A single typed data layer pulls products, pages, blog articles and configuration from one place. The marketing and pharmacist teams update the back office, the website reflects it.
INFRA
Cloudflare · Google Cloud
Cloudflare at the edge for cache, DDoS protection, and image optimisation. Google Cloud at the origin. Cloud Run on standby for burst scaling.
QUALITY
Accessibility · Strict TypeScript
Accessibility checks on every change. Strict type-checking across the codebase. The CI gate refuses anything that does not meet the bar.
Performance
20 / 23
Performance
Fast is a feature. We treat it like one.
Real numbers, pulled from Google PageSpeed Insights. The work behind these scores is unglamorous (smart loading, image optimisation, font tuning, skeleton placeholders) and it adds up. A faster site means more patients who actually finish their refill.
Under 1.2 s on a cold edge cache. The patient sees something useful almost instantly.
Main image visible
Under 2.5 s. The hero image is served in a modern compressed format and preloaded so it never holds up the page.
Layout stability
Industry-best. Every dynamic section reserves its space ahead of time, so the page never jumps under the patient's eye.
Smooth on mobile
Sub-200 ms response on a mid-range Android phone. Heavy code (animations, the shopping assistant, analytics) only loads when needed.
Security & Compliance
21 / 23
Built for healthcare
Trust is the product.
Border Pharmacy is a regulated entity. Every decision in the codebase reflects that: protections at the edge, password and optional MFA at sign-in, encrypted internal channels for health data, and audit logs on every patient action.
EDGE
Locked down at Cloudflare
Strict HTTPS enforced for every visitor. Browser-level protections against framing, sniffing, and untrusted referrers. DDoS shield is always on.
LOGIN
Password + optional MFA
Every account is protected by a PharmacyWire-managed password. Patients can add a passkey or one-time code for an extra layer.
DATA
Collect only what we need
The coverage estimator runs in the browser. Patient health information only travels through encrypted, audited internal channels.
CODE
Type-safe by default
Every line of frontend code is strict-checked before it ever ships. The build system refuses anything that does not meet the bar.
ACCESS
Accessibility-aware
Accessibility checks run automatically on every change. Modal focus traps, keyboard support, screen reader labels. Built in, not bolted on.
OPS
Auditable releases
Every release is tagged. Every patient action on the site is logged with a timestamp and a correlation ID. Rolling back to a previous version is a single command.
What's Next
22 / 23
The path from Internal changelog to public launch
From today, here's what's next.
Internal changelog opens today. The next few weeks are about listening to internal feedback and finishing the last few integrations before the public go-live.
Today
Internal changelog opens. The team can sign in, click through every flow, and report anything that does not feel right. Dashboards and monitoring are live, engineering is on standby.
Next 2 weeks
Payment integration with PharmacyWire. Wire up the live payment endpoints so a paid order on the website turns into a paid order in the pharmacy system, end to end, without manual reconciliation.
Next 2 weeks
Remaining PharmacyWire endpoints. Finalise the last set of clinical operations (refill requests, prescription status, insurance adjudication) so every patient action on the site has its live counterpart in the back office.
Before public launch
Cloud Run auto-scale, live. Flip the auto-scaling layer on Google Cloud so the site can absorb a press hit or newsletter blast without breaking a sweat. Capacity grows and shrinks automatically with demand.
Public launch
Doors open. DNS flipped, cache rules tuned, announcement ready.
"
Thank you for taking the time to review what we've built. Your feedback shapes what comes next.
With gratitude · The Border Pharmacy team · 25 May 2026
