Shell First Website & App

Shell First tasked us with developing a new website to promote their loyalty program and highlight Shell’s national network of fuel stations, products, partnerships, and ongoing campaigns. The goal was to create a platform that felt modern, user-focused, and conversion-ready—making it easy for users to explore and join the Shell First ecosystem.

Following the success of the website, we expanded the project with the development of a mobile app—designed to enhance the experience on mobile devices and bring the Shell First program into users’ pockets.

Built for real-time search. Accessible from anywhere.

The web experience is focused and fast. Users can search by location, compare prices, and apply filters by fuel type or brand. It’s responsive, mobile-first, and built for repeat use.

Core features:

• Geolocation-based search
• Filters by supplier, price, and fuel type
• Interactive map and list views
• Real-time data updates from DGEG
• Station profiles with detailed information
• Admin-controlled advertising system

Designed for clarity. Built for engagement.

The Shell First website delivers a modern, responsive experience that highlights Shell’s network, product range, and marketing partnerships. Clear navigation makes it easy to find relevant information, while the loyalty section was built to encourage fast sign-ups and increase customer participation.

Core features:

• Overview of Shell’s national presence and services
• Dedicated loyalty program section
• Campaigns and partner highlights
• Multilingual-ready (currently in Portuguese)
• Integrated analytics for continuous performance tracking

A seamless loyalty experience in your pocket.

The Shell First app extends the platform’s functionality into mobile. Built to support day-to-day interactions, it includes everything from news and campaigns to full loyalty card management.

Core features:

• News and active campaigns
• Physical loyalty card activation
• Virtual loyalty card creation and history
• Store locator via Google Maps
• User account and data management
• In-app display of card and benefits

The website was developed using Next.js for fast, scalable performance, paired with Tailwind CSS for clean, responsive styling. Content is managed through Sanity CMS, which provides modular flexibility and multilingual support.

The mobile app was developed using React Native and Expo, delivering a smooth cross-platform experience across iOS and Android. Google Maps powers the store locator in both web and mobile. Google Analytics and Tag Manager were integrated across platforms to monitor performance, user behavior, and campaign effectiveness—ensuring both tools evolve with real data.