ONE PASS

Project Context

ONE PASS is a Saudi event execution company. Its website has to work as a credibility document for two very different audiences at once: clients evaluating whether the company can deliver an event, and candidates considering applying to work there, in Arabic and English.

Target Users

• Clients in Saudi Arabia evaluating an event execution partner
• Arabic-first readers who expect the Arabic version to feel native, not translated
• English-reading stakeholders and international partners
• Candidates browsing the careers section

Main User Journey

1. Land in the correct language and stay in it
2. Understand what the company actually executes
3. Review previous projects as proof of capability
4. Move to careers or contact depending on intent
5. Submit an enquiry through the contact form

Constraints

• Full bilingual EN/AR parity with real RTL, not a mirrored layout
• A single-page architecture, so every section had to work in both directions
• A cinematic dark brand identity that had to survive being made readable and accessible
• Scroll motion had to support the story without slowing the page down

My Role

• UI/UX Design, Frontend Development, Bilingual EN/AR Structure (RTL), Motion Design with GSAP, Single-Page Architecture

Key Work

• Bilingual EN/AR experience with RTL support
• Cinematic dark brand identity
• GSAP scroll animations & transitions
• Services, projects & careers showcase
• Contact form integration

UX & Design Decisions

• One page, two audiences: the section order answers a client's questions first (what the company executes, who it has executed for) and then hands candidates a careers section, instead of splitting the site into two competing navigations
• Services are presented as a list of operational capabilities — planning, operations, guest management, access and flow control — so a client can match their own event to a capability rather than read marketing copy
• The client logo strip sits directly under the positioning statement, because for an event execution company the strongest credibility signal is who has already trusted it
• Arabic is a language toggle on the same single-page structure, not a separate stripped-down site: every section a client reads in English exists in Arabic at the same depth
• RTL was designed rather than mirrored: reading direction, sequence indicators and the direction motion travels in were re-decided for Arabic instead of flipping the English layout
• Motion is tied to scroll position, so it reveals content the visitor is already moving towards and never gates a section behind an animation that has to finish first

Technical Setup

• Hand-written HTML, CSS and JavaScript, with no CMS or page-builder layer between the design and the markup
• GSAP drives the scroll motion; animation state is derived from scroll position rather than from timers, so it stays in sync when a visitor scrolls fast or jumps between anchors
• A single document with anchor navigation, which is why every section had to work in both reading directions without a separate Arabic template
• Language direction is set on the document, so RTL is applied by the browser's own layout engine instead of per-component overrides

Technologies & Tools