Oxford City Guide
Designing a trustworthy, offline-capable city guide for diverse audiences. Modernizing the experience for iOS/Android launch readiness.
Context
Oxford City Guide is a multilingual mobile app (iOS/Android) serving tourists, students, and academics across hundreds of POIs and tours. The inherited UI had monolithic tour flows, inconsistent spacing and terminology, and weak clarity around offline mode and permissions. Map and tour flows relied on implicit behaviors: auto-start, ambiguous exit. Audio failed silently, and "offline" was unproven.
The work spanned a refactor stabilization phase and iOS launch readiness, embedded with the PM and engineering team.
Team: Flutter engineers, QA, content, and data Tools: Figma, Flutter UI reviews, moderated and unmoderated usability tests, localization and accessibility audits, design system tokens, telemetry pairing
The Problem
Deliver a trustworthy, offline-capable guide while aligning with Apple HIG and privacy expectations. The goal: modernize the experience without breaking existing functionality, and prepare for App Store and Play review with privacy-safe patterns.
Project Goals
[TODO: Add four to six specific, measurable goals tied to app launch, user trust metrics, offline adoption, accessibility compliance, or multi-language readiness.]
What convinces users offline actually works?
Proof flows, download sizing, test snippets. Users won't trust claims without evidence.
How should tour start and exit feel?
Across entry points (auto vs manual; preload vs immediate). Clarity prevents abandonment.
What audio behaviors keep engagement high?
Speed, fallback, transcripts. Network drops shouldn't break the experience.
How do permission prompts affect adoption?
Privacy copy and prompt timing influence denial rates and user trust.
Which UI terms resonate across languages?
"Places" vs "POIs", translation coverage indicators. Unfamiliar terms confuse international users.
Research & Strategy
Methods: Moderated usability on tour start/exit, offline packs, and audio fallback. Unmoderated tasks for start/exit microflows. Field tests on spotty networks and airplane mode. Accessibility runs (large text, screen reader, outdoor contrast). Localization checks for en/ja/fr permission copy and translation coverage.
Participants: Tourists, students, academics, international families. Bilingual participants for JP/FR. Mixed devices and OS versions.
1–3 day visitor
The Tourist
Wants curated loops and clear directions
- Needs
- Offline confidence for roaming, minimal friction to start
- Design mandate
Local learner
The Student
1-hour breaks between lectures
- Needs
- Academic depth and credibility; familiar with app (shortcuts over hand-holding)
- Design mandate
Researcher or visiting scholar
The Academic
Seeks granular POI detail and citations
- Needs
- Plan tours in advance; offline and translation for international collaborators
- Design mandate
Mixed language fluency
The International Family
EN/JP/FR key; traveling together
- Needs
- Bilingual tours, offline to avoid roaming charges, audio for accessibility
- Design mandate
What we found:
"I won't believe offline until I can test it in 30 seconds. Show me it works before I travel."
- 01
Unclear tour start/exit
Users need explicit Start with preload indicator, tour-aware centering, manual GPS override; Exit with save-progress and quick feedback; Resume as an entry point.
- 02
Offline claims doubted
Show download size/time estimates, provide offline test card, clarify partial-offline transparency (map/text vs audio/images).
- 03
Audio failures kill trust
Visible fallback to device TTS with text highlight/transcript and speed control; surface error states transparently.
- 04
Permission fatigue
Single well-timed prompt with on-device copy; optional background location only when benefit is stated.
Design Process & Approach
Discovery/Definition. Audited navigation, permissions, and offline flows. Mapped pain points to events and metrics. Set success criteria (time-to-start, offline pass rate, audio fallback success). Identified terminology, spacing, and HIG alignment gaps.
Ideation/Design. Prototyped tour start/exit, offline pack UI, permission copy variants, and audio controls with fallback states. Designed translation coverage indicators, accessibility overlays, and map chrome (scale bar, distance units). Built design system tokens and components in Figma aligned to Flutter widgets.
Testing/Iteration. Moderated tests with forced network drops and GPS wobble. Unmoderated start/exit tasks. Localization and accessibility runs. Iterated on copy, fallback visibility, preload indicators, and Exit/Resume flows.
Key decisions
Explicit Start with preload indicator
Auto-start felt unpredictable to users. Explicit Start with visible preload progress reduces friction and builds confidence in the tour flow.
Offline test card before travel
Users won't trust 'offline mode' until they see it work in 30 seconds. Quick test validates the feature before relying on it for their trip.
Single, well-timed permission prompt
Multi-prompt fatigue led to denial. One prompt with on-device copy and stated benefit (background location only when needed) improved acceptance rates in testing.
UX Deliverables
Figma design system & components: Thirteen base tokens (spacing, typography, and colors), eight component variants (buttons, cards, dialogs, banners, and toasts), usage guidelines for accessibility (dynamic type, contrast, tap targets), permission copy variants, and offline state patterns.
Journey maps & user flows: End-to-end flows for each persona (tour discovery → start → navigate → audio → offline → exit), annotated with decision points and error states.
Wireframes & high-fidelity prototypes: Interactive Figma prototypes for tour start/exit, offline pack download, audio playback with fallback, permission prompts, and multilingual copy variants (EN/JP/FR).
Accessibility & localization audits: Screen reader validation, dynamic type scaling, contrast compliance (WCAG AA). Translation coverage matrix and language-specific terminology mapping.
Telemetry instrumentation spec: Event definitions (tour.start, audio.fallback_triggered, offline.pack_downloaded) mapped to user goals and success metrics.
Solution & Design Decisions
Tour flow clarity. Prominent Start with preload indicator. Tour-aware map centering. Manual GPS override. Exit with save-progress and two-tap feedback. Resume surface in-app and via notification. Skip/reorder stops for advanced users. Completion recap with badge and share.
Offline proof & control. Download cards with size/time estimates. Offline test card. Pack status and partial-offline transparency. Last-updated timestamp to build trust.
Audio & accessibility. Engine selection (studio/device TTS). Speed control. Transcript with highlight-as-you-listen. Visible fallback path with user-friendly errors. Language toggle and translation coverage indicator. Larger tap targets, contrast tokens, dynamic-type-friendly layouts.
Design System
Tokens for spacing, typography, and colors. Component variants for buttons, cards, and dialogs. Map chrome included. Permission banners and status toasts. Usage guidelines for language switches, accessibility (dynamic type, contrast, tap targets), permission copy variants, and offline status states.
Outcome & Impact
- Reduced tour start friction in tests: faster time-to-start, higher start rate on first attempt.
- Higher stated trust in offline after proof flow. Fewer permission denials in testing.
- Audio completion improved with visible fallback and transcripts.
- Accessibility compliance improved: dynamic type respected, better contrast and tap targets.
- Design system alignment reduced rework during engineering refactors.
Learnings
[TODO: Add two to four paragraphs reflecting on designing for multilingual audiences, trust-building in offline-first apps, or collaborative design in launch-critical timelines.]
My Role
Full-stack ownership spanning research, design, product, and engineering validation.
- UX research & synthesisLed moderated and unmoderated usability tests, defined personas and jobs-to-be-done, synthesized pain points into design priorities.
- Design system & componentsBuilt thirteen design tokens (spacing, typography, colors) and eight component variants in Figma aligned to Flutter widgets; documented accessibility guidelines and offline state patterns.
- Accessibility & localizationRan WCAG AA/AAA audits, validated dynamic type scaling and screen reader behavior, tested permission copy and terminology across EN/JP/FR.
- Product ownershipDefined personas and jobs-to-be-done for each audience segment, wrote user stories with acceptance criteria, prioritized the feature backlog against release constraints, and drove go/no-go decisions on scope.
- Flutter implementationBuilt a working prototype covering offline tour flow, audio playback with TTS fallback, and Supabase-backed POI data. Validated interaction design and technical feasibility end-to-end.