BACK TO PORTFOLIO
Tourisme Alberta: Case Study
On the “Routes bilingues” page, Tourisme Alberta introduces an intuitive tool to guide you off the beaten path and towards meaningful encounters in both English and French.
As part of the website redesign/development project, the bilingual section had specific requirements: bilingual content (FR/EN), thematic tourism routes, regional segmentation (Nord de l’Alberta, Edmonton & environs, Centre, Calgary & environs, Rocky Mountains, Sud de l’Alberta).
Scope of Work:
- Discovery & stakeholder/user research (personas, user journeys)
- Information architecture / sitemap / wireframes
- Visual design (UI mock-ups, bilingual content layouts)
- Front-end development (responsive, mobile first)
- CMS/content modelling and bilingual content implementation
- Language switcher & bilingual linking (FR/EN)
- Interactive features: region cards, route itinerary builder (if applicable)
- SEO & accessibility (performance, metadata, bilingual tags)
- Content translation workflow and editorial review
- Quality assurance (cross-browser, cross-device, bilingual QA)
- Launch planning, analytics setup, post-launch monitoring & iteration
Specialties:
- Bilingual UX Design (ensuring seamless FR/EN experience)
- Responsive Design for Travel/Tourism (mobile travellers, route planning)
- Interactive Route Planning Tools (itinerary builder or route selector)
- Travel Photography & Visual Storytelling (Alberta landscapes, regional segmentation)
- CMS Implementation for Multilingual Content
- SEO for Multilingual / Region-Based Travel Content
- Accessibility in Bilingual Contexts
- Analytics-Driven Iteration for Tourism Websites
Client: Tourisme Alberta
Category: Bilingual (French / English) Experience, Content-rich Interactive Section (Travel-Route Planner), Responsive Web Design, UX/UI Design for Tourism Users


Steps & Process
UX-Design-Development Life Cycle
Here’s how you might describe the process you (as UX Researcher/Designer) followed for this section:
a) Discovery & Research
- Stakeholder interviews: Meet with tourism-marketing, content owners, bilingual communications team to understand the goals of the “Routes bilingues” section (e.g., promoting French-language visitors/travelers, bilingual routing, user journey through the province).
- Competitive/benchmark review: Research how other destination-tourism websites handle bilingual experiences, thematic itineraries and “routes/road-trips”.
- User research: Develop personas (Francophone travellers from Québec or Europe, bilingual Canadians, English-speaking travellers open to French experience) and map their journeys: selecting a route, filtering by region, planning an itinerary, switching language.
- Information architecture audit: Review existing site architecture (menu, navigation, language switcher, content sections) to identify pain points and bilingual UX issues.
b) Definition & Strategy
- Define user-goals & tasks specific to this section: —> “Select a bilingual tourism route” —> “Explore French-language-friendly stops in the route” —> “Switch between French and English with full content alignment”.
- Define business/goals: increase bilingual tourism engagement, show multilingual servicing, encourage off-the-beaten-path exploration, raise awareness of French-friendly routes.
- Scope: define what success looks like (dwell time on route pages, bilingual page views, click-through to attractions individual pages, regional route selections).
- Content strategy: Decide how bilingual content will live (mirrored parallel EN/FR versions), how route data is structured, how region cards are presented.
- Language strategy: Ensure consistent language switcher, translation workflow, metadata/URLs for EN/FR sections, SEO for bilingual pages.
c) Information Architecture & Wire-framing
- Sitemap/flow for “Routes bilingues”: Region listing → route detail pages (for each region) → optionally itinerary builder/customization (the description mentions “développez votre itinéraire personnalisé”).
- Wireframes in low-fidelity for mobile and desktop: show hero area (intro text “Empruntez les routes touristiques bilingues de l’Alberta!”), region cards (Nord de l’Alberta, etc.), filters or toggles, language switcher, call to action (start planning your trip).
- Interaction design decisions: bilingual toggle, region card expansion, route map/visual, itinerary builder UI.
- Accessibility/UX considerations: ensure that language switcher is obvious; ensures readability in both languages; navigation is straightforward; route cards are scan-friendly.
d) Visual Design & UI
- Design language: ensure brand identity of Tourisme Alberta is respected (colour palette, typography, photography of Alberta landscapes), and also bilingual aesthetic (FR/EN).
- High-fidelity mock-ups for desktop and mobile: hero, region grid, route detail pages, itinerary builder (if applicable).
- UI components: region card component (image + region name + clickable link), language toggle, navigation, hero image, content sections for each route.
- Responsive behaviour: ensure cards reflow, hero images scale, navigation collapses properly on mobile, bilingual content remains aligned.
- Micro-interactions: hover states for region cards, language switch animation, “build your itinerary” interactive element.
e) Development / Implementation
- CMS/content management: configure bilingual content structure (separate FR and EN pages in parallel CMS). Set up content models for region/routes, metadata, images, alternate languages.
- Front-end development: build responsive layouts for region listing, region detail, multilingual toggle, mobile navigation.
- Integration of interactive elements: if an itinerary builder is present, implement the logic/UI for “développez votre itinéraire personnalisé”.
- Language switcher implementation: ensure correct linking between English and French pages. Ensure SEO tags for bilingual pages.
- Performance & accessibility: optimise images (for large Alberta-landscape visuals), ensure WCAG compliance (especially for bilingual toggle and navigation).
- QA & testing: functional testing across languages (FR/EN), devices, browsers; check that region cards link to correct content. Ensure that metadata/SEO is correct for each language. Test performance benchmarks.
f) Content Migration & Translation
- Content inventory for the “Routes bilingues” section: gather French/English content (text, images, route descriptions) and map to new content model.
- Translation workflow: ensure French text is native and appropriately localized; check bilingual consistency.
- Editorial review: ensure images/alt text, metadata are correct in both languages; ensure route region names, descriptions, links are correct.
g) Launch & Post-launch
- Pre-launch checks: bilingual page linking/tags, SEO redirects, verify analytics tracking for region clicks, language toggles.
- Go-live: deploy bilingual section, monitor performance metrics.
- Post-launch evaluation: gather analytics and user feedback. Implement changes when needed.
- Iteration: refine region cards, add new route detail pages, improve interactive itinerary builder based on user data.