Loading

Smartbet

An animated company and product website - sports, gaming, platform products and services

From August to October 2021, I worked as a UI Developer at Smartbet, in a team of designers and developers. The design team supplied approved layouts; I implemented the UI for every page of the website, including the responsive versions.

Alongside the page builds, I set up a reusable atomic/BEM-based SCSS structure with styling tokens, and implemented the JavaScript animations and transitions between pages and product sections.

Role:
UI DeveloperEmployee
Scope:
Every website pageResponsive UISCSS structure and tokensAnimations and transitions
Team:
Designers and developers
Stack:
HTMLCSSSCSSJavaScript

What the work involved

Smartbet’s website presents distinct product families - sports, gaming and platform tools - alongside solutions, payment methods, providers and company pages. The designs were approved; my job was to turn every page into working, responsive, animated UI.

  1. Context

    Approved designs were ready for front-end implementation. The website covered:

    • Sports products
    • Gaming products
    • Platform tools
    • Solutions, payment methods and providers
    • Company pages

  2. A UI foundation

    A reusable SCSS structure, organised with atomic/BEM naming and styling tokens, so every page drew on the same rules.

  3. Product pages

    Every approved layout implemented across the sports, gaming and platform categories.

    Each product family has its own visual theme, inside one consistent site structure.

  4. Motion

    JavaScript animations and transitions that move titles, imagery and coloured section accents together as visitors go from page to page and product to product.

  5. Supporting sections, on every screen

    Services, solutions, providers, payment methods and company pages, their content entering in stages.

    Every page adapted across screen sizes, with navigation, typography and UI patterns kept aligned.

  6. What changed

    • The UI implemented across every page of the website
    • Animated page states and transitions between product families
    • One reusable styling foundation for the whole site

  7. What this shows

    • End-to-end responsibility for the website UI - not the backend or the product design
    • A reusable styling foundation alongside motion-heavy implementation
    • Accurate collaboration with a design team on a visually complex, multi-section site

Principles

What the build held to, page after page.

  • Design fidelity

    Approved layouts translated accurately into working pages.

  • Reusability

    Atomic/BEM-based styling and tokens, shared by every page.

  • Consistent motion

    Transitions that stay coherent across product families.

  • Responsive structure

    The same experience, preserved across screen sizes.

  • Visual consistency

    Navigation, typography and UI patterns kept aligned.

In detail

Five parts of the build, and how each was approached.

1. Moving between products

Going from one product to another changes titles, imagery and coloured section accents at once.

I implemented those transitions in JavaScript, so incoming and outgoing content hand over in step.

2. Different product identities

Sports, gaming and platform sections each carry their own visual theme.

They share one site structure, so navigation and layout stay familiar while colour and imagery change.

3. A hero in motion

The homepage opens on a continuously moving, shape-changing visual object, set alongside the hero content.

4. The navigation overlay

A full-page menu, grouped by product category, that opens and closes as an animated state.

5. Staged content

Service illustrations, support details, and the provider and payment grids enter progressively rather than all at once.

Have something similar in mind?

Tell me what you’re building. I reply within 2 business days.

Start a project

A new website, a product interface, a design system, or improving what’s already live.

Start a project