IT: +39 338 62 46 214
Jeddah Central Oceanarium Mobile App
introduction
The Jeddah Central Oceanarium — one of Saudi Arabia’s most ambitious cultural destinations — was still under construction when we were brought in. The brief: design the full digital visitor experience from scratch, for a venue not yet open, for an audience we couldn’t directly observe.
The challenge — greenfield UX design for a large-scale marine destination with a diverse audience: families, solo travellers, international tourists, school groups. Five archetypes, three languages, one app to serve all of them.
The strategic problem
— No product baseline — greenfield design; all research required analogous and proxy methods
— Audience fragmentation — 5+ visitor archetypes with conflicting entry points and journeys
— Physical-digital integration — live navigation, AR, and immersive content across a multi-zone environment
— Scale from day one — MVP designed as foundation for ticketing, gamification, post-visit replay, multilingual support
Business trigger — Part of Vision 2030’s cultural infrastructure programme. Engineering couldn’t start without a validated UX framework — decisions made now would be embedded in the build.
Team
Design team
— Andrea Mabellini, UX Lead — research strategy, experience vision, IA, design direction (end-to-end)
— 2× UX/UI Designers — wireframe execution, mockup iteration, design system components
— 1× UX Researcher — persona framework, journey synthesis, competitive analysis
Key stakeholders — Client Project Lead · Experience Director · Content & Editorial Team · Technology Partners · Venue Architecture Team
Platform scope — Pre-visit (planning, ticketing, itinerary builder) · On-site (navigation, AR, contextual content) · Post-visit (highlights, educational content, sharing). Three phases, five archetypes, three languages.
My responsibilities
— Research — Led stakeholder interviews; defined visitor archetype framework from analogous and proxy research
— UX Lead — Drove strategy across 3 designers; aligned every major decision with stakeholders
— Mockups — Defined visual direction; high-fidelity screens across all key touchpoints
— Design System — Full component library; structured for scalability and future phases
Research Plan
Research at a glance
— Stakeholder interviews — client leadership, venue architects, and experience directors; aligned on vision, constraints, and audience priorities
— Competitive analysis — 6 international aquarium and museum apps mapped for navigation patterns, AR integration, and gamification models
— Expert sessions — marine education specialists and cultural destination UX benchmarking
— Visitor archetype definition — 3 primary archetypes (Families, Solo Explorers, International Tourists) built from demographic data and analogous venue research
— Prototype walkthroughs — design reviews run against each archetype across all core flows
The venue was not yet open — methodology adapted accordingly: analogous research, stakeholder proxy sessions, and international benchmark data replaced direct user observation.
Personas
Personas developed from analogous research and stakeholder proxy sessions — the venue was not yet open, so direct user observation wasn’t possible. Starting from proto-personas, we refined profiles through competitor benchmarking and alignment sessions.
Key finding: the 5 visitor archetypes had fundamentally different goals for the same space. Families wanted structured discovery, solo travellers wanted depth, tourists wanted highlights. A single unified flow would fail all of them. This drove the decision to build a journey-adaptive model rather than one standard app experience.
User Journey Mapping
Journey mapping covered three phases — pre-visit, on-site, and post-visit — built from stakeholder sessions, competitor walkthroughs, and analogous venue research.
Key finding: the biggest risk was the gap between pre-visit expectation and on-site reality. In comparable venues, the transition from planning to arrival was consistently broken — visitors arrived with expectations the space couldn’t meet digitally. That finding drove the IA restructure and made pre-visit planning a primary app surface, not an afterthought.
Key Learnings
Four research findings that redirected the project:
- Visitors navigate by intent, not location. A family asks “what can we do next?” — a tourist asks “how do I find the highlight I saw online?” Neither starts with a map. Pivot: zone-based navigation → three-phase journey model (before / during / after visit). App entry point shifted from a map to a personalised visit planner.
- Physical and digital layers were disconnected. Visitors moved between environments without continuity — disorientation, fragmented journeys, low engagement despite strong content. End-to-end journey mapping across physical and digital layers; focus shifted from isolated touchpoints to an integrated experience.
- No orientation framework within the experience. Visitors couldn’t find exhibits or understand what came next; spatial and narrative anchor points were missing. Unified experience framework linking navigation, storytelling and engagement — foundation for the design system and interaction principles.
- Interaction patterns were inconsistent across zones. Visitors couldn’t distinguish browsing content from navigating the space — visual language was identical. Distinct treatment introduced for wayfinding vs content UI; documented as a core visual principle across all installations.
Research: Hypothesis vs Reality
- Initial assumption — visitors needed better UI to navigate the venue
- What research revealed — the problem was upstream: no framework to plan the visit, no continuity between physical and digital touchpoints
- Shift in scope — from “design app screens” to “design the experience framework across physical space and digital layers”
Key design decisions
- Journey-first IA — navigation by visitor type and journey phase, not by location or species category. Rejected category-based: didn’t match how visitors think about their visit.
- Modular content system — each attraction as a reusable content module. Rejected page-by-page design: unscalable for future phases.
- Pre / In / Post-visit structure — three-phase framework governing the full engagement window. Rejected single-session design: missed the relationship-building opportunity before and after the visit.
Information Architecture
IA defined iteratively across multiple alignment sessions — starting from interim structures and consolidating into modular app packages that could accommodate different levels of complexity and future content growth.
Key finding: the original IA was built around content categories (species, exhibits, zones). Early prototype testing showed visitors couldn’t locate anything. Pivot: journey phase became the primary navigation layer; content and location became secondary filters within each phase.
Wireflows
Wireflows mapped how users would move across the three journey phases — capturing decision points, content access patterns, and the physical-to-digital handoff moments.
Key finding: on-site navigation required contextual awareness. The app needed to respond to where a visitor was physically, not just what they’d tapped. This added a location layer to the interaction model that hadn’t been in the original scope — and became one of the most important structural decisions of the project.
Wireframes
Wireframes translated validated flows into testable interfaces — layout, hierarchy, and interaction logic across all key screens, then developed into an interactive prototype for stakeholder review.
Key finding: first-round prototype testing showed users couldn’t tell “browsing content” from “navigating the space” — the visual language was identical. We introduced a distinct treatment for wayfinding vs content UI, resolving the confusion in round two and establishing a core visual principle for the design system.
Mockups
The mockups represent the visual synthesis of the entire research and design process — translating validated journeys, structural decisions, and interaction principles into a cohesive and engaging experience. Built on top of the three-phase journey framework (pre / in / post-visit) and the modular content system, they bring the Oceanarium to life across key touchpoints.
What the mockups prove
— Journey continuity — Every screen connects to a phase of the visitor journey, not to a taxonomy category. The user always knows where they are and what comes next.
— Contextual content delivery — Content surfaces based on physical location and visit phase — not just on demand. This was the core design principle driving the IA.
— Scalable system — The component library and modular structure mean new exhibits, languages, or touchpoints can be added without redesigning the experience from scratch.
Results
The Jeddah Oceanarium project was a concept and UX design engagement — the app was not launched or put into production. Results are defined by the quality and completeness of the design deliverables and the validation process conducted during the project.
What was delivered
— End-to-end design system — Components, tokens, and interaction patterns covering navigation, content delivery, AR triggers, gamification, and ticketing flows
— 5 core user journeys validated through research synthesis: pre-visit planning, on-site navigation, AR/immersive content, gamification, and post-visit replay
— 3 user archetypes defined from field research and competitive analysis — Families, Solo explorers, and International tourists — each with distinct flow priorities
— Phased content architecture — Information hierarchy and content model mapped across 4 zones of the physical Oceanarium, enabling future editorial and localisation scalability
— Stakeholder alignment — UX rationale and design decisions presented and approved by the project leadership, with documented evidence for each major design choice
Validation approach
— Competitive benchmarking across 6 international aquarium and museum apps
— Heuristic evaluation of the information architecture against WCAG and usability standards
— Prototype walkthroughs with internal reviewers across the defined user archetypes
— Iterative design cycles from wireframe to high-fidelity, with documented rationale for each pivot
The project established a scalable UX foundation ready for handoff to engineering — pending client decision on development timeline.
Use any form
Design impactful user experiences with ease—everything you need is at your fingertips.
Feel free to reach out for a project inquiry, a coffee chat, or a consultation. Let’s explore how I can help you achieve your design goals. Whether it’s crafting impactful experiences or discussing innovative ideas, I’m here to collaborate and bring value to your vision.