WaoSim Test Demo

Introduction

The WaoSim Test Demo project aims to create a user interface that mirrors the clean and modern aesthetic of the provided reference website. The focus is on usability and clear information presentation, with enhancements to improve visual appearance and user experience.

System Overview

The system will provide a seamless user experience for selecting eSIM plans, checking network coverage, and ensuring device compatibility. The design will incorporate best practices to enhance the visual appeal while maintaining the functionality of the reference site.

Functional Requirements

• As a User, I should be able to view available eSIM plans.
• As a User, I should be able to select the duration of connectivity.
• As a User, I should be able to choose a plan type.
• As a User, I should be able to check network coverage.
• As a User, I should be able to check device compatibility.

User Personas

• User: Individuals looking to purchase and manage eSIM plans.

Visuals Colors and Theme

• primary: #FF6F00 (a vibrant orange for brand identity)
• primary_light: #FFA040 (a lighter tint for hover states)
• secondary: #0055FF (a distinct blue for emphasis)
• accent: #FF4081 (a bright pink for CTAs and active states)
• highlight: #FFC107 (a warm amber for notifications)
• bg: #F5F5F5 (a light grey for background)
• surface: rgba(255, 255, 255, 0.9) (a soft white for cards/panels)
• text: #212121 (a dark grey for primary text)
• text_muted: #757575 (a muted grey for secondary text)
• border: rgba(0, 0, 0, 0.1) (a subtle border color)

Signature Design Concept

Interactive World Map Experience

The homepage will feature an interactive world map as the background, where users can explore different regions by hovering over them. Each region will highlight with a subtle glow, and clicking on a region will zoom in to display available eSIM plans specific to that area. The map will use @react-three/fiber for 3D interaction, allowing users to rotate and explore the globe dynamically. This immersive experience will make the site engaging and intuitive.

Interaction Model & Motion Direction

• Interaction Model: Parallax
  • The landing page will feature layered depth with a parallax effect, where the interactive map and UI elements move at different speeds to create a sense of depth.
  • Internal pages will be static for clarity and ease of navigation.

Non-Functional Requirements

• The system should load within 3 seconds on a standard internet connection.
• The UI should be responsive and accessible on all devices.
• The design should adhere to accessibility standards (WCAG 2.1).

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL
• AI Models: GPT 5.4 for user-friendly responses
• AI Tools: Litellm for LLM Routing
• Local Orchestration: Docker
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The design will follow the existing style of the reference site.
• The system will support multiple languages and currencies.
• The project will adhere to data privacy regulations.

Glossary

• eSIM: Embedded SIM, a digital SIM that allows users to activate a cellular plan without a physical SIM card.
• UI: User Interface, the space where interactions between humans and machines occur.
• WCAG: Web Content Accessibility Guidelines, a set of guidelines for making web content more accessible.