Work brief · 95106 min read

The World Cup like never before

My app guides press teams in their journey across the tournament.

Sports Management Media UX Design Front-end Accessibility
Roles — UX researcher · Product designer · Front-end developer Duration — Five weeks · 28 Jul – 30 Aug 2026 Scope — UX research → UX design → prototyping → development

104 matches, 16 stadiums and three countries, with no guarantee a press pass is valid for every match. Venues change, spaces shrink and knockout quotas hang on a goal nobody has scored. Without timely notice, journalists run into reality at the stadium gate. AccreditaPass removes that friction: a personal record that shows what changed, why, and the action plan for the best coverage.

TABLE OF CONTENTS
Act 00 · Context

The 2026 World Cup.

Three countries, one press pass.

The first 48-team tournament: 104 matches in 16 host cities across Canada, Mexico, and the United States.

By the quarter-finals, over 5,000 media members logged 33,146 stadium entries and 282 press conferences.

Pass clearance did not guarantee entry: several working journalists were never granted consular visa slots.

Geographic sprawl

With 48 teams, the event held 104 matches across 16 venues in three countries, from 11 June to 19 July 2026.

Press attendance

By the quarter-finals, 5,230 press members logged 33,146 stadium check-ins and 282 official briefings.

Visa roadblocks

A pass did not guarantee entry. Reporters got no visa slots; one counted over 20 colleagues without one in Ankara, Türkiye.

Act 01 · Problem

Conditional approval.

Valid pass, but trip wasted.

Refusals with no reason

Access withdrawn without a reason breaks the journalist's logistics and leaves no way to respond.

A journalist prepares the kit, plans the coverage and meets a closed gate with nobody behind it. The simulated research rounds found that a refusal with a clear reason is manageable: it can be appealed, worked around or turned into a new angle. A silent one leaves the journalist in the dark. It falls hardest on freelancers and small outlets, who end up relying on corridor talk instead of an official answer.

Late news

Access changes travel slowly and surface when the pass fails outside the stadium.

Teams go out and press positions are reassigned between matchdays: that is the nature of the tournament. The failure is when the paperwork moves slower than the journalist. A reporter pays for a flight, rushes to the stadium and is held twenty minutes before kickoff because gate staff are reading an outdated list. The problem is never the change itself, but the delay in telling the person already standing at the barrier.

The access delusion

Many learn the hard way that an approved accreditation does not guarantee getting through the turnstiles.

It is usually learned at the worst moment: a press credential does not automatically secure entry to the venue. Even veterans who read the fine print get caught by it. One plain line on the confirmation itself would spare the turnstile surprise and save both the day's coverage and the reporter's standing.

Fragile promises

A journalist needs to know the real conditions of knockout-round coverage before buying a flight.

In the knockout rounds everything hangs on the next win. Quarter-final and final positions depend on matches not yet played. When the rules sound settled, a logistical possibility passes for a promise that will break. Stated as conditions from the first day, they would let journalists book flights and hotels on what is likely, not on costly assumptions.

Act 02 · UX Simulation

Smart hypotheses.

Informed decisions before any code.

Round 1 · Research

Silence breaks trust

A journalist can take bad news; what breaks trust is no explanation and late notice.

Eight stages took the research to a design brief. Simulated survey and interview data, declared as such, and a service blueprint mapped the journalist's journey through tournament coverage. Three problems stood out: institutional silence, late notice, and the belief that a credential equals entry.

Round 2 · Ideation

Real-time tracking

Every change shows what changed, why, and what to do next, delivered before it hurts.

A simulated two-day workshop produced 32 ideas, narrowed through feasibility and prioritization matrices to a ranked shortlist of eight. The concept that won syncs each update between the journalist and gate staff at once, and scales how much each person hears to how much help they already have.

Round 3 · Prototyping

Architecture decided before code

Flows and screens were locked first, so dev followed a solid structure rather than a guess.

Nine stages turned the concept into a build-ready specification: an information architecture from a simulated card sort, design tokens verified against WCAG 2.2 AA in light and dark, task flows and a data model. It also settled sign-in and support for three languages.

Simulated design research.

The design challenge

How Might We

How might we soften the impact of an access change on journalists?

Answer

Turn accreditation into a live record: every change reaches the journalist and the venue gate in real time, with its reason and the next step.

Act 03 · Solution

Press logistics secured.

How this app backs your daily coverage.

  1. IllustrationAt night in a hotel room: a hand holds a phone showing a green check.

    Before departure

    Confirm matches on your press slate

    AccreditaPass clarifies which fixtures you are authorized to cover so you can book flights and hotels without risking your travel budget.

    Open the running application
  2. IllustrationOn a train to the stadium: a generic phone displays an arrow pointing to a new entrance.

    To the stadium

    Know in time if your access shifts

    If your credential changes in transit, the app explains the reason and directs you where to go so you reach the right gate.

    Open the running application
  3. IllustrationA wall bracket showing two flight routes, one marked with the note 'if they win'.

    Knockout stage

    Plan on certainty, not on guesswork

    During knockout rounds, the app shows each fixture conditioned on previous outcomes so you can book flights knowing what each result would change.

    Open the running application
01 / 03
Act 04 · Architecture

A trilingual app.

Integrated technical stack.

Front-end decisions

Runs entirely in the browser

The app lives client-side, so journalists can open it on any phone without depending on a server behind it.

Blazor WebAssembly on .NET 10, written in C#, with a narrow TypeScript layer of two files for theme and locale storage. The app runs on an in-memory provider behind one interface, so every page reads the mock or the API without changing a line. Seven routes; the record is gated because it is personal, while the match schedule and help stay public. English, Spanish and Portuguese run at exact parity, 339 keys each, and switching language or theme never signs you out.

Back-end decisions

Real-time updates

When something changes, the record updates on its own, with no refresh and no support call.

An ASP.NET Core Web API with validated CRUD endpoints and an in-memory store, switched off by default so the live site never depends on it. Its middleware runs in a stated order: CORS, error handling, token authentication, request logging. SignalR carries each change notification to the client. It is a basic layer that proves the contract, not a production back end.

Design system

A structure that scales

Every screen shares one set of design tokens, tuned for a light and a dark theme.

Dual-theme design tokens were defined in the prototyping round and verified against WCAG 2.2 AA in both themes. The dark palette was re-derived against a #000000 anchor rather than inverted. The access card, change row, foreseeable badge and stale indicator share one token set, and appearance follows a three-way setting: light, dark or system.

Accessibility

Inclusive by default

Smooth keyboard navigation and screen-reader support, passing starting accessibility checks.

A new change is announced to assistive technology the moment it happens. Skip links, visible focus at all times and clear labels with input validation are built in. To avoid flooding screen readers, help sections and change rows use progressive disclosure, showing detail only when the user asks for it.

It is a basic layer that proves the contract, not a production back end.

For more, access the repository.

Act 05 · Schedule

Built in five weeks.

From sketch to finished build.

  1. 01Starting prototype28–29 Jul · 28 commits
  2. 02Usability audit30–31 Jul · 24 commits
  3. 03Simulated research11–14 Aug · 39 commits
  4. 04Front-end development14–17 Aug · 51 commits
  5. 05Feature iteration18–20 Aug · 37 commits
  6. 06Back-end API20 Aug · 19 commits
  7. 07Launch29–30 Aug · 8 commits · Live 30 Aug

Reconstructed from the public commit history of github.com/jdsaire/accreditapass: 206 commits across 16 runs, 28 Jul – 30 Aug 2026. The research, ideation and specification dossiers were written outside the repository, so their bars mark the day each one entered it. Nothing was committed from 1 to 10 August or from 21 to 28 August.

Act 06 · Evaluation

Usability audits.

Diverse and rigorous.

The figures
  • 4 → 141Critical findingsSimulated audits, first to second.
  • 8 → 18818WCAG checks passingSimulated audits, first to second.
  • 545545512 front-end33 back-endAutomated tests512 front-end and 33 back-end, in xUnit and bUnit.
What it means

Fixed, not just found. 18 of the first audit's 26 findings were fixed before the second; half the critical ones by turning editable forms into read-only cards.

What transfers. Audits that end in fixes, with what stays open written down.

Method. Audit 1 measured the pre-reframing app at commit 0653b4e; Audit 2 measured the build at b37066d. Both used simulated task-attempts and participants; neither involved a real user.

Heuristics. From 5 fails at the first audit to 7 passes at the second.

Still open. Target size, reflow at 320 px and the Spanish sign-out row, because neither audit ran in a browser.

Act 07 · Closure

Final claims.

Gains, Limits, Future.

The milestone

From concept to working interface

I conceived, designed and shipped this interface in a stack I had never used, directing the code and debugging it until it held.

The limit

A proof-of-concept architecture

The data store, sign-in and server run as a proof of concept: enough to prove core logic, not for commercial deployment.

Next step

Impact on a digital team

Next, I bring this end-to-end way of building to the digital team of an established company, as an AI Product & Experience Engineer.

Disclosure notes

An independent portfolio project. No affiliation, endorsement or institutional link with FIFA. Accreditation data runs as a local simulation in the browser session and is never stored. The match schedule is the only real asset.

Simulated design research. The studies documented here involved no real users. Every dataset, workshop participant and usability test is a synthetic artifact created to demonstrate the method, not the result of recruitment.


Next steps

Keep exploring

Read the case closest to yours.

  1. Illustration

    BANKING

    Yape photo says paid. This app validates it safely.

    Trust & Verify: a React and TypeScript app that lets a merchant check a Yape payment is genuine. Built in under a week.

    Access Brief
  2. Illustration

    SOFTWARE

    How I built this website with no coding degree.

    DesignOps System: from a single page to a bilingual multi-page site in Vanilla HTML, CSS and JavaScript code. Built in five months.

    Access Brief
  3. Illustration

    AIRPORT

    Paying a fee Lima's airport had never charged.

    TUUA Transfer: the web payment flow I designed for international transfer passengers at Jorge Chávez. Handed over in 2025.

    Access Brief
01 / 03

CONTACT

Let's talk.

Start a conversation