Trusted Key – Key Booking Web Application

A real-life project that has been developed.
Main Project Image
Main Project Image
Main Project Image

Project Overview

Trusted Key is a web application that guides users through booking Smart or Transponder key services for their vehicles. The platform helps users identify their key type, choose between two booking options — Skip the Line or Standard Booking — and complete their appointment efficiently. Document submission is only required for vehicles from 2024 onwards.

The main goal was to make booking straightforward, guide users through the process, and reduce confusion for those unfamiliar with their key type.

The Problem

Many vehicle owners do not know their key type or how to book key-related services. Traditional service booking processes can be confusing, leading to incorrect bookings, unnecessary delays, and frustration. Some workshops also struggle to guide users clearly, which affects both user experience and operational efficiency.

Additionally, a small subset of users with 2024+ vehicles must submit documents, but this step should not interfere with the booking flow for the majority of users.

Project Goal

The objectives of Trusted Key were to:

  • Guide users through the booking process for Smart and Transponder keys

  • Help users identify their key type quickly and accurately

  • Offer two booking options: Skip the Line or Standard Booking

  • Include document submission for vehicles 2024+ without complicating the main flow

  • Reduce errors, confusion, and booking delays

Design Process

Research and Insights

I structured the flow around the main journey:

  1. Identify key type (with guidance for unsure users)

  2. Select booking type (Skip the Line or Standard Booking)

  3. Provide vehicle details

  4. Submit documents if required (vehicles 2024+)

  5. Confirm booking

This ensured users always knew what to do next, with the option to submit documents only when necessary.

User Flow

I structured the flow around the main journey:

  1. Identify key type (with guidance for unsure users)

  2. Select booking type (Skip the Line or Standard Booking)

  3. Provide vehicle details

  4. Submit documents if required (vehicles 2024+)

  5. Confirm booking

This ensured users always knew what to do next, with the option to submit documents only when necessary.

Spendly Flow Chart
Spendly Flow Chart
Spendly Flow Chart
Large Project Gallery Image #1
Large Project Gallery Image #1
Large Project Gallery Image #1
Large Project Gallery Image #2
Large Project Gallery Image #2
Large Project Gallery Image #2

Key Design Decisions

Step-by-step guided flow to reduce user confusion

  • Key identification assistance for users who don’t know their key type

  • Two booking options clearly displayed to support user choice

  • Document upload step made optional and only triggered for 2024+ vehicles

  • Confirmation screens summarising the appointment and next steps

Every design choice prioritised clarity, speed, and reducing errors in booking.

Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2

The Solution

The final web app allows users to:

  • Identify their Smart or Transponder key type easily

  • Choose between Skip the Line or Standard Booking

  • Enter vehicle details and upload documents if required

  • Receive clear confirmation of their appointment

The design supports both confident and unsure users, guiding them efficiently from start to finish.

Create a free website with Framer, the website builder loved by startups, designers and agencies.