SIMET Bus — Complete Frontend Development for Italy's Premier Bus Company

Project Overview

Client: SIMET SpA (now part of FS-BusItalia, Ferrovie dello Stato Group)
Industry: Transportation / Long-distance Bus Travel
Project Type: Frontend Development, UI/UX Implementation
Duration: July 2019 – February 2020 (~7 months)
Role: Lead Frontend Developer

The Client

SIMET SpA is one of Italy’s most established long-distance bus transportation companies, with over 74 years of history, a fleet of 120 modern buses, and serving 250+ destinations across Italy and Europe. The company covers over 6 million kilometers annually, connecting major Italian cities with a focus on routes from Calabria to Northern Italy.

In 2020, SIMET became part of FS-BusItalia, the bus division of Ferrovie dello Stato Italiane (Italian State Railways), further consolidating its position as a key player in Italian public transportation.

The Challenge

SIMET needed a complete redesign of their digital presence to:

Modernize the booking experience with an intuitive, mobile-first interface
Showcase their premium fleet and brand identity
Streamline the ticket purchasing flow from search to payment
Create responsive email templates for transactional communications
Design printable ticket formats compatible with their backend systems
Implement a loyalty program interface (Carta Miglia)

The goal was to create a cohesive frontend system that would work seamlessly with their existing backend infrastructure while providing a premium user experience befitting their brand positioning.

Technical Solution

Technology Stack

I built the frontend using a robust, production-ready stack optimized for performance and maintainability:

Category	Technologies
Markup	HTML5, Semantic HTML, ARIA accessibility
Styling	SCSS/SASS, CSS3, Flexbox, CSS Grid
JavaScript	ES6+, jQuery 3.3.1, Babel
UI Framework	Semantic UI / Fomantic UI 2.8.3
Build Tools	Gulp 4, PostCSS, Terser, Imagemin
Email	MJML (responsive email framework)
Icons	Font Awesome Pro 5.12
Dev Tools	BrowserSync, Sourcemaps

Architecture Highlights

The project followed a component-based architecture with modular SCSS files:

sass/
├── _variables.scss    # Design tokens (colors, fonts, spacing)
├── _mixins.scss       # Reusable SCSS functions
├── _base.scss         # Reset and base styles
├── _components.scss   # Reusable UI components
├── _main.scss         # Page-specific styles
├── _helper.scss       # Utility classes
└── style.scss         # Main entry point

Key Features Delivered

1. Smart Booking Search Widget

The homepage features a sophisticated booking widget with:

Intelligent city search with autocomplete functionality
Swap button to quickly reverse origin/destination
Italian-localized date pickers with weekend highlighting
Return journey toggle with dependent date validation
Passenger count selectors for adults and children

<!-- Booking form with smart dropdowns -->
<form class="booking-search">
    <div class="form-locations-wrap">
        <select id="hero-from" class="ui search dropdown">
            <option value="#">Scegli la tua città di partenza</option>
        </select>
        <img src="img/swap_fields.svg" class="swap svg" />
        <select id="hero-to" class="ui search dropdown">
            <option value="#">Scegli la tua città di arrivo</option>
        </select>
    </div>
</form>

2. Interactive Seat Selection

One of the project’s most complex features was the interactive bus seat map:

Visual representation of the actual bus layout
Real-time seat availability indicators
Multi-seat selection with maximum limit enforcement
Bus model specifications display (Mercedes Grand Tourer, etc.)
Separate maps for outbound and return journeys

// Seat selection logic
var max_seats = 3;
var round_trip_checked_seats = 1;
var return_trip_checked_seats = 0;

<table class="floor">
    <tr>
        <td data-seat-number="1">
            <input type="checkbox" id="seat-01" class="checked">
            <label class="checkmark" for="seat-01">01</label>
        </td>
        <td class="corridor"></td>
        <!-- More seats... -->
    </tr>
</table>

The interface features a comprehensive modal system for:

User authentication (Login, Registration, Password Recovery)
Social login integration (Facebook, Google)
Search functionality with live results
Help center with contact information
Cookie consent (GDPR compliant)

// Modal management
$('.login-modal').on('click', function(c) {
    c.preventDefault();
    $('.ui.modal.login').modal('show');
});

4. Animated Statistics Counter

A visually engaging “Our Numbers” section with animated counters:

$('.count').each(function() {
    // Animate numbers when section becomes visible
    if ($(this).visible(false, true)) {
        // Counter animation logic
    }
});

Displaying impressive metrics:

74 years of history
6 Million km traveled annually
120 buses in the fleet
250 destinations served

5. User Onboarding Tour

Implemented Intro.js for first-time user guidance:

<div class="user-access" data-step="01"
     data-intro="Qui puoi accedere all'area riservata">
    <a href="#" class="login-modal">Accedi</a>
</div>

6. Custom Loading Animation

A branded sprite-based loading animation using CSS:

<div class="myLoader">
    <div>
        <figure id="loader-image" class="step1"></figure>
        <span>caricamento... <strong></strong></span>
    </div>
</div>

7. Service Worker Implementation

Progressive Web App capabilities with offline caching:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('js/sw.js')
        .then(function(registration) {
            console.log('Registration successful');
        });
}

Email Template System

Built a complete transactional email system using MJML for guaranteed cross-client compatibility:

Email Types Delivered:

Registration Confirmation – Welcome email with account activation
Password Recovery – Secure password reset flow
Ticket Receipt – Purchase confirmation with booking details
Carta Miglia – Loyalty program notifications

<!-- MJML Email Structure -->
<mjml>
  <mj-head>
    <mj-include path="./partials/style.mjml" />
  </mj-head>
  <mj-body>
    <mj-section background-color="#BA0C2F">
      <mj-column>
        <mj-text color="#ffffff" align="center">
          <h1>RICEVUTA DI ACQUISTO</h1>
          <p>Il tuo codice di prenotazione è:</p>
        </mj-text>
        <mj-button background-color="#ffffff" color="#BA0C2F">
          <strong>ABCD1234EF</strong>
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Printable Ticket Design

Created a 4-page folding ticket template optimized for A6 format (105mm × 148mm):

Page 1: Validity and cancellation terms
Page 2: Journey details with QR code
Page 3: Passenger information
Page 4: Terms and conditions

The design includes folding instructions graphics for self-assembly after printing.

Design System

Brand Colors

$red: #A70F27;        // Primary brand color
$red_light: #FF022A;  // Call-to-action buttons
$red_dark: #880B1F;   // Hover states
$gray: #161A1F;       // Body text
$black: #333333;      // Headings
$green: #69C1BE;      // Success states
$blue: #2699FB;       // Links and accents

Typography

Primary Font: Open Sans
Weights: Regular (400), Semi-Bold (600), Bold (700)
Approach: Mobile-first with rem units for scalability

Responsive Breakpoints

// Mobile-first approach
@media screen and (min-width: 768px) {
    // Desktop styles
}

Build Pipeline

Gulp Tasks

The project features a comprehensive Gulp-based build system:

// SASS compilation with PostCSS processing
gulp.task('sass', function() {
    return gulp.src('./sass/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([
            autoprefixer({ browsers: ['last 2 versions'] }),
            pxtorem,
            flexibility
        ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./css'));
});

// Image optimization with WebP conversion
gulp.task('imagemin', function() {
    return gulp.src('./img_original/*')
        .pipe(imagemin([...]))
        .pipe(webp())
        .pipe(gulp.dest('./img'));
});

Performance Optimizations

Critical CSS extraction using Penthouse
JavaScript bundling and minification with Terser
Image optimization with automatic WebP generation
Retina-ready images with @2x variants
Lazy loading preparation for images

Pages Delivered

Portal (25+ templates)

Homepage with hero booking widget
Destinations map and listings
Route availability search results
Journey summary page
Seat selection interface
Payment form (with Gestpay integration ready)
Transaction confirmation
User dashboard (travel history, profile, Carta Miglia)
News and Blog sections
FAQ with accordion UI
Company pages (About, Fleet, Certifications, Partners)
Contact page with form
Legal pages (Privacy, Terms, Transport Conditions)
404 Error page

Email Templates (5)

Base template
Registration
Password recovery
Ticket receipt
Carta Miglia notification

Printable Tickets (4 pages)

Complete foldable ticket format

Results & Impact

The new frontend system delivered:

Modern, responsive design that works seamlessly across all devices
Intuitive booking flow reducing user friction in the purchase process
Consistent brand experience across web, email, and print touchpoints
Maintainable codebase with modular SCSS architecture
Performance-optimized assets with modern image formats and critical CSS
Accessibility improvements with semantic HTML and ARIA attributes

Technical Highlights

Browser Compatibility

Full support for modern browsers (Chrome, Firefox, Safari, Edge)
IE 9+ with graceful degradation and polyfills
Flexibility.js for IE flexbox support
Object-fit polyfill for image handling

Code Quality

ES6+ JavaScript with Babel transpilation
SCSS with BEM-inspired naming conventions
Sourcemaps for debugging
Clean, documented code structure

Localization Ready

Italian/English language switching
Localized date formats (DD/MM/YYYY)
Italian calendar labels and UI text

Conclusion

The SIMET Bus frontend project demonstrates my ability to deliver a complete, production-ready frontend system for a major transportation company. From interactive booking interfaces to responsive email templates and printable tickets, every aspect was carefully crafted to provide an excellent user experience while maintaining technical excellence.

The modular architecture and comprehensive build system ensure the codebase remains maintainable and scalable as the company continues to evolve under the FS-BusItalia umbrella.

Technologies Used: HTML5, SCSS, JavaScript (ES6), jQuery, Semantic UI, Gulp, MJML, Font Awesome Pro, Intro.js, Flickity

Deliverables: 25+ responsive page templates, 5 email templates, printable ticket system, complete build pipeline