GourmetGo

Integrantes:

Mauricio Saul Suárez Vargas

López Can Juan Carlos

Alpuche Bojórquez Víctor Manuel

Fernando Gomez Toledo

Alvarado Díaz Luis Omar

Dilan Gabriel Och Montero

1. Análisis del Usuario

Objetivo: Diseñar y desarrollar una página web accesible y funcional para

pequeños negocios de comida, como restaurantes y locales de venta de alimentos,
que permita optimizar su gestión de pedidos, por mesa. La plataforma facilitará a
los dueños de estos negocios la actualización del menú, la promoción de ofertas y el
manejo de pedidos en línea, proporcionando una experiencia de usuario intuitiva
que minimice las barreras tecnológicas y maximice la eficiencia en su operación
diaria.

a) Definir el Público Objetivo

● Personas: Está dirigido principalmente a dueños o encargados de pequeños

negocios de comida, como restaurantes familiares y cafeterías. Considera
características como:
○ Edad: 25-60 años (personas que gestionan pequeños negocios).
○ Nivel de conocimiento tecnológico: Varía de bajo a medio, algunos
usuarios pueden no estar familiarizados con herramientas digitales
avanzadas.
○ Necesidades: Tener visibilidad en internet, manejar pedidos en línea, o
contar con un menú digital.

b) Investigación del Usuario

● Entrevistas:
○ Se realizaron entrevistas para comprender mejor sus necesidades
específicas. Las siguientes preguntas fueron:
■ ¿Qué características les gustaría tener en su página web (por
ejemplo, menú en línea, sistema de reservas, pedidos en
línea)?
■ ¿Cuáles son sus mayores desafíos al usar tecnología para sus
negocios?
■ ¿Cuáles son sus expectativas en cuanto a la funcionalidad y
apariencia de la página?
■ ¿Qué tipo de información les gustaría que sus clientes vean
primero (por ejemplo, ofertas, menú )?
○ Frustraciones: Con esto se identificó que las frustraciones son el
tiempo que tarda en actualizar su menú, falta de tiempo para gestionar
redes sociales, o problemas con el diseño visual y fallas en la recarga
de la página.
c) Identificación de Necesidades

● Con base en la investigación, definimos áreas de mejora como:

○ Gestión de Pedidos: Automatizar pedidos y reservas para reducir
carga de trabajo.
○ Actualización de Menús: Hacer más fácil y rápido cambiar precios,
fotos o descripciones de platillos.
○ Opciones de Marketing: Integrar herramientas para promociones o
anuncios de ofertas.

2. Análisis de la Competencia

Objetivo: Investigar productos similares en el mercado para identificar

oportunidades de mejora en UX y brindar una mejor experiencia a nuestros usuarios
de negocios, de los cuales elegimos, para esta investigación y nos enfocamos en
estas dos empresas del mercado similares a nuestra plataforma, Square Online
para Restaurantes y Gloria Food.

a) Investigación de Competidores

Análisis FODA (Fortalezas, Oportunidades, Debilidades y Amenazas)

Elemento Descripción

Fortalezas

Square Online Facilidad para configurar el sitio web

sin necesidad de conocimientos
técnicos, herramientas de gestión de
pedidos integradas y opción de pago
seguro.
GloriaFood Plataforma gratuita con interfaz
amigable y personalización básica para
gestión de menús y pedidos en tiempo
real.

Oportunidades

Mercado Alta demanda en la digitalización de

pequeños negocios de comida que
necesitan mayor visibilidad y opciones
de gestión simplificadas.
Personalización Ofrecer más opciones de
personalización en diseño, promociones
locales y funciones específicas para
cada negocio.

Soporte Ofrecer soporte sencillo y accesible, ya

que muchas plataformas no tienen una
guía clara para los usuarios sin
experiencia técnica.

Debilidades

Square Online Costos elevados a largo plazo por

transacciones y limitaciones en
personalización avanzada para
adaptarse a la identidad de marca del
negocio.

GloriaFood Ausencia de herramientas avanzadas

de marketing y personalización del
menú limitada a opciones básicas.

Amenazas

Competencia Plataformas grandes como UberEats o

Rappi que ofrecen alta visibilidad,
aunque con comisiones considerables
para los negocios pequeños.

Saturación Aumento de competencia en

plataformas de pedidos en línea y
reservas enfocadas en pequeños
negocios de comida.

Brief Publicitario: GourmetGo

1. Datos de la Empresa

● Nombre de la Empresa: GourmetGo

● Industria: Tecnología y servicios para la hostelería (plataforma web para
pequeños negocios de comida)
● Descripción del Producto: GourmetGo es una solución digital accesible y
personalizable para ayudar a pequeños restaurantes y locales de venta de
comida a tener presencia en línea. Ofrece un sitio web personalizable para
pedidos en línea, menú digital y opciones de recogida o entrega a bajo costo.
2. Plan de Mercadotecnia

● Objetivo: Facilitar la digitalización de pequeños negocios de comida,

proporcionando una plataforma accesible para gestionar pedidos en línea y
aumentar su visibilidad y ventas.
● Estrategia:
○ Enfocarse en la simplicidad de uso y bajo costo en comparación con
otras plataformas.
○ Apelar a las necesidades de dueños de negocios que buscan
digitalizar sus servicios sin comisiones elevadas.
○ Diferenciarse mediante un soporte accesible y una personalización del
sitio que se adapte a la identidad de cada negocio.

3. Audiencia Meta

● Perfil del Cliente: Pequeños dueños de negocios de comida, como

restaurantes locales y vendedores de comida rápida.
● Público Objetivo: Personas de entre 25 y 55 años que operan pequeños
locales de comida, y que desean adaptarse al entorno digital sin necesidad
de grandes inversiones.

4. Restricciones de Comunicación

● Lo que se debe mencionar:

○ Facilidad de uso y accesibilidad para pequeños negocios de comida.
○ Beneficio de personalización y sin tarifas elevadas por transacción.
○ Posibilidades de atraer más clientes mediante pedidos en línea y
servicios de entrega/recogida.
● Lo que NO se debe mencionar:
○ Comparaciones directas con grandes plataformas de delivery como
UberEats o Rappi.
○ Limitaciones técnicas específicas del producto (por ejemplo, funciones
avanzadas de marketing).

5. Resultados Esperados

● Objetivos Medibles:
○ Aumentar la visibilidad de la marca GourmetGo en un 20% en el
primer año.
 ○ Atraer al menos 1,000 nuevos pequeños negocios de comida a la
plataforma en los primeros 12 meses.
○ Incrementar la satisfacción del cliente con un índice de retención de
usuarios de un 75% en el primer año.

Información Detallada del Mercado

1. Clientes
○ Pequeños negocios de comida que buscan digitalizarse y ampliar su
clientela mediante opciones de pedidos en línea.
2. Competencia
○ Square Online para Restaurantes, GloriaFood (como soluciones de
bajo costo y accesibles para pedidos en línea).
3. Posición Actual
○ Nueva entrada en el mercado con enfoque en simplicidad,
accesibilidad y personalización.
4. Posición Deseada
○ Ser la opción preferida de digitalización y gestión de pedidos en línea
para pequeños restaurantes y locales de comida.

Lineamientos Creativos

1. Tono de la Campaña:
○ Cercano y accesible, enfatizando la simplicidad y la capacidad de
apoyo a pequeños emprendedores. Inspirador y de confianza.
2. Colores Sugeridos:
○ Colores cálidos como naranja y rojo para evocar cercanía y
entusiasmo, con tonos neutros para mantener una sensación de
profesionalismo.
3. Imagen del Producto en la Publicidad:
○ Sí, se quiere mostrar la interfaz amigable y simple del producto en las
piezas publicitarias para que los usuarios se familiaricen visualmente.
4. Personaje o Persona Específica:
○ Opcional, pero se podría incluir la imagen de emprendedores locales
exitosos para conectar emocionalmente con la audiencia.

Presupuesto

● Presupuesto estimado: $10,000 - $20,000 pesos para el primer año,

enfocado en publicidad digital, promociones y diseño visual.
Medios Sugeridos

1. Medios Digitales:
○ Publicidad en redes sociales (Facebook, Instagram, y TikTok) para
segmentar a pequeños emprendedores.
○ Google Ads para atraer tráfico de búsqueda de dueños de pequeños
negocios de comida.
2. Publicidad en Móviles:
○ Anuncios en aplicaciones de productividad y en portales de tecnología
para pequeños negocios.
3. Promociones de Venta:
○ Ofertas promocionales de inscripción gratuita por tiempo limitado.
○ Descuentos para los primeros tres meses de uso de la plataforma para
los primeros usuarios registrados.
4. Eventos y Promociones Especiales:
○ Participación en ferias y eventos de emprendedores locales.
○ Creación de un kit digital gratuito de bienvenida que incluya guías y
plantillas personalizables.
2. Diseño.

Mapa del sitio.

El sitio de GourmetGo comenzará en la página de inicio de sesión, donde los

usuarios podrán identificarse. Por defecto, solo el usuario administrador (admin)
estará habilitado inicialmente. Una vez autenticado, admin será redirigido al
dashboard o panel de control, donde encontrará varias funciones clave: podrá
consultar reportes, gestionar productos del negocio y controlar la configuración de
usuarios. En la sección de control de usuarios, admin podrá añadir, editar o eliminar
cuentas de empleados, asignar roles y gestionar datos específicos.

Los usuarios que no tengan el rol de administrador o no cuenten con permisos para
el dashboard serán redirigidos a la página principal. En esta página, se mostrará un
tablero con las mesas o cuentas activas, permitiendo a los usuarios ver y gestionar
en tiempo real las mesas que están atendiendo, lo que facilitará la coordinación
durante los turnos activos del restaurante.

Frameworks

A continuación se describen los frameworks planeados para el desarrollo de

GourmetGo explicando a detalle la funcionalidad de cada uno con ejemplos
visuales.

1.- Login
Este framework se compone de un formulario par identificarse y acceder al sistema
de acuerdo con las credenciales asignadas por el administrador, el formulario
identifica el rol de cada usuario y al entrar otorga los permisos correspondientes así
como la autorización para ciertas funciones, el admin (dueño del negocio en
general) podrá acceder al dashboard apenas se identifique, el resto de usuarios que
no posean la autorización para acceder a dicho módulo serán redirigidos a la página
principal la cual es la vista de las mesas o las órdenes.

2.-Dashboard
Este framework es exclusivo para el admin o usuarios a quien se les asigne el
permiso, desde aquí el usuario podrá consultar los reportes por periodos de fechas
de sus ventas, gastos, producto más vendido, etc; así mismo podrá imprimir dichos
reportes. Se puede añadir productos desde el dashboard complementando la carta
que ofrece el negocio o en su defecto puede eliminar o editar cada uno de ellos,
como última función es el registro de nuevos usuarios, paso importante para
registrar a los empleados y asignar su rol. Como elemento adicional el admin o
usuarios que se encuentren en el dashboard pueden acceder a la página principal y
operar el resto de funciones que ofrece GourmetGo, en cualquier momento se
puede volver al dashboard siempre y cuando cuente aún con la autorización.
3.-Vista de mesas u órdenes.
Este framework permite a los usuarios gestionar las mesas que tengan en servicio,
así mismo en cada mesa es posible agregar una orden considerando que los
clientes puedan solicitar órdenes separados o volver a pedir después de haber
cerrado la anterior orden, al seleccionar una mesa se podrá visualizar la órdenes
levantas que le pertenecen así como un pequeño desglose de los productos que se
han ido agregando para un mejor control, desde la vista se puede pasar a la vista
para agregar los productos de acuerdo a la mesa y orden seleccionada.

4.- Agregar producto

En este framework el usuario puede agregar el producto que el cliente ordene, esto
después de haber asignado su mesa y la orden a dar servicio, la vista permite
visualizar el menú organizado por sección para facilitar su localización y etiquetar
los productos que se ofrecen, al agregar un producto este se irá presentando en la
pestaña lateral derecha el cual funciona como un desglose de lo que el cliente ha
ido ordenando, esta función le permite al mesero o quien atienda llevar un control en
la cuenta de los clientes, dando la posibilidad de manejar con exactitud los
productos que se vendan evitando la pérdida de recursos o malentendidos con los
clientes. En la misma pestaña lateral derecha se puede redirigir a la pasarela de
pagos de acuerdo a la mesa y orden seleccionada.
5.- Pasarela de pago
Consiste básicamente en una vista para mostrar el desglose detallado de la cuenta
pudiendo encontrar la mesa a la que pertenece, la cuenta seleccionada del cliente y
todos los productos añadidos con sus respectivas descripciones dando la posibilidad
incluso de simplificar la información para solo visualizar los elementos más
importantes como el nombre de los productos y el coste de cada para dar con el
total, después de confirmar la cuenta se procede a pagar seleccionando si el pago
es por efectivo o efectuado con tarjeta de débito o crédito esto con el fin de llevar un
registro al final del medio de pago seleccionado puesto que son datos necesarios
para realizar la factura, como resultado se puede obtener el ticket con el respectivo
voucher en caso de haberse pagado con tarjeta.

6.- Facturación
La vista para la facturación es una vista sencilla que conecta con los servicios
tributarios para facturar al cliente, solo se requiere llenar un formulario y consultar
folio de la orden que suele venir en el ticket, puede hacerse en el momento que el
cliente lo solicite y enviarse por correo, los documentos que son emitidos se van
almacenando para futuras referencias.
Elementos y recursos usados en el diseño creativo.

En el siguiente listado se puede encontrar los recursos aplicados para la creación de

los frameworks y los que serán usados como modelos para el diseño en la parte del
FrontEnd o bien la parte visual de GourmetGo.

Fuentes.

-Fuentes principales.
“Oswald” como fuente para títulos principales de las vistas al ser una
fuente llamativa pero suave a la vista, siempre estará presente en
diversos módulos que tengan una presencia constante, como conjunto
visual se ha usado “Open Sans” para textos principales en donde se
presente la fuente primaria,

-Fuentes secundarias.
Como segundo conjunto de fuentes se ha usado “Bevan” una fuente
de cuerpo grueso que apoya a remarcar títulos interactivos puesto que
su lectura constante puede ser incómoda por el grosor de la letra,
como conjunto se aplicó la fuente “oxygen” una fuente elegante que
apoya a elementos interactivos pero que a la larga resulta cansada de
leer.

Paleta de colores.
La paleta de colores se compone de tonos naranjas, rojos y cafés, dichos tonos
tienden a ser suaves para la vista aprovechando la naturalidad de los tonos cálidos
para que los usuarios sienta comodidad visual, el tono café sirve para remarcar
elementos críticos como pestañas interactivas o títulos prioritarios. El naranja alude
a un servicio de comida como lo son restaurantes, manteniendo un ambiente acorde
al área de trabajo, el uso de tonos rojos permiten al usuario mantenerse en alerta al
ser un color más agresivo pero poco recurrente en las vistas, servirá de apoyo para
remarcar en conjunto con el tono café elementos importantes.
3. Desarrollo

Tecnologías a utilizar.

Frontend: React

React es una biblioteca de JavaScript para construir interfaces de usuario. Permite

crear componentes reutilizables, lo que facilita la organización y la gestión del
estado de la aplicación. Entre las facilidades que podemos aprovechar son:

- Componentización: Permite crear componentes para diferentes

partes del POS, como el menú, la lista de pedidos y la gestión de
usuarios.
- Estado Local y Global: El uso de hooks facilita la programación de
los componentes y permite que la estructura del código sea más limpia
y organizada permitiendo una mejor implementación.
- Ecosistema Rico: React nos permite acceder a múltiples
herramientas e instancias extras que pueden ser usadas para mejorar
el entorno de desarrollo.

Backend: Node.js

Node.js es un entorno de ejecución de JavaScript del lado del servidor. Permite

construir aplicaciones rápidas y escalables utilizando un modelo de I/O no
bloqueante.

- Unificación de Lenguaje: Se podrá utilizar JavaScript tanto en el

frontend como en el backend, lo que simplifica el desarrollo y la
comprensión del código.
- Asincronía: Ideal para manejar múltiples solicitudes de usuario
simultáneamente, crucial en un entorno de POS donde se requieren
respuestas rápidas complementando la resiliencia del sistema o su
respuesta a fallas frente posibles inconvenientes en actualizaciones o
cambios.

Estilos: Tailwind CSS

Tailwind es un framework de CSS que permite un diseño rápido y altamente

personalizable a través de clases utilitarias, el cual se estará implementando para la
parte visual de las funciones y componentes.

- Diseño Rápido: Permite aplicar estilos directamente en los

componentes de React, acelerando el proceso de diseño.
 - Responsividad: Facilita la creación de interfaces responsive y
adaptables para diferentes dispositivos, crucial para un POS que
podría usarse en tabletas o móviles.
- Personalización: Se pueden crear configuraciones personalizadas de
diseño según las necesidades del restaurante.

Entorno de Desarrollo: Visual Studio Code

Visual Studio Code es un editor de código fuente que soporta múltiples lenguajes y
cuenta con una amplia variedad de extensiones.

- Integración de Extensiones: Se pueden instalar extensiones para

soporte de React, Node.js, y Tailwind, mejorando la productividad,
incluso ampliando la posibilidad de implementar nuevas tecnologías
gracias a la disponibilidad que tiene para dicho trabajo.
- Depuración y Terminal Integrado: Facilita la depuración de la
aplicación y la ejecución de comandos en la misma ventana.

Base de Datos: phpMyAdmin

phpMyAdmin es una herramienta de administración para MySQL y MariaDB que

facilita la gestión de bases de datos mediante una interfaz web.

- Interfaz Amigable: Permite gestionar fácilmente la base de datos sin

necesidad de línea de comandos, ahorra la necesidad de controlar
totalmente por comando SQL.
- Gestión Visual: Se puede crear, modificar y eliminar tablas y registros
de manera sencilla.

Hosting: AlwaysData

AlwaysData es un proveedor de hosting que ofrece servicios en la nube y soporte

para aplicaciones PHP, Node.js y bases de datos.

- Despliegue Simplificado: Permite desplegar tu aplicación de manera

sencilla, asegurando que esté disponible en la nube para accesibilidad
desde diferentes dispositivos.
- Escalabilidad: Ofrece planes de hosting escalables, permitiendo que
tu aplicación crezca a medida que aumentan las demandas del
negocio.
4.- Plan de desarrollo

Fase 1: Diseño Responsivo

Actividades:

● Crear wireframes y prototipos utilizando Figma y Adobe XD.

● Implementar un diseño adaptable utilizando CSS.
● Asegurarse de que todos los elementos de la UI se ajusten adecuadamente a
diferentes tamaños de pantalla.

Entregables:

● Prototipos de alta fidelidad.

● Estilos CSS para versiones móviles y de escritorio.

Fase 2: Integración de Base de Datos

Actividades:

● Elegir el tipo de base de datos SQL.

● Crear la estructura de la base de datos y definir las relaciones necesarias.
● Implementar el acceso a la base de datos utilizando un ORM
(Object-Relational Mapping) para facilitar las operaciones CRUD.
● Desarrollar APIs para interactuar con la base de datos.

Entregables:

● Base de datos en funcionamiento.

● Documentación de la API.

Fase 3: Pruebas de Usuario

Actividades:

● Realizar pruebas de usabilidad con usuarios reales para obtener

retroalimentación sobre la experiencia de usuario.
● Ejecutar pruebas funcionales para asegurar que todos los componentes
trabajen correctamente.
● Implementar pruebas unitarias para validar la lógica de la aplicación.

Entregables:

● Informe de pruebas y retroalimentación.

 ● Registro de errores y áreas de mejora.

Fase 4: Ajustes Finales

Actividades:

● Corregir errores y bugs, y realizar mejoras basadas en las pruebas de

usuario.
● Optimizar el rendimiento de la aplicación.
● Documentar el código y la arquitectura de la aplicación para facilitar el
mantenimiento futuro.

Entregables:

● Versión final de la aplicación.

● Documentación técnica y de usuario.

Asegurar Escalabilidad y Mantenimiento

Arquitectura Modular: Diseñar la aplicación en módulos o componentes que se

puedan actualizar o reemplazar de forma independiente.

Código Limpio: Seguir las mejores prácticas de codificación.

Documentación Completa: Mantener documentación actualizada sobre la

arquitectura del sistema, las API y el flujo de trabajo para realizar futuras
actualizaciones y mantenimiento.

Uso de Tecnologías: Utilizar tecnologías y frameworks populares y bien soportados

que faciliten la escalabilidad y el mantenimiento.

Pruebas Automatizadas: Implementar un conjunto de pruebas automatizadas para

asegurar que las nuevas características no rompan la funcionalidad existente y
facilitar la integración de nuevas funcionalidades en el futuro.
INVESTIGACIO hr costo estimado
N Y ANALISIS

Tiempo invertido (120 horas a 120 $ 30,000.00

$250MXN/hora)

Herramientas de investigación $ 500.00

Diseño y Wireframes y prototipos (100 horas a

Prototipado $250MXN/hora)

Licencias de software $ 1,500.00

LOGIN 10 $ 2,500.00

VISTA AGREGAR PRODUCTOS 10 $ 2,500.00

DASHBOARD 20 $ 5,000.00

VISTA DE REGISTRO DE PRODUCTOS 20 $ 5,000.00

PASARELA DE PAGO 30 $ 7,500.00

VISTA MESAS O CUENTAS 10 $ 2,500.00

Desarrollo Horas de trabajo (364 horas a $270

MXN/hora)
 Servidores y servicios en la nube $ 3,000.00

Integración de tecnologías $ 5,000.00

CREACIÓN DB 48 $ 12,960.00

LOGIN 24 $ 6,480.00

VISTA AGREGAR PRODUCTOS 48 $ 12,960.00

DASHBOARD 48 $ 12,960.00

VISTA DE REGISTRO DE PRODUCTOS 48 $ 12,960.00

PASARELA DE PAGO 100 $ 27,000.00

VISTA MESAS O CUENTAS 48 $ 12,960.00

Pruebas y
Optimización

Pruebas de usuario (20 horas a $100 $ 2,000.00

MXN/hora)

Mejoras post-lanzamiento $ 10,000.00

Gastos Fijos y
Variables

LUZ $ 9,000.00

AGUA $ 3,000.00
 INTERNET $ 6,000.00

COMIDA $ 30,000.00

RENTA $ 8,000.00

TRANSPORTE $ 6,000.00

OTROS $ 1,500.00

Costos
Adicionales

Marketing digital $ 1,500.00

Mantenimiento $ 10,000.00

total $ 250,280.00