Engineering a Seamless Digital Experience for OTR’s Fuel & Convenience Ecosystem
Redesign OTR’s website to unify its fuel pricing, convenience store services, and in-store dining (e.g., Subway, Krispy Kreme) into a single, intuitive platform. Prioritized speed, cross-device consistency, and real-time data integration.
Challenge:
- Fragmented User Journeys: Separate interfaces for fuel prices, store locator, and food menus caused disjointed navigation.
- Legacy System Constraints: Outdated CMS limited dynamic content updates (e.g., live fuel pricing).
- Mobile Performance Bottlenecks: Heavy imagery slowed load times on 3G/4G networks.
Solution:
- Built a custom React.js frontend with a headless CMS (Contentful) for real-time content control.
- Designed a unified dashboard integrating fuel pricing, food ordering, and store services.
- Optimized media delivery via CDN and WebP compression for low-bandwidth users.
Category
Fuel Retail & Convenience Stores
Clients
OTR (On The Run)
Location
Melbourne, Australia
Project Duration
2023–2024
My Role
Lead Frontend Developer & UI/UX Architect
2. Design & Development Innovations
UI/UX Strategy:
- Dynamic Fuel Price Widget:
- Created a real-time pricing map with geolocation, allowing users to compare nearby stations.
- Designed an interactive toggle between fuel types (e.g., Unleaded 91 vs. Diesel).
- Unified Navigation:
- Merged food menus, convenience store offerings, and fuel services into a single menu with AI-driven suggestions based on time of day (e.g., coffee promotions in the morning).
- Accessibility-First Design:
- Implemented WCAG 2.1 standards, including screen-reader-friendly labels for fuel price charts.
Technical Execution:
- Headless Architecture:
- Decoupled frontend (React.js) from backend (Node.js + Contentful CMS) for faster updates.
- Enabled OTR’s team to adjust promotions instantly without developer dependency.
- Performance Optimization:
- Reduced homepage load time from 5.2s to 1.8s using lazy loading and CDN caching.
- Introduced a progressive web app (PWA) for offline access to store locator and menus.
- Cross-Platform Consistency:
- Developed a responsive grid system ensuring seamless transitions from desktop to mobile, including touch-friendly fuel price sliders.
3. Results & Impact
- User Engagement: Session duration increased by 40% post-launch, driven by the unified dashboard.
- Performance: Achieved a Google PageSpeed Score of 92/100 on mobile (previously 58).
4. Technical Details
- Frontend: React.js, Redux, CSS-in-JS (Emotion).
- Backend: Contentful CMS, Node.js, RESTful APIs.
- Hosting: AWS Amplify with CloudFront CDN.
- Launch Date: August 2024.
