Fgfactory developed from scratch and delivered a coupon aggregator web platform with built-in gamification and interactive elements.

Visa Pay City Development

Project Card

  • Deliverables
    UX / UI DESIGN WEB DEVELOPMENT GAME ENGINE DEVELOPMENT BACKEND DEVELOPMENT AWS INFRASTRUCTURE PLATFORM RELEASE
  • Project Team

    PROJECT MANAGER

    Project planning and management. Responsible for team cooperation and tasks completion on time.

    ART LEAD

    Art team supervision. Responsible for art director and internal feedback and quality check.

    UX / UI DESIGNER

    Responsible for the entire platform UX planning, UI and icons design, and tech team consulting.

    TECH LEAD

    Architecture development and code review. Responsible for regular cooperate with game developers.

    WEB DEVELOPERS

    The team of 2 web developers completed visual interface and admin panel front-end development.

    ENGINE DEVELOPER

    Built the platform interactive virtual city with buildings, props and various sights using PixiJS.

    BACKEND / DEVOPS DEVELOPER

    Responsible for the backend development, security and scalability maintenance, and deployment to AWS.

    QA ENGINEER

    Manual project testing that’s performed during the development pipeline and final testing in the end.

  • Technical Stack
    PIXI.JS ANGULAR .NET CORE ENTITY FRAMEWORK POSTGRESQL AWS FIGMA SPINE
  • Timeline
    16 MONTHS
  • Extertal Links

Yuriy

Gaming Expert Consultant

Already have questions regarding the project?

Take a minute, we’d love to hear about your request.

Get in touch
Get in touch

Overview

In partnership with Azerbaijan-based agency Meal for Real and Visa Azerbaijan Fgfactory built and delivered a new version of the web platform aggregator of discount offers from brands, the core of which is an interactive approach to browsing and searching for offers using a virtual map of the city of Baku.

Visa web platform aggregator of discount offers from brands

Objectives

The Fgfactory project team had to create a new version of the platform from scratch to release, covering all stages of development including design, frontend, game engine development, backend with a database for processing requests, storing and managing visual content. And also deliver the platform to the hosting, ensuring high performance and data security.

Visual Design and Interface

Create a visually attractive design that will be filled with interactive elements for interaction. In addition, create a new design style for the user interface that should align with the Visa brand guidelines.

Frontend and Backend

Develop the front-end and back-end logic of the platform for correct operation, the ability to release regular updates, as well as to ensure the ability to regularly download, update and monitor content.

Stable and High Performance

Ensure high performance, which should include uninterrupted operation depending on the platform load, fast loading speed to ensure the best user experience.

Infrastructure Based on AWS

Build the necessary server architecture on AWS servers, deploy the back-end logic of the platform on the hosting, configure the necessary security and scaling settings.

Deployment and Support

Deploy the platform to the created infrastructure, check for uninterrupted operation, and further ensure high performance and support in the necessary updates.

Compliance with Visa requirements

The platform must comply with the security, data processing and interaction requirements of global Visa requirements.

Process

Based on the initial requirements and goals, the Fgfactory team developed a pipeline that allowed us to combine all the necessary components and build work in a format of cooperation and regular discussion of progress with the client's team.


The visual component initially included the development of a fully interactive 3D city in order to provide users with deep immersion in virtual Baku and give the opportunity to travel around the city and its attractions.

Fully interactive 3D map of Baku city
Visa Pay City Platform Development

However, to improve optimization and at the same time the quality of the render, the interactive map was later updated to a static 3D render. This made it possible to improve the speed of the platform, while making the quality of the 3D render higher with additional details of lighting, shadows, reflections, etc.

Visa Pay City Static 3D Render

You can find out more about how we work with the optimization of a large number of visual assets for web projects that require high performance at the link below:

Web Games Development

We provide browser games development services for clients, helping them to drive players' attention and elevate their businesses. When developing 2D and 3D projects we utilize HTML5 and JS technologies and aim to build cross-platform games that can be launched on any platform: from desktop to mobile.

Discover More

In parallel with the creation of the interactive map, our team developed a user flow and interface corresponding to the Visa brand guidelines. The interface includes adaptive support for various desktop and mobile platforms. This ensures the widest coverage of platform users.

Technical Side

The project consists of a robust technical architecture that seamlessly integrates frontend, backend, and game engine components to deliver an engaging and interactive city simulation experience for users.

Frontend

The frontend is divided into two key components:

  1. User Interface. The main website where users can explore a detailed cityscape featuring buildings, streets, and various environmental elements. The city map is rendered in a pseudo-3D style using PixiJS, where pre-rendered building and environment images are layered based on coordinates to create depth and realism.
  2. Admin Panel. A dedicated dashboard for application owners to manage brand listings, promotions, and special offers. This interface allows real-time updates and configuration of displayed content.

Game Engine & City Rendering

Although the project is not truly 3D, it leverages PixiJS to create a visually immersive experience. The city is composed of numerous detailed elements, strategically placed based on coordinate data exported from Spine. This approach ensures an optimized rendering process while maintaining high-quality visuals.

Each building in the city features a signboard displaying the brand name. When users click on a signboard, a slider appears with current promotional offers, including discounts and special deals. This interactive feature enhances user engagement by providing direct access to brand promotions.

Backend

The backend is built using ASP.NET Core API with PostgreSQL as the database. It is hosted on AWS EC2 instances with Load Balancer and Amazon RDS for scalable and efficient data management. The backend handles user authentication, data storage, and communication between various parts of the system.

Additional Features
  1. A classic catalog view is available, allowing users to browse brands and their offers in a structured format.
  2. The admin panel serves as the control center for managing brand data, promotions, and city elements efficiently.
  3. The entire system is designed for scalability and high availability, ensuring smooth performance under heavy traffic conditions.

By combining advanced web technologies with an efficient backend, the project delivers a unique and interactive platform that seamlessly integrates a visually rich cityscape with functional e-commerce-like elements

Results

As a result of the work of the Fgfactory team, the project was completed in full, with all performance and quality requirements met. It was completed on time, delivered to the client and launched for public use.

The platform includes an interactive map of Baku, which has been stylized and adapted to the needs of the platform for convenient browsing and use, as well as a catalog of offers from brands with the necessary functionality for browsing different categories of offers like Fashion, Food and Beverage, Leisure, Entertainment etc. and searching for offers.

Visa Pay City Platform

The Visa Pay City platform is an incredible example of combining business goals and interactive experience. It combines valuable content that is available to users and an exciting immersion in the virtual atmosphere of a beautiful city.

Contact Us
Let's build something amazing together.
Think we might be the right friends for your next adventure? Take a minute, we’d love to hear about your request.
CONTACT US