Skip to main content

​
What is DNI Cita Previa Redesign?

The DNI Cita Previa Redesign is a modern frontend redesign of Spain’s official online appointment booking system for obtaining or renewing the Spanish National Identity Document (DNI) and Passport. This project reimagines the user experience with a focus on accessibility, usability, and modern web standards.
This is a redesign project created to demonstrate improved UX/UI patterns for government services. It is not affiliated with the official Spanish government website.

​
Project Purpose

The original DNI appointment booking system (citapreviadnie.es) serves millions of Spanish citizens annually. This redesign addresses common usability challenges while maintaining the essential functionality users need:
  • Improved Navigation: Streamlined multi-step process from start to appointment confirmation
  • Modern Design: Clean, accessible interface following contemporary web design principles
  • Responsive Layout: Optimized experience across desktop, tablet, and mobile devices
  • Enhanced Accessibility: WCAG-compliant markup and navigation patterns

​
Key Objectives

​
User-Centric Design

The redesign prioritizes user needs with:
  • Clear visual hierarchy using CSS custom properties
  • Intuitive form layouts with proper validation
  • Consistent component patterns throughout the booking flow
  • Helpful contextual information at each step

​
Technical Excellence

/* CSS Custom Properties for consistent theming */
:root {
    --primary-blue: #003366;
    --primary-blue-dark: #002244;
    --background-gray: #f5f5f5;
    --text-gray: #374151;
    --border-light: #e5e7eb;
    --success-green: #059669;
}
The project demonstrates:
  • Semantic HTML5: Proper use of form elements, navigation, and content structure
  • Modern CSS: Custom properties, flexbox layouts, and responsive design
  • Progressive Enhancement: Functional core experience with enhanced interactivity
  • Performance Optimization: Optimized images with modern formats (WebP, AVIF)

​
Accessibility First

Accessibility Features

  • Keyboard navigation support
  • Screen reader-friendly markup
  • High contrast color schemes
  • Mobile-responsive navigation with toggle menu
  • Form validation with clear error messages

​
Project Structure

The application follows a logical flow matching the real-world appointment booking process:
1

Landing Page

Users choose between booking a new appointment or managing an existing one
2

Identification Selection

Choose authentication method: DNI/NIE data or electronic certificate (Cl@ve)
3

Appointment Form

Complete the detailed form with personal data, document information, and appointment preferences
4

Summary & Confirmation

Review all details and receive a confirmation code for the appointment

​
Technology Stack

HTML5

Semantic markup with proper form structures

CSS3

Custom properties, flexbox, responsive design

Vanilla JavaScript

Lightweight interactivity for navigation

​
Government Context

This system serves the Dirección General de la Policía (General Directorate of Police) under Spain’s Ministerio del Interior (Ministry of Interior). The redesign maintains official branding while modernizing the user interface: 
<!-- Official government header -->
<header>
    <div>
        <picture>
            <source srcset="./images/logo-ministerio.avif" type="image/avif">
            <source srcset="./images/logo-ministerio.webp" type="image/webp">
            <img src="./images/logo-ministerio.png" alt="Logo ministerio del interior">
        </picture>
    </div>
</header>

​
Next Steps

Explore Features

Discover all the features and improvements in the redesign

Get Started

Learn how to set up and run the project locally
Important: The appointment booking service is completely free. No organization or person can charge for this service. Always verify you are using official government channels.

Build docs developers (and LLMs) love

Get started for freeTalk to us