Quiero que diseñes y desarrolles una página web educativa, extremadamente simple e intuitiva, para ayudar a una persona mayor que tiene un Garmin Instinct 2 y no sabe usarlo.
OBJETIVO PRINCIPAL
La página debe funcionar como una especie de “asistente paso a paso”. La persona no debería tener que leer un manual ni saber términos técnicos.
Ejemplo:
“¿Qué querés hacer?”
🚶 Caminar
🏃 Salir a correr
❤️ Ver mis pulsaciones
😴 Ver cómo dormí
🔋 Ver la batería
⏰ Usar una alarma
🏊 Registrar natación
📱 Conectar el reloj al celular
⚙️ Cambiar algo del reloj
Si toca “Caminar”, la página debe mostrar algo como:
Apretá el botón GPS
[imagen/ilustración del reloj señalando el botón]
Con los botones UP/DOWN buscá “Caminar”
Apretá GPS para entrar
Esperá a que encuentre GPS
Cuando estés listo, apretá GPS para empezar
Y luego explicar:
Para terminar: apretá GPS → seleccioná “Guardar”.
La experiencia tiene que ser visual y guiada, como si alguien estuviera al lado del usuario explicándole qué hacer.
⸻
DISEÑO
Quiero una estética:
Usar una estética inspirada sutilmente en Garmin, pero NO copiar exactamente su interfaz ni su branding.
Paleta sugerida:
La página debe sentirse confiable y sencilla.
⸻
HOME
Crear una pantalla inicial con:
Título grande:
¿Qué querés hacer con tu reloj?
Subtítulo:
Elegí una opción y te voy a decir exactamente qué botones tocar.
Después mostrar tarjetas grandes con iconos:
🏃 Actividades
❤️ Salud
⏰ Herramientas
⚙️ Reloj
También incluir una sección:
“No sé qué tocar”
con un botón grande:
▶ Empezar desde cero
⸻
SISTEMA DE TUTORIAL
Cada función debe abrir un tutorial paso a paso.
Cada paso debe tener:
Ejemplo:
⸻
Paso 1 de 5
Buscá el botón GPS
Mirá el lado derecho del reloj.
Apretá el botón GPS una vez.
[ilustración del reloj con GPS resaltado]
No lo mantengas apretado.
[ Siguiente → ]
⸻
Después:
Paso 2 de 5
Elegí “Caminar”
Usá los botones ▲ y ▼ para moverte por la lista.
Cuando aparezca Caminar, apretá GPS.
[ Siguiente → ]
⸻
Agregar una barra de progreso:
● ● ○ ○ ○
y texto:
Paso 2 de 5
⸻
BOTONES DEL GARMIN
Crear una sección visual donde se muestre el Garmin Instinct 2 de frente y se identifiquen claramente sus botones:
Al tocar cada botón, mostrar:
GPS
“Sirve principalmente para iniciar actividades, seleccionar opciones y confirmar.”
UP / MENU
“Sirve para subir por las opciones y abrir el menú.”
DOWN
“Sirve para bajar por las opciones.”
BACK
“Sirve para volver atrás.”
CTRL
“Sirve para abrir el menú de controles rápidos.”
Importante: usar una representación visual clara del reloj y señalar cada botón con líneas/flechas.
⸻
FUNCIONES IMPORTANTES
Crear tutoriales completos para estas funciones:
Actividades
Salud
Herramientas
Información
Configuración
⸻
FUNCIÓN ESPECIAL: “¿QUÉ ESTOY VIENDO?”
Agregar un botón permanente:
❓ ¿Qué significa esto?
Al tocarlo, permitir seleccionar un elemento de la pantalla del reloj.
Por ejemplo:
❤️ 72 BPM
→ “Esto significa que tu corazón está latiendo 72 veces por minuto.”
👣 4.523
→ “Son los pasos que caminaste hoy.”
🔋 68%
→ “Es la batería que le queda al reloj.”
☀️ 23°
→ “Es la temperatura que muestra el reloj.”
La explicación debe ser extremadamente sencilla.
⸻
MODO “ACOMPAÑAME”
Crear una opción especial en la home:
👴 “Acompañame paso a paso”
Cuando se activa, el usuario selecciona qué quiere hacer y la web muestra solamente UN paso por pantalla.
No mostrar demasiada información.
Ejemplo:
⸻
VAMOS A EMPEZAR
1
Apretá GPS
[imagen grande del reloj]
Apretá el botón una sola vez.
¿Lo hiciste?
[ Sí, continuar → ]
⸻
Luego:
2
Buscá “Caminar”
Usá ▼ para bajar.
[ Ya lo encontré → ]
⸻
Esto debe sentirse casi como una llamada de asistencia.
⸻
AYUDA SI SE EQUIVOCA
En cada paso incluir un pequeño botón:
“Me equivoqué”
Al tocarlo mostrar:
“Tranquilo. No pasa nada.”
y explicar cómo volver atrás.
También incluir:
“No encuentro esta opción”
que muestre posibles razones y qué hacer.
⸻
BUSCADOR
Agregar arriba un buscador:
🔍 ¿Qué querés hacer?
Ejemplos:
“Quiero medir cuánto camino”
“Quiero poner una alarma”
“Quiero ver mis pulsaciones”
“Quiero saber cuánta batería tengo”
El buscador debería entender frases naturales y llevar al tutorial correspondiente.
⸻
DISEÑO RESPONSIVE
La página debe estar diseñada principalmente para celular.
Debe funcionar perfectamente en:
En celular:
⸻
DETALLE IMPORTANTE
Quiero que la aplicación sea realmente funcional, no solamente un mockup.
Usar:
No necesito backend.
Guardar preferencias simples en localStorage si resulta útil.
⸻
ESTILO DE ILUSTRACIONES
Las ilustraciones del Garmin deben ser claras y didácticas, no fotografías.
Crear un modelo visual simplificado del Garmin Instinct 2:
Cuando el tutorial diga:
“Apretá GPS”
el botón GPS debe quedar visualmente destacado y tener una pequeña animación de pulsación.
Cuando diga:
“Apretá UP”
debe destacarse UP.
Esto es MUY importante porque la persona necesita saber físicamente qué botón tocar.
⸻
NAVEGACIÓN
En todo momento mostrar:
← Volver
Y arriba:
Inicio > Actividades > Caminar
para que sea fácil saber dónde está.
No utilizar menús complejos.
⸻
TONO
El lenguaje debe ser:
Evitar frases demasiado técnicas como:
“Accede al menú contextual mediante una pulsación prolongada.”
Preferir:
“Dejá apretado este botón durante unos segundos.”
⸻
MICROCOPY
Usar frases como:
“Vamos de a poco.”
“No pasa nada si te equivocaste.”
“Si no encontrás esto, tocá ‘Necesito ayuda’.”
“Cuando estés listo, seguimos.”
“Perfecto. Ya hiciste el primer paso.”
⸻
IMPORTANTE SOBRE EL GARMIN
La página debe estar específicamente pensada para el Garmin Instinct 2, no para un smartwatch genérico.
Los nombres de botones, menús y funciones deben corresponder al Garmin Instinct 2 real.
Si existe alguna diferencia entre versiones del Instinct 2 que pueda afectar una instrucción, diseñar la interfaz para indicarlo claramente en vez de inventar una función.
⸻
RESULTADO FINAL
Quiero que el resultado se sienta como:
“Un manual de Garmin convertido en una aplicación que te acompaña.”
La persona debería poder agarrar el celular, entrar a la página, decir:
“Quiero salir a caminar”
y saber exactamente:
qué botón tocar → qué debería aparecer → qué hacer después → cómo terminar → cómo guardar.
Priorizar SIEMPRE la facilidad de uso sobre la cantidad de información.