Overview
Vepple is a virtual experience platform used by 30+ UK universities including Imperial College London, Nottingham Trent, and Queen's University Belfast. As the sole front-end and UX developer at Revolution Viewing, I collaborate directly with the CTO and Product Manager on design and product direction, while also supporting customer success through client onboarding, demos, and feedback sessions. My work extends beyond typical frontend—I write GraphQL queries, build ACF blocks in WordPress, and implement features across the Vue.js/Quasar frontend. Insights from client interactions directly shape the features I build, from the mobile navigation overhaul to the events system. The platform has delivered 4x more pages viewed per session compared to standard university websites, with users averaging 12+ pages and nearly 7 minutes per visit. Over 1 million students have interacted with the platform.
Key Contributions
Mobile Navigation
The original header-based navigation wasn't cutting it on mobile. I designed and built a completely new system from scratch: a fixed bottom tab bar with five contextual actions—Menu, Map, Personalise, Checklist, and Chat. Each tab opens custom swipeable bottom sheet panels built with VueUse, surfacing expanded navigation, Open Day schedule tracking, filter controls, and direct access to Explore by Map. The result: 85% increase in mobile engagement and 41% longer session duration.
Events Management System
Universities needed a way to host hybrid virtual and on-campus open days. I architected a comprehensive events system with full calendar views (day/week/month), Firebase Firestore-backed personal agendas, real-time countdown timers, iCal export, and URL-persisted filters. Built TikTok-inspired session pages to cycle through open day talks with swipeable navigation. Integrated Firebase real-time chat alongside Q&A platforms like Slido and Chatify. This drove a 108% increase in views per session with users staying 3+ minutes longer on average.
Explore by Map
Built interactive maps using Mapbox GL JS with custom 3D/2D controls, turn-by-turn directions (walking, cycling, driving), geolocation, location clustering with grouped pins, and fuzzy search. Map users now average 21 pages per session, a 64% increase in engagement time compared to non-map users.
Guided Tours
Enhanced the Guided Tour suite built on Pannellum for 360° panoramas, adding interactive hotspots, intro/end screens featuring ambassador videos with real-time captioning, mini-map navigation, and content spots embedding reels, galleries, and videos. Added dynamic FOV logic that adjusts zoom bounds based on panorama aspect ratio. Over 1 million students have used Guided Tours, viewing 65% more pages and staying 50% longer per session.
Home Screen Designs
Architected a modular home page system with four interchangeable designs, configurable via each client's dedicated WordPress instance with GraphQL. Variants include a typewriter animation with layered opacity, gesture-based filter panels with glassmorphism styling, and an embedded Guided Tour preview reusing the Pannellum viewer and ambassador video captioning system mentioned above.
Analytics and A/B Testing
Improved the GTM analytics infrastructure across the frontend and shared component library. Built a centralised data layer module to capture user interactions, enabling the marketing team to measure engagement with video content, interactive tours, and navigation flows.
Integrated GrowthBook A/B testing for various experiments including home page variants and different UI approaches for guided tours, enabling data-driven design decisions.
Component Library
Built reusable content blocks for universities to customise their experiences, documented in Histoire (Storybook for Vue). Blocks include carousels, video embeds, testimonials, and call-to-action sections that universities can configure via their CMS.
Headless CMS Architecture
Developed custom ACF blocks and GraphQL queries for the headless WordPress CMS using WPGraphQL. Each university has a dedicated WordPress instance where content editors configure their experience, with the Vue.js frontend fetching content via GraphQL through Stellate CDN for edge caching. I write queries and mutations across both the CMS and frontend, ensuring performant content delivery and seamless editor workflows.
Accessibility Mode
Architected a comprehensive WCAG-compliant accessibility layer with centralised Pinia state management. Supports OS preference detection and shareable accessible URLs via query parameters.
When enabled, accessibility mode activates global audio-described video track switching across embedded video platforms, auto-expanding transcripts, and 360° panorama motion suppression. Integrated @vue-a11y/announcer for screen reader live region announcements, with a keyboard-navigable toggle, visible focus states, and analytics tracking.
Impact Metrics
- 30+ UK universities including Imperial, NTU, QUB, UCLan, Kingston, BCU
- 4x more pages viewed per session vs standard university websites
- 12.13 pages per session with 6m52s average session duration
- 1M+ students interacted with Guided Tours
- 40% international traffic from 200+ countries
- 70% of students said Vepple makes them more likely to attend Open Day
Sources
- Vepple Features & Pricing: Platform metrics
- Explore by Map: Map engagement stats
- Events System: Events metrics
- Guided Tours: Tour engagement stats