Nombre
: Cristian Contreras Child
Asignatura
: Proyectos de servicios web
Carrera
: Diseño y desarrollo web
Profesor
: Nicolas Espinoza Filippi
Fecha
: 17/11/2025
Realiza un diagrama de Ikigai con cuatro segmentos principales: lo que amas hacer, en qué eres bueno, lo que el mundo necesita y por lo que puedes ser remunerado:
Haz clic en los círculos 👉
Mapa de contexto
Investigación del mercado laboral en el campo del diseño y desarrollo web, identificando tendencias actuales del mercado, competencia, demanda del mercado, tecnologías emergentes y legislaciones relevantes.
Alta demanda de sitios web adaptables y accesibles.Incremento de tiendas online y soluciones de ecommerce.Enfoque en UX/UI (experiencia del usuario y diseño centrado en el cliente).Automatización de procesos mediante herramientas de inteligencia artificial.Integración con redes sociales y plataformas de pago.Plataformas como Wix, WordPress y Shopify permiten que muchos usuarios autogestionen su sitio.Profesionales freelance con alta competencia técnica.Agencias digitales con equipos multidisciplinarios.Negocios físicos que buscan digitalizarse.Profesionales independientes que requieren identidad digital.Empresas que necesitan mantenimiento web o rediseños actualizados.Alta demanda de desarrolladores full stack.Necesidad de presencia digital para negocios pequeños.Servicios de mantenimiento y optimización.Frameworks como React, Vue y Next.js.Tailwind CSS y otras herramientas de diseño rápido.Headless CMS para mayor flexibilidad.IA aplicada al desarrollo web.Ley de Protección de Datos Personales (LPDP en Chile).
Normas de accesibilidad web (WCAG).
Requisitos legales para plataformas de ecommerce (facturación electrónica, privacidad, seguridad de pagos).
Definir objetivos profesionales:
"Especifico” — El objetivo es desarrollar y publicar una plataforma de e-commerce autoadministrable para la empresa Botillería Hervé antes del del 21 de diciembre, enfocada en la venta con despacho a domicilio para aumentar las ventas en el canal digital, cumpliendo con la identidad visual de la marca. La plataforma será construida sobre WordPress, lo que facilitará su gestión de contenido, siendo su principal fortaleza la actualización de stock y precios sin depender del gestor; sin embargo, se identifica como debilidad la posible resistencia o dificultad de la empresa para adaptarse al uso inicial del CMS, lo cual será mitigado mediante un manual de usuario y capacitación. El público objetivo está compuesto por clientes locales y recurrentes de la botillería, principalmente adultos jóvenes y adultos entre 25 y 55 años, que valoran la rapidez, conveniencia y servicio de entrega a domicilio.
“Medible” — El progreso del proyecto se medirá mediante el cumplimiento de hitos semanales clave en el plazo de 9 semanas, asegurando la entrega a la Botillería Hervé el 21 de diciembre, esto por medio del gestor. Se considerará exitoso cuando se logre el 100% de la configuración técnica (WordPress, pagos y despacho) y se haya cargado un mínimo de 30 productos iniciales. La validación final se confirmará al obtener la Carta de Conformidad firmada por el cliente y la certificación de la capacitación impartida al personal, garantizando que el equipo de la botillería pueda gestionar autónomamente productos y procesar pedidos. Esto será validado mediante 3 pruebas de autogestión. El avance se registrará y documentará semanalmente para asegurar transparencia y control del proyecto. El éxito del proyecto permitirá a la Botillería Hervé aumentar sus ventas en el canal digital y mejorar la experiencia de sus clientes.
"Alcanzables” — El objetivo se podrá alcanzar mediante una planificación estructurada por etapas: análisis de requerimientos, diseño visual conforme a la identidad de la marca, desarrollo técnico de la tienda en WordPress, pruebas funcionales y capacitación al personal con pruebas de autogestión que permitan el buen manejo de la empresa. Se utilizaran recursos existentes, como el hosting proporcionado por la empresa y las herramientas de desarrollo web ya dominadas. Las habilidades necesarias —diseño web, gestión de contenido, configuración de comercio electrónico y soporte técnico— están presentes y se reforzarán con la investigación continua, el uso de documentación oficial y tutoriales especializados. Además, el compromiso del estudiante y la colaboración activa con la Botillería Hervé garantizarán que el proyecto sea realista, desafiante y totalmente alcanzable dentro del plazo establecido.
“Realista” — El objetivo es valioso y posible, ya que responde a una necesidad real de la Botillería Hervé: desarrollar una plataforma de e-commerce autoadministrable. El proyecto es alcanzable con las capacidades técnicas y recursos disponibles, usando WordPress para un sitio eficiente e intuitivo. Es el momento adecuado, considerando la creciente demanda del comercio electrónico y la oportunidad de fortalecer la identidad visual y despacho a domicilio. El objetivo también es coherente con mis metas académicas y profesionales, fortaleciendo competencias en desarrollo web, gestión de contenido y diseño de interfaz. Se consideraron mis fortalezas (WordPress, diseño y planificación) y mis debilidades (optimización avanzada y s depasarela pago), las cuales se abordarán con capacitación y práctica guiada.
Tiempo:
El proyecto se desarrollará durante el período académico establecido, con fecha límite de entrega el 21 de diciembre, y una duración total de 9 semanas, distribuidas en etapas de trabajo claramente definidas:
| Hitos | Semana | Fecha | Descripción |
|---|---|---|---|
| Hito n.º 0 | Semana 0 | 21-10-2025 | Inicio del proyecto. |
| Hito n.º 1 | Semana 1 | 27-10-2025 | Definición del valor profesional en el proyecto y establecimiento del propósito. |
| Hito n.º 2 | Semana 2 | 03-11-2025 | Construcción de la propuesta de valor y diferenciación de la marca. |
| Hito n.º 3 | Semana 3 | 10-11-2025 | Definición de usuarios, arquitectura de contenidos y objetivos funcionales. |
| Hito n.º 4 | Semana 4 | 17-11-2025 | Diseño de la estructura visual y desarrollo de wireframes de alta fidelidad. |
| Hito n.º 5 | Semana 5 | 24-11-2025 | Maquetación del sitio web en HTML, CSS y Bootstrap, asegurando responsividad. |
| Hito n.º 6 | Semana 6 | 01-12-2025 | Implementación del CMS WordPress y configuración base del entorno. |
| Hito n.º 7 | Semana 7 | 08-12-2025 | Desarrollo de Custom Post Types y campos personalizados (ACF) para contenido dinámico. |
| Hito n.º 8 | Semana 8 | 15-12-2025 | Incorporación de interacciones dinámicas mediante JavaScript, incluyendo buscador, carrito de compras y herramientas de accesibilidad. |
| Hito n.º 9 | Semana 9 | 21-12-2025 | Integración de la pasarela de pago, documentación completa del sitio y clases de administración de WordPress para los dueños de Botillería Hervé. Pruebas finales y publicación del proyecto. |
Cómo planeas aplicar este propósito en el desarrollo del proyecto y cómo esperas que esto contribuya a tu crecimiento profesional en el área.
Propósito profesional:
Mi propósito profesional es unir mi pasión por el diseño y desarrollo web con mi experiencia como emprendedor, ofreciendo soluciones digitales accesibles, funcionales y efectivas para pequeños negocios que buscan impulsar su presencia digital. Busco seguir perfeccionando mis conocimientos en nuevas herramientas y enfoques de desarrollo web, integrando en mi trabajo los valores que guían mi vida, como: esfuerzo, compromiso, aprendizaje continuo y por último, equilibrio profesional y personal. Mi meta es crecer profesionalmente mientras contribuyo a que otros emprendedores lleven sus proyectos al entorno digital, incluyendo aquellos que aún no han aprovechado las oportunidades digitales para fortalecer sus negocios, integrando mi conocimiento técnico, siempre con empatía y la comprensión real con respecto a las necesidades del comercio.
¿Cómo espero aplicar mi propósito profesional en el desarrollo del proyecto?
Aplicaré mi propósito profesional en el desarrollo del proyecto mediante la creación de una plataforma e-commerce autoadministrable para la Botillería Hervé, la cual representará una solución real, útil y escalable. Mi experiencia en el rubro comercial, me permitirá poder entender las necesidades concretas de los emprendedores, por lo que me enfocaré en el desarrollo del sitio web, poniendo especial atención en su usabilidad, accesibilidad, funcionalidad y estética, asegurando una experiencia de usuario intuitiva y coherente con la identidad de la marca. En relación a la decisión de diseño su desarrollo, este buscará reflejar el valor del negocio, facilitando su gestión interna y generando un impacto positivo, tanto para los clientes como para sus usuarios.
¿Cómo espero que esto contribuya a mi crecimiento profesional en el área?
En relación a mi crecimiento profesional en el área, esto sin duda contribuiría de manera positiva, puesto que, el proyecto representa una oportunidad clave para consolidar mis competencias técnicas y fortalecer mi perfil profesional en el ámbito del desarrollo web y además, me permitiría poder vincular lo aprendido en la carrera con la práctica, ampliando así mi portafolio y creando los fundamentos necesarios para ofrecer servicios digitales más amplios. Lo antes mencionado, además, potenciará mi capacidad para acompañar a otros emprendedores en su transformación digital, inspirándolos a mejorar sus negocios, tal como yo he buscado mejorar mi vida y la de mi familia mediante el esfuerzo y la perseverancia. En definitiva, este proyecto no solo me ayudaría a reforzar mi desarrollo académico y profesional, sino también mi propósito personal: crecer, construir y aportar valor con lo que amo hacer.
Experiencia 1 - Semana 2
Proyectos de servicios web
Armando una propuesta de valor
Mapa de valor
El mapa de valor permite analizar las necesidades de los clientes y alinearlas con los productos y servicios que se ofrecen. Su objetivo es lograr el encaje entre lo que la empresa propone y lo que el cliente realmente busca, identificando cómo se generan alegrías y se alivian frustraciones. Esta herramienta ayuda a comprender mejor al público objetivo, diseñar soluciones efectivas y comunicar la propuesta de valor de forma clara y convincente.
Matriz de Riesgo Calculado
Desarrollo y aplicación
La matriz de riesgo calculado es una herramienta para comprender, analizar y gestionar los riesgos de un proyecto. Su desarrollo comienza con la identificación y clasificación de los riesgos, permitiendo reconocer los eventos que podrían afectar los resultados. Luego se evalúan los criterios principales de la matriz, la probabilidad de ocurrencia y la consecuencia o impacto de cada riesgo. Con esto, se calcula el nivel de riesgo, facilitando la toma de decisiones informada. Así, la matriz se convierte en una herramienta visual y analítica que promueve la planificación preventiva, ayudando a reducir los impactos negativos y asegurar el éxito del proyecto. Descargar Excel
Creando un pitch utilizando la metodología:
Need (Necesidad):
Hoy, muchas pequeñas y medianas empresas enfrentan el desafío de adaptarse al entorno digital.
Carecen de plataformas web autoadministrables, estrategias de venta online o presencia digital efectiva. Esto dificulta su crecimiento, la gestión de sus productos o servicios, y su conexión con los clientes.
Mi labor como diseñador y desarrollador web consiste en identificar esas necesidades reales y transformarlas en oportunidades digitales, creando soluciones que impulsen la visibilidad, la eficiencia y las ventas de cada negocio.
Approach (Enfoque):
Mi enfoque combina diseño centrado en el usuario (UX/UI), funcionalidad adaptable y autonomía para el cliente.
Desarrollo sitios web modernos y autoadministrables, utilizando tecnologías confiables como WordPress, PHP, Bootstrap y jQuery, integrando herramientas que permiten gestionar contenidos, productos, pedidos y pagos en línea de manera fácil y segura.
Además, incorporo principios de accesibilidad web (WCAG/ARIA) para que los sitios sean inclusivos y estén optimizados para cualquier dispositivo.
Mi acompañamiento incluye capacitación personalizada, asegurando que cada cliente pueda mantener su plataforma sin depender de terceros.
Benefit (Beneficio):
Mis soluciones ofrecen valor real y sostenible:
Sitios web modernos, rápidos y adaptados a la identidad del negocio.
Gestión simple y autoadministrable de contenidos, productos y precios.
Aumento de visibilidad y ventas mediante experiencias digitales más efectivas.
Optimización del tiempo y reducción de costos operativos.
Soporte técnico y asesoría continua para fortalecer el crecimiento digital del cliente.
En definitiva, mis proyectos ayudan a profesionalizar la presencia online, fortalecer la relación con los usuarios y posicionar marcas locales en el entorno digital.
Competition (Competencia):
En el mercado digital actual existen múltiples soluciones genéricas, pero muchas no ofrecen acompañamiento, personalización ni enfoque humano.
Mi propuesta se diferencia porque:
Cada sitio está diseñado a medida, alineado con la identidad y objetivos del cliente.
Integro experiencia de usuario, accesibilidad y diseño funcional.
Ofrezco capacitación post-desarrollo, garantizando independencia total.
Mantengo un enfoque humano y colaborativo, comprendiendo las necesidades reales de emprendedores y pequeñas empresas.
Esta combinación de tecnología, empatía y diseño estratégico me permite crear sitios web con propósito, enfocados en generar resultados y aportar valor duradero a cada proyecto.
Comunicando mi propuesta de valor
Experiencia 2 - Semana 3
Proyectos de servicios web
Definiendo los usuarios y contenidos del proyecto
Brief
El brief es el documento base del proyecto, elaborado junto al cliente tras la primera reunión. En él se definen los objetivos, alcances, requerimientos y expectativas que guiarán todo el proceso de diseño y desarrollo. Integra la información clave obtenida durante la investigación inicial, sirviendo como hoja de ruta para alinear la visión del cliente con las necesidades del usuario y garantizar la coherencia del proyecto desde su inicio.
Es un entorno altamente demandante y competitivo en el que es importante poder desarrollar un proyecto digital atractivo, funcional, intuitivo y que permita adaptarse a diferentes dispositivos, puesto que se utilizan más los aparatos mobiles, con usuarios que demandan las últimas tendencias en el diseño web, valorando el uso de tecnologias avanzadas que permitan el cumplimiento de una buena experiencia de usuario, en un entorno donde las soluciones digitales son fundamental para el buen desarrollo y la competencia en el mercado.
Investigación y recopilación de información del cliente.Definición del objetivo principal y del público objetivo. Análisis competitivo, entrevistas y encuestas.Definir los hitos Establecimiento del presupuesto, alcances y plazos de entrega.Planificación de reuniones con el cliente para la retroalimentación y revisión del proyecto.Botillería Hervé es una empresa local dedicada a la venta de bebidas alcohólicas. Actualmente gestiona sus productos mediante Excel y busca modernizar su canal digital a través de una plataforma e-commerce autoadministrable. El proyecto permitirá a la empresa aumentar ventas, facilitar la autogestión de precios y mejorar la experiencia de compra de los clientes locales.
Misión: Ofrecer a nuestros clientes una experiencia de compra ágil, segura y cercana, brindando productos de calidad con un servicio confiable y accesible desde cualquier dispositivo.
Visión: Ser la botillería líder en ventas digitales a nivel local, reconocida por su innovación, rapidez en las entregas y compromiso con la satisfacción de sus clientes.
Desarrollar e implementar una plataforma e-commerce autoadministrable para Botillería Hervé que modernice su canal de ventas digitales, mejore la experiencia de compra de los clientes locales y optimice la gestión interna de productos, precios y stock, cumpliendo con los principios de accesibilidad, seguridad y eficiencia antes del plazo establecido.
Desarrollo completo del sitio web (frontend y backend).Integración de carrito de compras, checkout y gestión de usuarios.Creación de panel administrativo para la autogestión de productos y pedidos.No incluye campañas de marketing ni producción fotográfica profesional.El público objetivo está compuesto por clientes locales y recurrentes, principalmente hombres y mujeres entre 25 y 55 años, que valoran la comodidad, rapidez y confianza en sus compras online. Este segmento busca un proceso de compra fácil, con entrega a domicilio y precios actualizados.
Enfoque basado en diseño centrado en el usuario, con desarrollo iterativo dividido en etapas:
Estrategia: Investigación y definición de objetivos.Arquitectura de la información.Diseño UX/UI.Desarrollo frontend.Testeo, optimización y capacitación.| Hitos | Etapa |
|---|---|
|
nº 1 |
Comprendiendo mi valor en el proyecto En esta etapa se desarrollaron herramientas de autoconocimiento y análisis como el Ikigai, el Mapa de Contexto, los Objetivos SMART y el Propósito Profesional, que permitieron comprender mi valor, motivaciones y metas dentro del proyecto. |
|
nº 2 |
Armando una propuesta de valor Durante esta etapa se desarrollaron herramientas estratégicas como el Mapa de Valor, la Matriz de Riesgo Calculado y la metodología NABC. Además, se elaboró la presentación para comunicar de forma efectiva mi propuesta y valor en el proyecto. |
|
nº 3 |
Definiendo los usuarios y contenido del proyecto En esta etapa se elaboró el Brief, se identificaron los usuarios del proyecto, se realizó un Benchmark de la competencia y se desarrolló un inventario de contenidos, sentando las bases para la planificación del sitio web. |
|
nº 4 |
Definiendo la estructura y diseño del proyecto En esta etapa se realizaron ejercicios de Card Sorting, se desarrolló el mapa del sitio, los wireframes y el diseño de la interfaz. Estas acciones permitieron definir la arquitectura de información, la navegación y la apariencia visual del sitio web. |
|
nº 5 |
|
|
nº 6 |
|
|
nº 7 |
|
|
nº 8 |
|
|
nº 9 |
El proyecto será desarrollado por un profesional independiente con experiencia en diseño UX/UI y desarrollo web. Esto permite un enfoque integral que combina la estética, la usabilidad y la funcionalidad técnica en cada etapa del proceso, asegurando un resultado coherente, accesible y alineado con los objetivos del cliente.
| Concepto | Descripción | Costo Unitario (CLP) | Total (CLP) |
|---|---|---|---|
| Honorarios Profesionales | Servicios de diseño, desarrollo e implementación del proyecto | - | $1.130.000 |
| Subtotal Honorarios | $1.130.000 | ||
| Gastos Directos | Hosting anual del proyecto | - | $120.000 |
| Dominio .cl por 1 año | - | $9.990 | |
| Subtotal Gastos Directos | $129.990 | ||
| Total Proyecto (Neto) | $1.259.990 | ||
| IVA (19%) | $239.398 | ||
| TOTAL PROYECTO CON IVA | $1.499.388 | ||
| Hitos | Semana | Fecha | Descripcion |
|---|---|---|---|
|
Hito n.º 0 |
Semana 0 |
20-10-2025 |
Inicio del proyecto. |
|
Hito n.º 1 |
Semana 1 |
27-10-2025 |
Comprendiendo mi valor en el proyecto. Se aplican herramientas como Ikigai, mapa de contexto y objetivos SMART. |
|
Hito n.º 2 |
Semana 2 |
03-11-2025 |
Armando una propuesta de valor. Desarrollo de mapa de valor, matriz de riesgos y metodología NABC. Presentación de propuesta al cliente. |
|
Hito n.º 3 |
Semana 3 |
10-11-2025 |
Definiendo los usuarios y contenido del proyecto. Se crean los perfiles de usuario, el brief, el inventario de contenidos y el benchmark. |
|
Hito n.º 4 |
Semana 4 |
17-11-2025 |
Definiendo la estructura y diseño del proyecto. Elaboración del card sorting, mapa del sitio, wireframes y diseño de la interfaz en Figma. |
|
Hito n.º 5 |
Semana 5 |
24-11-2025 |
|
|
Hito n.º 6 |
Semana 6 |
01-12-2025 |
|
|
Hito n.º 7 |
Semana 7 |
08-12-2025 |
|
|
Hito n.º 8 |
Semana 8 |
15-12-2025 |
|
|
Hito n.º 9 |
Semana 9 |
21-12-2025 |
. |
Los requerimientos del proyecto se establecieron en base a las necesidades detectadas durante la investigación con el cliente y se encuentran detallados en el Brief del proyecto “Botillería Hervé”. Dichos requerimientos abarcan aspectos de negocio, usuario, funcionales, de calidad e implementación, y fueron definidos para garantizar que la solución digital responda efectivamente a los objetivos del cliente: aumentar las ventas online, mejorar la autogestión del sitio y fortalecer su presencia digital.
Galeria de arquetipo de usuarios
El arquetipo de usuario es un perfil detallado que se elabora con la finalidad de profundizar en la perspectiva del usuario y así diseñar soluciones digitales que se ajusten de manera efectiva a sus necesidades, expectativas y comportamientos.
Galería de mapa de empatía
El mapa de empatía es una herramienta que permite obtener una perspectiva completa del usuario, la cual facilita la identificación y organización de sus pensamientos, emociones, percepciones, comportamientos y necesidades. Su objetivo es comprender de manera profunda al usuario, logrando así diseñar soluciones enfocadas en sus experiencias y expectativas.
Benchmark
El Benchmark es una herramienta que nos permite entender el contexto en el que se desarrolla nuestro proyecto. Antes de crear o diseñar, es clave “mirar hacia el lado”, es decir, observar qué hacen otros en el mismo ámbito. Esto nos da una perspectiva del entorno, nos ayuda a posicionarnos dentro de él y a establecer un punto de referencia desde el cual tomar decisiones estratégicas durante todo el proceso de diseño.
| Botilleria | Usabilidad | Puntos Fuertes | Puntos Débiles |
|---|---|---|---|
| delara.cl | La navegación es clara y el menú accesible. | Diseño limpio, botones visibles y consistentes. |
Falta guía de ayuda o tutorial para nuevos usuarios. |
| lakoka.cl | El Botilleria es intuitivo pero algunas secciones requieren scroll excesivo. | Filtros de búsqueda claros y productos destacados. |
Los botones de acción no siempre contrastan con el fondo. |
| housebar.cl | Navegación sencilla y rápida. | Menú superior fijo y accesible. |
Algunas imágenes tardan en cargar, afectando la fluidez. |
| liquidos.cl | El Botilleria requiere varios clics para llegar a productos específicos. | Información de contacto visible y clara. |
La jerarquía de información es confusa en la página principal. |
| Botilleria | Navegación | Puntos Fuertes | Puntos Débiles |
|---|---|---|---|
| delara.cl | Menú principal visible y claro. | Breadcrumbs en todas las secciones, buen contraste. |
Algunas subcategorías no son evidentes. |
| lakoka.cl | Barra superior funcional pero sobrecargada. | Filtros fáciles de usar y jerarquía clara en productos. |
Ventanas emergentes que dificultan la navegación |
| housebar.cl | Menú lateral y superior consistente. | Acceso rápido a categorías y promociones. |
Algunos enlaces no llevan a la sección correcta. |
| liquidos.cl | Menú simple, pero falta orden lógico de secciones. | Secciones principales visibles al primer vistazo. |
Submenús poco claros y largos. |
| Botilleria | Accesibilidad | Puntos Fuertes | Puntos Débiles |
|---|---|---|---|
| delara.cl | Compatible con teclado, algunos elementos faltan etiquetas ARIA. | Contraste adecuado de colores y tamaño de letra ajustable. |
Sin opción de lectura de pantalla para imágenes importantes. |
| lakoka.cl | Pocas opciones de accesibilidad. | Textos claros y botones visibles. |
No hay subtítulos en videos ni descripciones alternativas completas. |
| housebar.cl | Compatible con dispositivos móviles. | Formulario accesible y botones visibles. |
Falta de contraste en icono de compras. |
| liquidos.cl | Accesibilidad limitada. | Menú simple y visible. |
No soporta lectura por screen reader, colores poco contrastados. |
| Botilleria | Contenido | Puntos Fuertes | Puntos Débiles |
|---|---|---|---|
| delara.cl | Información clara y detallada de productos. | Imágenes descriptivas, fichas completas. |
Falta contenido multimedia para algunos productos. |
| lakoka.cl | Contenido relevante, actualizado con promociones. | Descripción detallada de menús y bebidas. |
Algunas secciones duplicadas, confusión para el usuario. |
| housebar.cl | Contenido limitado, pero preciso. | Fotos de productos de buena calidad. |
Faltan descripciones nutricionales o detalles extras. |
| liquidos.cl | Contenido básico, sin información adicional. | Productos bien categorizados. |
Falta contenido multimedia y descripciones completas. |
| Botilleria | Experiencia de usuario | Puntos Fuertes | Puntos Débiles |
|---|---|---|---|
| delara.cl | Experiencia fluida, tiempos de carga aceptables. | Diseño consistente, botones claros, animaciones suaves. |
Falta personalización de navegación según usuario. |
| lakoka.cl | UX clara, pero algunas animaciones distraen. | Acceso rápido a categorías, búsqueda efectiva. |
Algunas páginas tardan en cargar. |
| housebar.cl | UX sencilla y eficiente. | Menú y botones intuitivos. |
Poca retroalimentación visual al añadir productos al carrito. |
| liquidos.cl | UX limitada por estructura confusa. | Secciones principales visibles. |
Falta de guía visual o indicadores de progreso. |
| Botilleria | Desapacho a domicilio | Puntos Fuertes | Puntos Débiles |
|---|---|---|---|
| delara.cl | Ofrece despacho rápido y seguimiento en línea. | Tiempo estimado visible, notificaciones por correo. |
Sin opción de seleccionar horario de entrega exacto. |
| lakoka.cl | Despacho confiable, pero solo a ciertas zonas. | Actualización en tiempo real del estado del pedido. |
Limitaciones geográficas, no permite cambiar dirección después de enviar pedido. |
| housebar.cl | Despacho integrado con empresa externa. | Enlace directo a app de delivery. |
No se visualiza tiempo estimado dentro del Botilleria. |
| liquidos.cl | Despacho disponible solo en ciertas zonas urbanas. | Confirmación de pedido enviada al correo. |
Falta de seguimiento en tiempo real. |
| Botilleria | Proceso de compra | Puntos Fuertes | Puntos Débiles |
|---|---|---|---|
| delara.cl | Proceso de compra sencillo y claro. | Confirmación de pedido y carrito visible en todo momento. |
Falta compra como invitado. |
| lakoka.cl | Proceso eficiente, rápido y sin distracciones. | Carrito visible, pasos claros y rápidos. |
El numero no actualiza bien al momento de realizar compras |
| housebar.cl | Proceso sencillo, integración con app externa de delivery. | Confirmaciones rápidas. |
Poca retroalimentación visual dentro del Botilleria. |
| liquidos.cl | Proceso de compra limitado y poco claro. | Carrito funcional. |
Varias pantallas para completar compra, poco intuitivo. |
| Botilleria | Método de pago | Puntos Fuertes | Puntos Débiles |
|---|---|---|---|
| delara.cl | Permite tarjeta de crédito, débito y pago en efectivo. | Confirmación inmediata de pago. |
No ofrece pago con billeteras digitales. |
| lakoka.cl | Tarjeta de crédito y pago online disponibles. | Integración con Webpay y transferencias bancarias. |
No todos los métodos de pago aparecen en móvil. |
| housebar.cl | Pago vía app externa o tarjeta. | Seguro y confiable. |
No hay pago en efectivo ni métodos alternativos. |
| liquidos.cl | Poca variedad de métodos de pago. | Tarjeta principal aceptada. |
No acepta transferencias ni pagos digitales. |
Inventario de contenidos.
El inventario de contenidos es un documento en el cual se recopilan, clasifican y organizan todos los elementos que conforman un Botilleria web, tales como textos, imágenes, íconos y componentes funcionales. Estos elementos se agrupan por secciones y categorías, lo que facilito su análisis y comprensión de su estructura, además de una correcta jerarquización de la información, lo que permite garantizar una experiencia de usuario optima.
| Elemento | Categoría |
|---|---|
| Logo Botillería Hervé | Imagen |
| Cerveza sin alcohol | Texto |
| Licores | Texto |
| Piscos | Texto |
| Ofertas de pisco | Texto |
| Aguardiente | Texto |
| Aperitivos | Texto |
| Gin | Texto |
| Ron | Texto |
| Sour | Texto |
| Tequila | Texto | Mis favoritos | Texto/icono |
| Vodka | Texto |
| Cerveza | Texto |
| Vinos | Texto |
| Botellones | Texto |
| Vinos 750cc | Texto |
| Merlot | Texto |
| Cabernet Sauvignon | Texto |
| Carmenere | Texto |
| Chardonnay | Texto |
| Tetras | Texto |
| Espumantes | Texto |
| Brut | Texto |
| Demi Sec | Texto |
| Moscato | Texto |
| Rosé | Texto |
| Champaña sin alcohol | Texto |
| Otros | Texto |
| Bebidas | Texto |
| Energéticas | Texto |
| Jugos | Texto |
| Aguas | Texto |
| Snack | Texto |
| sin alcohol | Texto |
| Sobre nosotros | texto |
| Politicas de privacidad | texto |
| Catálogo | Texto |
| carrito | Ícono / Funcional |
| Iniciar sesión | Funcional |
| buscar | Ícono / Funcional |
| Teléfono / WhatsApp | Texto / Contacto |
| Banners con promociones | Imágenes |
| Reseñas y valoración con estrellas | Texto / Ícono |
| Agregar al carrito | Funcional |
| Formulario de compra | Funcional |
| Dirección y horarios | Texto |
| Preguntas frecuentes (FAQ) | Texto |
| Términos y condiciones | Texto |
| Pagar | Funcional |
| Íconos redes sociales: Instagram, Facebook | Ícono / Contacto |
| A+ / A- (accesibilidad tamaño texto) | Accesibilidad / Funcional |
| Descripción de productos | Texto |
| Precio de productos | Texto |
| Seguimiento del pedido | Funcional |
Experiencia 2 - Semana 4
Proyectos de servicios web
Definiendo la estructura y el diseño del proyecto
Galeria de imagenes cardsorting
El Card Sorting es una técnica de investigación utilizada para comprender la manera en que los usuarios organizan la información. En esta ocasión se realizó un Card sorting cerrado, con un enfoque cualitativo, aplicado a una muestra por conveniencia. Se solicitó a los participantes agrupar tarjetas con diferentes contenidos según categorías predefinidas. Lo anterior permitió poder crear, diseñar y mejorar la estructura de navegación, haciéndola intuitiva, fácil de navegar y finalmente permitiéndonos comprender el modelo mental de los usuarios y como estos clasifican esta información.
Mapa de navegación
El mapa de navegación es un esquema que muestra cómo están organizados los contenidos del sitio web, permitiendo comprender su jerarquía y las relaciones entre sus elementos. A través de este mapa, es posible lograr que los usuarios encuentren la información de manera sencilla, favoreciendo una navegación lógica, intuitiva y eficiente. De este modo, se mejora la usabilidad del sitio web y se anticipan posibles problemas en la estructura de la información.
Wireframe digital de baja fidelidad
Es una representación gráfica que define la estructura y jerarquía de los elementos, mostrando cómo se adapta una interfaz digital a distintos tamaños de pantalla: para desktop, desde 992px en adelante; para tablet, desde 768px hasta 991px; y para mobile, desde 0px hasta 767px.
Desktop: Inicio
Tablet: Inicio
Mobil: Inicio
Desktop: Detalle
Tablet: Detalle
Mobil: Detalle
Desktop: Carrito
Tablet: Carrito
Mobil: Carrito
Guia de estilos
Es una herramienta que establece y detalla las directrices y reglas necesarias para diseñar la interfaz de usuario, definiendo criterios de color, tipografía, iconografía y otros componentes visuales. Su objetivo es asegurar que el sitio web sea coherente, accesible y fácil de usar, facilitando el desarrollo de una plataforma funcional y consistente en todos los dispositivos.
Tipografías que compondrán y definirán la identidad visual del diseño del sitio web.
Pesos tipografícos Para asegurar una lectura clara, se estableció una jerarquía tipográfica basada en tamaños y pesos.
La paleta de colores organiza y jerarquiza los elementos del sitio web según su función, fortaleciendo su identidad visual.
Iconografía Elementos gráficos que guían la navegación y comunican acciones de forma visual.
Wireframe digital de alta fidelidad
Es una representación visual detallada y realista del diseño de interfaz de usuario, que permite poder ver la estructura, la jerarquía y la disposición de los elementos que tendrá nuestro sitio web. En este esquema, podemos ver modelos más completos que incluyen colores, imágenes, tipografía, iconos y gráficos, que permiten finalmente visualizar como se verá el diseño de interfaz del sitio, pudiendo adaptarse a los diferentes tipos de pantalla y dispositivos, para desktop, desde 992px en adelante; para tablet, desde 768px hasta 991px; y para mobile, desde 0px hasta 767px.
Desktop: Inicio
Tablet: Inicio
Mobil: Inicio
Desktop: detalle
Tablet: detalle
Mobil: detalle
Desktop: Carrito
Tablet: Carrito
Mobil: Carrito
Experiencia 3 - Semana 5
Proyectos de servicios web
Maqueteando el sitio del proyecto
Maqueteando el sitio del proyecto
La maquetación es el proceso de estructurar y dar formato a una página web o aplicación, utilizando lenguajes como HTML, CSS y JavaScript. Consiste en transformar un diseño visual, ya sea un Wireframe o un prototipo, en una estructura funcional y navegable, organizando elementos visuales tales como menús, botones y otros componentes. Este proceso se enfoca en la usabilidad, la accesibilidad y en ofrecer una buena experiencia al usuario.
Experiencia 3 - Semana 6
Proyecto de servicios web
Desarrollando un CMS dinámico
En esta etapa del desarrollo web se transformó el sitio estático en un CMS dinámico utilizando WordPress, integrando MySQL a través de XAMPP, con Apache como servidor y phpMyAdmin para la gestión de la base de datos. El objetivo fue crear un sitio administrable que permita gestionar productos, categorías, usuarios y contenidos desde el panel administrativo, realizando operaciones CRUD (crear, leer, actualizar y eliminar). Se aplicaron conceptos de programación dinámica, incluyendo variables, funciones y matrices, y se definieron las zonas pública y privada del sitio, asegurando que la información se muestre correctamente al usuario final mientras los administradores gestionan los contenidos de manera segura y organizada, siguiendo principios de usabilidad y accesibilidad.
XAMPP
phpMyAdmin
Apache Localhost
CMS Wordpress
Experiencia 3 - Semana 7
Proyecto de servicios web
Continuando con la creacion del sitio
Galeria administrando un CMS
El área privada del sitio se construye utilizando el sistema nativo de administración de WordPress, que ya proporciona login seguro, manejo de sesiones, roles de usuario y protección contra acceso no autorizado. Gracias a su panel interno, es posible gestionar contenido mediante funciones CRUD sin programarlas desde cero, permitiendo crear, editar, eliminar y visualizar productos, noticias y usuarios. WordPress también integra medidas de seguridad como sanitización de datos y consultas preparadas, lo que protege contra inyecciones SQL y accesos indebidos. De este modo, el administrador puede gestionar el contenido del sitio de forma eficiente y segura, reflejándose los cambios en el área pública.
Experiencia 3- Semana 8
Proyecto de servicios web
Finalizando el proyecto
Mejorando interacciones del CMS
El proceso de incorporación de interacciones en un proyecto de diseño web consiste en implementar funcionalidades dinámicas por medio de JavaScript, con el propósito de optimizar la experiencia del usuario y facilitar la gestión de contenidos en el CMS. Mediante la manipulación del DOM, es posible modificar elementos HTML en tiempo real, lo que permite realizar validaciones de formularios, mostrar u ocultar secciones y personalizar la interfaz de usuario. Estas mejoras hacen que el sitio web sea más accesible, intuitivo y adaptable a diversas necesidades, garantizando una experiencia de navegación eficiente y satisfactoria.
Diseño interactivo del sitio web: Sabores de Europa
https://saboresdeeuropa.cl/Bibliografia
Duoc Laboral. (2021, 5 de febrero). Cómo encontrar el trabajo de tus sueños con el método ‘Ikigai’.
https://duoclaboral.cl/noticias/como-encontrar-el-trabajo-de-tus-suenos-con-el-metodo-ikigai/876
Design Thinking España. (s. f.). Lienzo de propuesta de valor.
https://xn--designthinkingespaa-d4b.com/lienzo-de-propuesta-de-valor
Asana. (2025, 25 de febrero). Matriz de riesgos: cómo evaluar los riesgos para lograr el éxito del proyecto (incluye ejemplos y plantilla GRATIS).
https://asana.com/es/resources/risk-matrix-templateAlimentación
Pre.
| Comida / Día | Día 1 | Día 2 | Día 3 |
|---|---|---|---|
| Desayuno | Jalea sin azucar + té con endulzante | Chuño al agua con endulzante. | Maicena al agua con endulzante |
| Almuerzo | Caldo colado (pollo zanahoria, acelga y papa). | Caldo colado (pavo zapallo, arroz, poroto verde). | Caldo colado (merluza, papa, zanahoria, espinaca). |
| Once | 1 taza de leche descremada + jalea sin azucar | Flan al agua + agua de manzanilla con endulzante. | Te con endulzante + jalea sin azucar. |
| Cena | Caldo colado (pollo zanahoria, acelga y papa). | Caldo colado (pavo zapallo, arroz, poroto verde). | Caldo colado (merluza, papa, zanahoria, espinaca). |
| Colación | Flan al agua sin azucar | Jalea sin azucar | Leche descremada |
Mes uno.
| Comida | Dia 1 | Dia 2 | Dia 3 | Dia 4 | Dia 5 | Dia 6 | Dia 7 |
|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Comida | Dia 1 | Dia 2 | Dia 3 | Dia 4 | Dia 5 | Dia 6 | Dia 7 |
|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Mes dos.
| Comida | Carbohidrato (escoger sólo 1 opción): | Bebestible (escoger sólo 1 opción): | Agregado pan | Ejemplos | Colación o postre para el almuerzo |
|---|---|---|---|---|---|
|
|
|
|
|
|
| Comida | Proteina | Ensaladas | Ejemplos | Observaciones |
|---|---|---|---|---|
|
|
|
|
|
Mes tres.
| Comida | Carbohidrato (escoger sólo 1 opción): | Bebestible (escoger sólo 1 opción): | Agregado pan | Ejemplos | Colación o postre para el almuerzo |
|---|---|---|---|---|---|
|
|
|
|
|
|
| Comida | Carbohidrato (escoger sólo 1 opción): | Proteina | Ensaladas | Ejemplos | Observaciones |
|---|---|---|---|---|---|
|
|
|
|
|
|
Mes cuatro.
| Comida | Carbohidrato (escoger sólo 1 opción): | Bebestible (escoger sólo 1 opción): | Agregado pan | Ejemplos | Colación o postre para el almuerzo |
|---|---|---|---|---|---|
|
|
|
|
|
|
| Comida | Carbohidrato (escoger sólo 1 opción): | Proteina | Ensaladas y postres | Ejemplos | Observaciones |
|---|---|---|---|---|---|
|
|
|
|
|
|