Skip to content

Case studyWebsite Design & DevelopmentKoh Samui, Thailand

Teddy Bike
Samui.
A complete digital experience, built from the ground up.

We designed and developed the Teddy Bike Samui website from the ground up — a bilingual site for a scooter and car rental business, with a showroom of the fleet, clear prices and deposits, and booking that opens in WhatsApp.

Client
Teddy Bike Samui
Sector
Scooter & car rental
Services
Website design & development
Year
2026
Explore the case study
teddybikesamui.com
The Teddy Bike Samui homepage on desktop: the name and a Yamaha Xmax 300 side by side, with a Book on WhatsApp button and the Google rating.
The Teddy Bike Samui homepage on a phone, with the Xmax 300 above a full-width Book on WhatsApp button.
Captured from the website’s October 2026 production files.

02The vision

Built aroundthe rental.

Teddy Bike Samui rents scooters and cars in Koh Samui. The website was designed to answer a visitor’s questions in the order they come — and to make reaching the business effortless.

“Scooter and car rental made simple — well-kept vehicles, honest prices, and a booking that takes two minutes on WhatsApp.”
The website’s opening line

Designed to help visitors

  1. Explore the fleet

    Scooters and cars, presented one vehicle at a time.

  2. Understand each vehicle

    Model, engine size, daily price, deposit and conditions — before any message.

  3. Find their way

    Delivery, documents and driving in Thailand, activities, good spots and a FAQ.

  4. Reach the business

    WhatsApp, email and social channels, with booking always one tap away.

03Design & identity

A calmdesign system.

Warm cream and sage surfaces, deep navy type, and accent colours that each do one job. Every value below comes from the website’s own stylesheet.

  • #1C3350

    --navy

    Headings, text and booking buttons

  • #142639

    --navy-deep

    Hover states and dark panels

  • #5E7A96

    --gold

    The italic accent, hover and focus

  • #FAFAF7

    --cream

    Page background

  • #E9EDE9

    --sage

    Gradients and soft surfaces

  • #25D366

    --whatsapp

    WhatsApp actions

  • #C8362E

    --red

    Deposits

Type in the hero: the eyebrow Koh Samui · Thailand, the title Teddy Bike Samui with Samui in italic, the line Scooter & car rental in Koh Samui, and the introduction.
Playfair DisplayHeadings, with an italic accentOutfitInterface and text
The header: menu button, the Teddy Bike Samui logo and the wordmark Teddy Bike Samui, Bike Rental.
Logo & wordmarkThe client’s logo, set beside a serif wordmark in the header.
Header controls: an EN / FR language switch and a navy Book now button.
Language switch and Book now
The green Book on WhatsApp button.
The WhatsApp action
Showroom vehicle panel: Honda, 125cc, 01 / 08, Click 125, 250 baht a day, deposit 2,000 baht or passport in red, dots, View & book and See our scooters.
A vehicle panel in the showroom

Layout principles

  1. A clear order

    Eyebrow, serif title, a plain line, then the action.

  2. Pill-shaped actions

    Navy to book, green for WhatsApp.

  3. Soft panels

    Rounded corners on cards and forms.

  4. Colour with a job

    Red is kept for deposits.

04Website experience

The whole offer,on one page.

One homepage carries the rental, from the first screen to the last call to WhatsApp.

  1. 03Rental without the hassle

    Rental without the hassle on a phone: a small local team, free delivery from 3 rental days for scooters and 4 for cars, and all included — helmets and phone holder.
  2. 04Activities

    Activities on a phone: more than rentals, starting with the Shooting Range card and its Ask us on WhatsApp link.
  3. 05How it works

    How it works on a phone: No. 1 Message us on WhatsApp, No. 2 Pick up or get it delivered.
  4. 07Your ride is waiting

    Your ride is waiting on a phone: send your dates on WhatsApp, a green WhatsApp +66 62 418 3134 button, open daily 9am to 7pm.
The homepage on a phone, 390 px wide. Partial views end at a gap between blocks.

Top to bottom

  1. First screen

    The promise, a vehicle and Book on WhatsApp.

  2. Our fleet

    The showroom of scooters and cars.

  3. Rental without the hassle

    Delivery, what’s included, assistance, English and French.

  4. Activities

    Shooting range, zipline, island tour, motocross.

  5. How it works

    Three steps, from a message to the ride.

  6. Questions & reviews

    A FAQ, then Google reviews.

  7. Your ride is waiting

    A last call to WhatsApp.

teddybikesamui.com
The showroom on desktop: Scooters and Cars switch, Honda Click 125, 125cc, 1 of 8, 250 baht a day, deposit 2,000 baht or passport, View & book and See our scooters.

The fleet,as a showroom.

Swipe or use the arrows to move from the smallest scooter to the largest; switch to cars in one tap.

  1. Scooters or cars

    One switch, each side with its starting price.

  2. Every vehicle in full

    Brand, model and engine size.

  3. Price and deposit

    Side by side, before the first tap.

  4. Easy to browse

    Counter, dots and arrows, from the smallest to the largest.

  5. Two next steps

    View & book, or see the whole range.

Under the hood

  1. Self-hosted fonts

    No third-party font requests.

  2. Optimised images

    Separate, optimised files, cached for a year.

  3. Native swipe

    The showroom scrolls with the browser itself — no JavaScript mid-swipe.

  4. Tested across screens

    Showroom checked from 320 px phones to 1440 px desktops.

  5. Security headers

    On every page, with a branded 404.

  6. Reduced motion

    Animation steps aside when visitors ask for less.

Implementation work documented in the website’s production package and test reports — not performance measurements.

05Mobile experience

Made for thephone in hand.

  1. Swipe through the fleet

    The showroom scrolls natively under the finger, one vehicle at a time.

  2. A complete menu

    Scooters, cars, documents and driving in Thailand, activities, good spots, FAQ and contact.

  3. Booking always in reach

    Book now in the header and a floating WhatsApp button on every screen.

The showroom on a phone: Honda Click 125, 250 baht a day, deposit 2,000 baht or passport, View & book.
Showroom
The menu on a phone: Home, Our scooters, Our cars, Documents & driving in Thailand, Activities, Good spots, FAQ, Contact us.
Menu

06Booking journey

From a vehicleto a WhatsApp message.

Every vehicle page ends with a short request form. The website takes no payment and confirms nothing on its own: the request opens in WhatsApp, written and ready to send, and the business replies to confirm availability. Payment happens at delivery.

Vehicle page Book this vehicle — Yamaha Xmax 300

teddybikesamui.com
Booking form on the Xmax 300 page: name, start and end dates, where you are staying, an optional message, Send request on WhatsApp, and No WhatsApp? Send by email.
  1. Choose a vehicle

    Every vehicle has its own page, with its price, deposit and conditions.

  2. Add your details

    Name, start and end dates, where you are staying and an optional message.

  3. Send it your way

    The request opens in WhatsApp, ready to send — or by email, without WhatsApp.

Contact page Every channel in one place

teddybikesamui.com
Contact page: WhatsApp, Email, Facebook, Instagram and TikTok cards, and Open every day from 9am to 7pm, Koh Samui, Thailand.

Every wayto get in touch.

WhatsApp first, then email, Facebook, Instagram and TikTok — with the opening hours: every day, 9am to 7pm.

07The evolution

Built first.Then evolved.

Motion designed and built the original website, then returned to it: the same identity, the same promise and the same WhatsApp booking, with a new first screen and a showroom in place of two category cards.

Desktop · 1440 × 900

teddybikesamui.com
Later homepage, desktop: title on the left, Yamaha Xmax 300 on the right, Google rating under the button.
Original homepage, desktop: centred title and Book on WhatsApp button, no vehicle shown.

Before Original website

teddybikesamui.com
Original homepage, desktop: centred title and Book on WhatsApp button, no vehicle shown.

After Evolved website

teddybikesamui.com
Later homepage, desktop: title on the left, Yamaha Xmax 300 on the right, Google rating under the button.
Historical versions, rendered from archived source files on 23 October 2026 at identical viewport sizes: the original website (production files of July 2026) and the later version (production package approved in October 2026). Not captures of the live site.

Mobile · 390 × 844

Later homepage on a phone: the Xmax 300 under the title, then a full-width Book on WhatsApp button and the Google rating.
Original homepage on a phone: title, promise and Book on WhatsApp button, text only.

Before Original website

Original homepage on a phone: title, promise and Book on WhatsApp button, text only.

After Evolved website

Later homepage on a phone: the Xmax 300 under the title, then a full-width Book on WhatsApp button and the Google rating.
Same capture conditions, on a phone-sized screen.
  1. The vehicle takes the stage

    A Yamaha Xmax 300 now anchors the first screen, beside the name.

  2. A clearer introduction

    A new line under the name says what the business does.

  3. Reassurance up front

    The Google rating summary moved up, under the booking button.

Before

Original Choose your ride section on a phone: a Scooters card and a Cars card, one above the other.

After

Later showroom on a phone: one vehicle with its price, deposit and View & book.
Vehicle discoveryOn a phone, two category cards filled about one and a half screens. The showroom puts a vehicle, its price, its deposit and the next step on one.

08Explore the website

See itlive.

A complete website for a rental business — the fleet, the details and the way to book — designed and developed by Motion Digital Studio.

Your website,from the ground up.

Motion Digital Studio designs and develops distinctive websites for businesses in Koh Samui, across Thailand and worldwide.