Proyecto de Pris

UNIVERSIDAD TECNOLÓGICA DE LA
ZONA METROPOLITANA DEL VALLE DE

MÉXICO
DISEÑO DE UNA PÁGINA WEB

INTERACTIVA PARA LA EMPRESA
TOTIS
MEMORIA DE ESTADÍA QUE PRESENTA:

Barrón Segundo Andrea Mishel
PARA OBTENER EL TÍTULO DE:

Técnico Superior Universitario en Tecnologías de la
Información Área Entornos Virtuales y Negocios Digitales
Índice
01 INTRODUCCIÓN
Resumen
02 Planteamiento del Problema
03 Objetivos del Proyecto

Objetivo General
Objetivos Específicos
04 Marco Contextual
05 Desarrollo del proyecto
06 Resultados
07 Conclusiones
Bibliografía
Anexos
08 Referencias
01
Introducción
En un mundo donde la digitalización es esencial para el éxito empresarial,
las empresas deben adaptarse y evolucionar para mantenerse competitivas.
Totis, una empresa mexicana con décadas de experiencia en la producción
de botanas y golosinas, ha logrado consolidarse como una marca reconocida
y querida en el mercado local.
La expansión del comercio electrónico ha transformado la manera en que

los consumidores interactúan con las marcas y realizan sus compras. Las
páginas web ya no son simples escaparates digitales; se han convertido en
plataformas integrales que permiten a las empresas no solo mostrar sus
productos, sino también interactuar de manera más directa y personalizada
con sus clientes. Para Totis, la creación de una página web no es solo una
oportunidad de aumentar sus ventas, sino también una manera de fortalecer
su relación con sus clientes, ofrecerles una experiencia de usuario superior
y posicionarse mejor en el competitivo mercado de snacks y golosinas.
Este proyecto tiene como objetivo principal desarrollar una página web
interactiva que refleje la identidad y los valores de la marca Totis, al tiempo
que facilita la compra de sus productos. La página estará diseñada para
ofrecer una experiencia de usuario óptima, combinando un diseño atractivo
con una navegación intuitiva. Además, se integrarán tecnologías modernas
como audio y retroalimentación háptica para mejorar la interactividad y la
accesibilidad, asegurando que la experiencia en línea sea tan satisfactoria
como el disfrute de los productos Totis.
La página web no solo servirá como una plataforma de venta, sino también
como un canal de comunicación directa con los clientes, permitiendo a Totis
recibir retroalimentación, entender mejor las preferencias del consumidor y
adaptar sus estrategias de marketing en consecuencia. Este proyecto
representa un paso significativo en la modernización de la estrategia de
negocio de Totis, alineándola con las tendencias actuales del mercado
digital.
Resumen
Este proyecto se centra en la creación de una página web para la empresa
Totis, que mejorará su presencia en línea y la interacción con los clientes.
A través de un diseño centrado en el usuario y la integración de tecnologías
avanzadas, la nueva página web permitirá a los usuarios explorar y comprar
productos de manera sencilla y atractiva. Los resultados esperados incluyen
una mayor visibilidad y ventas, así como una experiencia de usuario
optimizada.
Planteamiento del
problema
La falta de una presencia digital robusta en la empresa de Totis limita su
capacidad para alcanzar a un público más amplio y diversificado,
especialmente en un entorno donde los consumidores cada vez más
prefieren realizar sus compras en línea. En la era digital actual, la presencia
en línea es crucial para el éxito de cualquier empresa. Totis ha identificado
la necesidad de una plataforma digital que no solo muestre sus productos
sino que también facilite la interacción con los clientes, permita compras en
línea y proporcione retroalimentación en tiempo real.
Objetivos del proyecto
Objetivo General
Desarrollar una página web interactiva y funcional para la empresa Totis,
que mejore la visibilidad de sus productos y facilite la interacción con los
clientes.
Objetivo Especifico
Diseñar una interfaz de usuario atractiva y fácil de navegar.
Implementar una tienda en línea para la compra de productos.
Integrar herramientas de retroalimentación para mejorar la experiencia
del usuario.
Asegurar la compatibilidad con dispositivos móviles.
Incorporar audio y retroalimentación háptica para una experiencia más
inmersiva.
Marco Contextual
Totis es una empresa mexicana fundada en 1987, conocida por su amplia
gama de botanas y golosinas que incluyen papas, churritos, palomitas, entre
otros. Con una fuerte presencia en el mercado tradicional, Totis ha logrado
posicionarse como una marca de confianza y calidad entre los
consumidores, especialmente en el mercado local.
Sin embargo, a pesar de su éxito en tiendas físicas y puntos de venta

tradicionales, la empresa ha identificado una carencia significativa en su
presencia digital. Actualmente, la mayoría de las ventas de Totis se realizan
a través de distribuidores y tiendas físicas, lo que limita su alcance a un
público más amplio, especialmente a las nuevas generaciones de
consumidores que prefieren realizar compras en línea.
El mercado de snacks y golosinas está en constante crecimiento y

evolución, con una competencia feroz no solo a nivel nacional, sino también
internacional. Las empresas que logran adaptarse a las nuevas tendencias
digitales, como el comercio electrónico y el marketing en redes sociales,
tienen una ventaja competitiva significativa. En este contexto, la falta de
una presencia en línea pone a Totis en una posición desventajosa frente a
sus competidores que ya han adoptado estrategias digitales efectivas.
La creación de una página web para Totis no solo tiene como objetivo
mejorar su visibilidad en el mercado digital, sino también proporcionar una
plataforma que facilite la interacción directa con sus clientes. Esto
permitirá a la empresa no solo vender sus productos en línea, sino también
captar datos valiosos sobre las preferencias y comportamientos de sus
consumidores, lo que es esencial para ajustar su oferta y estrategias de
marketing de manera más efectiva.
En resumen, el marco contextual de este proyecto se basa en la necesidad

de Totis de modernizar su presencia en el mercado digital para mantenerse
competitiva y relevante en un sector en constante cambio.
Marco Contextual
.....
Desarrollo del proyecto
El desarrollo del proyecto de la página web para Totis se llevará a cabo en
varias fases cuidadosamente planificadas para asegurar una ejecución
eficiente y de alta calidad. Estas fases incluyen la investigación y
planificación, el diseño, el desarrollo, las pruebas, y el lanzamiento. A
continuación, se describe cada fase en detalle:
6.1 Investigación y Planificación

Objetivo: Definir los requisitos del proyecto, analizar la competencia, y
establecer la estructura y funcionalidad de la página web.
Recolección de Requisitos: Se realizará una serie de reuniones con los
stakeholders de Totis para entender las necesidades específicas de la
empresa y los objetivos que se quieren alcanzar con la página web. Esto
incluirá aspectos como las características que debe tener la tienda en
línea, las necesidades de los usuarios, y las expectativas en cuanto a la
experiencia de usuario (UX).
Análisis de la Competencia: Se llevará a cabo un análisis exhaustivo de
las páginas web de competidores directos e indirectos de Totis para
identificar las mejores prácticas y oportunidades de diferenciación. Esto
incluye el estudio de sus estructuras, funcionalidades, estrategias de
marketing digital, y características de UX/UI.
Definición de la Estructura del Sitio: Con base en la información
recopilada, se definirá la arquitectura de la información (IA) del sitio
web, incluyendo la organización del contenido, la navegación, y las
principales funcionalidades. Se elaborarán mapas del sitio y diagramas
de flujo que representen la estructura y el recorrido del usuario.
6.2 Diseño
Objetivo: Crear una interfaz de usuario (UI) atractiva y una experiencia de
usuario (UX) intuitiva, asegurando que la página sea accesible y fácil de
usar.
Creación de Wireframes: Se diseñarán wireframes de baja fidelidad para
representar la disposición básica de los elementos en cada página,
facilitando la visualización de la estructura y flujo de navegación sin
distracciones de estilo.
Diseño Visual y Mockups: Basado en los wireframes aprobados, se
crearán mockups de alta fidelidad que incorporen el branding de Totis,
incluyendo paletas de colores, tipografías, y estilos visuales. Estos
mockups mostrarán cómo se verá la página web final en diferentes
dispositivos (diseño responsive).
Prototipos Interactivos: Se desarrollarán prototipos interactivos que
permitirán a los stakeholders navegar por el sitio y experimentar la
funcionalidad antes de que se inicie el desarrollo. Estos prototipos serán
utilizados para realizar pruebas de usabilidad con usuarios reales,
obteniendo retroalimentación para mejorar la UX antes de la
implementación.
6.3 Desarrollo
Objetivo: Implementar el diseño aprobado y desarrollar la funcionalidad de
la página web utilizando tecnologías modernas.
Desarrollo Frontend: Se realizará la implementación del diseño visual

utilizando tecnologías como HTML5, CSS3, y JavaScript. Se garantizará
que el sitio sea responsive, asegurando una experiencia de usuario
consistente en dispositivos móviles, tabletas, y escritorios.
Desarrollo Backend: El desarrollo del backend incluirá la implementación
de la tienda en línea, gestión de usuarios, y funcionalidades de
administración de contenido (CMS). Se utilizarán tecnologías como
Node.js para el servidor y MongoDB para la base de datos, asegurando
escalabilidad y rendimiento.
Integración de Funcionalidades: Se integrarán diversas funcionalidades
como la pasarela de pagos, carrito de compras, gestión de inventario, y
seguimiento de pedidos. Además, se incluirán herramientas de análisis
para el monitoreo de tráfico y comportamiento de usuarios.
Implementación de Audio y Retroalimentación Háptica: La página web
contará con elementos de audio que mejorarán la experiencia del
usuario, como sonidos de confirmación de acciones o descripciones de
productos. Para dispositivos compatibles, se añadirá retroalimentación
háptica, proporcionando una experiencia sensorial adicional que refuerza
la interacción del usuario con la web.
6.4 Pruebas
Objetivo: Asegurar que la página web funcione correctamente y ofrezca una
experiencia de usuario óptima en todas las plataformas y dispositivos.
Pruebas de Usabilidad: Se realizarán pruebas de usabilidad con un grupo

de usuarios representativos para identificar posibles problemas en la
navegación, la disposición de elementos, o la comprensión del
contenido. Se recogerá feedback que se utilizará para realizar ajustes
necesarios.
Pruebas Funcionales: Se llevarán a cabo pruebas exhaustivas de todas
las funcionalidades del sitio, incluyendo el proceso de compra, la
integración de pagos, la gestión de usuarios, y la interacción con la base
de datos. Estas pruebas asegurarán que todo funcione según lo
planeado.
Pruebas de Compatibilidad: La página web será probada en una variedad
de navegadores (Chrome, Firefox, Safari, Edge) y dispositivos (móviles,
tabletas, desktops) para garantizar que se vea y funcione correctamente
en todos ellos.
Pruebas de Rendimiento: Se realizarán pruebas de carga y estrés para
evaluar cómo se comporta la página bajo diferentes condiciones de
tráfico, asegurando que pueda manejar grandes volúmenes de usuarios
sin degradar su rendimiento.
6.5 Lanzamiento
Objetivo: Implementar la página web en un entorno de producción y hacerla
accesible al público.
Implementación en Servidores de Producción: La página web será

desplegada en un servidor de producción seguro y optimizado, utilizando
tecnologías de alojamiento web que garanticen disponibilidad y
rendimiento.
Optimización SEO: Se optimizarán las páginas para motores de búsqueda
(SEO) mediante la incorporación de palabras clave relevantes,
metadatos, y una estructura de URL amigable, lo que ayudará a mejorar
el ranking en los resultados de búsqueda.
Monitoreo y Soporte Post-Lanzamiento: Después del lanzamiento, se
implementarán herramientas de monitoreo para seguir el comportamiento
del sitio y detectar cualquier problema en tiempo real. Se ofrecerá
soporte técnico continuo para resolver cualquier incidencia y realizar
mejoras basadas en el análisis de datos y feedback de los usuarios.
Promoción y Marketing Digital: Se diseñará una estrategia de marketing
digital para promocionar el lanzamiento de la página web, incluyendo
campañas en redes sociales, publicidad online, y promociones especiales
para atraer tráfico inicial y fomentar la interacción de los usuarios con
la nueva plataforma.
Referencias
Norman, D. A. (2013). The Design of Everyday Things. MIT Press.
Garrett, J. J. (2010). The Elements of User Experience: User-Centered
Design for the Web and Beyond. New Riders.
Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense
Approach to Web Usability. New Riders.
Nielsen, J., & Budiu, R. (2013). Mobile Usability. New Riders.

Proyecto de Pris

Cargado por

Copyright:

Formatos disponibles

Proyecto de Pris

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Proyecto de Pris

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD TECNOLÓGICA DE LA

ZONA METROPOLITANA DEL VALLE DE

DISEÑO DE UNA PÁGINA WEB

MEMORIA DE ESTADÍA QUE PRESENTA:

PARA OBTENER EL TÍTULO DE:

02 Planteamiento del Problema

03 Objetivos del Proyecto

05 Desarrollo del proyecto

La expansión del comercio electrónico ha transformado la manera en que

Sin embargo, a pesar de su éxito en tiendas físicas y puntos de venta

El mercado de snacks y golosinas está en constante crecimiento y

En resumen, el marco contextual de este proyecto se basa en la necesidad

6.1 Investigación y Planificación

Desarrollo Frontend: Se realizará la implementación del diseño visual

Pruebas de Usabilidad: Se realizarán pruebas de usabilidad con un grupo

Implementación en Servidores de Producción: La página web será

Garrett, J. J. (2010). The Elements of User Experience: User-Centered

Design for the Web and Beyond. New Riders.

Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense

Approach to Web Usability. New Riders.

Nielsen, J., & Budiu, R. (2013). Mobile Usability. New Riders.

También podría gustarte