La propuesta visual de StockSip se basa en transmitir profesionalismo, accesibilidad y tecnología confiable para negocios que requieren control eficiente de su inventario, especialmente licorerías y proveedores. Las decisiones tomadas en cuanto a branding, tipografía, colores y espaciado buscan crear una experiencia clara, funcional y moderna, adecuada tanto para nuevos usuarios como para usuarios frecuentes del sistema.
Branding
-
"StockSip" se presenta como una marca moderna y profesional, enfocada en la gestión inteligente de licores.
-
El logotipo de StockSip combina elementos gráficos relacionados con licorería (como una copa estilizada o una botella minimalista) con una tipografía limpia, para reflejar sofisticación y control.
-
El uso de tonos cálidos oscuros (burdeos, dorado suave, marrones profundos) proyecta calidad, tradición y elegancia, en línea con el mundo de bebidas selectas.
-
La frase clave “stock management” debajo del logo refuerza el propósito de la herramienta y su enfoque en la eficiencia operativa.
Logo de StockSip
Tipografía
-
Títulos: “Poppins” — serif elegante, ideal para transmitir distinción y modernidad.
-
Cuerpo de texto: “Inter” — sans-serif moderna, clara y altamente legible.
-
Botones y microtextos: “Roboto Medium” — neutral y funcional, facilita la interacción en interfaces digitales.
-
Elementos destacados usan una variante "bold" o "semi-bold", asegurando énfasis sin sobrecargar visualmente.
Tipografías elegidas
Colores
Paleta principal:
Paleta de colores de StockSip
-
Los tonos oscuros crean una sensación de exclusividad, mientras que los acentos cálidos (como el naranja quemado) dan vitalidad y dinamismo.
-
La armonía entre morado y tonos neutros facilita un diseño elegante sin perder claridad.
-
El tono claro equilibra la composición, proporcionando aire y claridad visual, lo cual mejora la legibilidad y la elegancia general del diseño.
Espaciado
-
Diseño moderno y minimalista, con énfasis en claridad visual.
-
Márgenes y “padding” van de 12px a 48px, adaptándose al dispositivo.
-
El contenido se organiza en secciones bien separadas, para facilitar el escaneo visual y la navegación intuitiva.
-
Se prioriza la jerarquía visual con suficiente espacio entre los elementos clave.
Tono de la comunicación
-
Serio pero accesible: transmitimos confianza y precisión sin ser excesivamente técnicos.
-
Formal/Casual equilibrado: nos dirigimos a usuarios emprendedores o gerentes de negocios, con un tono que mezcla profesionalismo y cercanía.
-
Respetuoso: mantenemos un lenguaje claro y respetuoso, enfocado en resolver problemas del usuario.
-
Sereno con un toque entusiasta: buscamos reflejar eficiencia con mensajes motivadores que inviten a la acción sin ser invasivos.
Botones
-
Formato rectangular con bordes ligeramente redondeados (8px).
-
Los botones tienen tamaños grandes y están bien espaciados, en pantallas de escritorio, su diseño y posicionamiento optimizan la interacción con el ratón.
Botones elegidos
Patrón de diseño web:
- Se decidió utilizar el patrón de diseño web de tipo Z para el sitio web de la aplicación. Esta técnica mejora la experiencia del usuario al guiar su atención hacia los elementos claves más importantes que presenta la aplicación y maximizar la efectividad del contenido.
Esta sección define las pautas visuales y de interfaz para el desarrollo de la aplicación en PrimeVue. El enfoque está centrado en garantizar una experiencia consistente, accesible y optimizada para todos los usuarios, independientemente del dispositivo que utilicen.
Responsive Design
La interfaz se adapta automáticamente gracias a PrimeFlex y el uso de breakpoints estándar para diseño responsive:
-
sm:≤ 576px (móvil) -
md:577–768px (tablet) -
lg:769–1024px (laptop) -
xl:> 1024px (escritorio)
Componentes y patrones compatibles
-
Navbar/Menu:
<Menubar />o<TieredMenu />con integración de rutas y accesos rápidos. -
Cards:
<Card />con íconos de PrimeIcons para acciones. -
Botones:
<Button icon="pi pi-check" severity="primary" />, con soporte para icon-only o full. -
Toasts y diálogos:
<Toast />para notificaciones de éxito, error o alerta,<Dialog />para detalles de productos.
Accesibilidad
Todos los componentes siguen prácticas de accesibilidad:
-
Uso de atributos
aria-*en componentes sensibles. -
Navegación por teclado compatible (Tab, Enter, Space, etc.).
-
Contraste visual siguiendo la norma WCAG 2.1 AA.
-
Tipografías y layouts adaptables mediante
rem/em.
La organización jerárquica del Landing Page de "StockSip" ha sido diseñada con el propósito de guiar al usuario de manera lógica y efectiva desde su primer contacto con la solución hasta su conversión en cliente. Esta estructura responde a principios de arquitectura de la información que priorizan la claridad, la relevancia y la progresión natural del contenido, permitiendo que los usuarios comprendan de inmediato el valor del producto, cómo funciona, sus beneficios, y los pasos para adquirirlo.
Inicio
-
Propósito: Captar la atención del visitante con un mensaje claro y directo.
-
Contenido: Nombre del producto, propuesta de valor destacada y llamado a la acción (CTA).
Información explicativa
-
¿Cómo funciona?: Descripción paso a paso del funcionamiento del sistema.
-
Beneficios: Listado de ventajas competitivas de la solución para los usuarios.
-
Testimonios: Opiniones de usuarios actuales que validan la experiencia con StockSip.
Conversión
- Planes: Detalle de los distintos planes de suscripción disponibles.
Organización en el landing page
Además la arquitectura jerárquica en la interfaz de la aplicación web de "StockSip" ha sido diseñada para facilitar el acceso y gestión eficiente de las múltiples funcionalidades del sistema. Esta estructura permite una distribución lógica del contenido, reduciendo la carga cognitiva del usuario y mejorando su capacidad para encontrar rápidamente las herramientas que necesita.
Organización en la aplicación
Pantalla de inicio
Una vista general tipo dashboard que presenta:
-
Tarjetas resumen del stock actual, productos por vencer, y alertas activas.
-
Notificaciones destacadas (por vencimiento o bajo stock).
-
Gráficos breves sobre tendencias de entradas/salidas recientes.
Navegación principal
Sistema jerárquico accesible desde un menú lateral con iconografía clara. Incluye las siguientes pestañas:
-
Dashboard
-
Inventario
-
Zonas de almacenamiento
-
Alertas
-
Facturación
-
Guías
-
Perfil
Filtrado y organización avanzada
a. Para Dueños de Licorerías
-
Filtros por: Tipo de producto y nivel de stock y vencimiento.
-
Funcionalidades destacadas: Visualización de productos críticos, registro de nuevas entradas y salidas y gestión de zonas de almacenamiento.
b. Para Proveedores de Licores
-
Filtros por: Temporalidad de pedidos (última semana, mes).
-
Funcionalidades destacadas: Emisión y consulta de guías, gestión de facturación y seguimiento de entregas.
Segmentación por audiencia
a. Dueños de licorerías
-
Enfoque en gestión de stock, reducción de pérdidas por caducidad, registro de movimientos y planificación de compras.
-
Visualización clara de productos prioritarios y herramientas para reorganizar zonas de almacenamiento.
b. Proveedores de licores
-
Acceso a historial de pedidos y entregas.
-
Visualización de demanda por producto y licorería.
-
Herramientas de seguimiento y emisión de guías y facturas desde la plataforma.
El sistema de etiquetado de "StockSip" ha sido diseñado para ser claro, directo y fácil de entender, usando palabras clave con un número mínimo de términos sin perder precisión. Las etiquetas evitan tecnicismos innecesarios y buscan reducir la carga cognitiva del usuario.
Principios:
-
Consistencia: Se usan las mismas etiquetas en botones, menús y mensajes relacionados (por ejemplo: “Nuevo Producto”, “Registrar Salida”, “Ver Detalles”).
-
Simplicidad: Se evita el uso de jergas técnicas o frases largas. Ejemplos: “Stock mínimo”, “Fecha de caducidad”, “Alerta activa”.
Etiquetado en el Landing Page:
-
Inicio: Es la primera sección que el usuario ve al entrar. Resume qué es StockSip y capta la atención con un mensaje claro y directo.
-
Cómo Funciona: Explica paso a paso el funcionamiento de la plataforma, mostrando lo fácil que es empezar y gestionar el inventario.
-
Beneficios: Resalta las ventajas clave de usar StockSip, como ahorro de tiempo, reducción de pérdidas y toma de decisiones inteligentes.
-
Testimonios: Incluye opiniones reales de usuarios que ya usan la plataforma, lo que genera confianza en nuevos visitantes.
-
Planes: Presenta los diferentes planes de suscripción disponibles, con precios, características y comparaciones para facilitar la elección.
Etiquetado en la Aplicación Web:
-
Inventario: Sección principal donde se visualiza y gestiona el stock de productos disponibles.
-
Nuevo Producto: Permite registrar un nuevo artículo en el sistema, ingresando sus datos básicos.
-
Alertas de Vencimientos: Muestra los productos próximos a caducar para tomar decisiones rápidas.
-
Zonas de almacenamiento: Permite al usuario crear una zona de almacenamiento o gestionar zonas donde guardar o exponer sus productos.
-
Reportes: Área donde se pueden consultar y descargar informes de movimiento y estado del inventario.
-
Configuración: Sección para ajustar preferencias del sistema, notificaciones y datos de la cuenta.
-
Perfil Usuario: Acceso a los datos personales del usuario, con opción para editar información o cerrar sesión.
Con el objetivo de mejorar la visibilidad de "StockSip" en los motores de búsqueda y facilitar su descubrimiento tanto por licorerías como por proveedores interesados en optimizar la gestión de sus productos, se ha establecido una estrategia SEO que incluye el uso adecuado de etiquetas HTML para los principales elementos informativos del sitio y la aplicación web.
Landing Page
- Title:
<title>StockSip – Optimiza tu inventario de forma inteligente</title>
Una frase concisa que refleja la propuesta de valor de la herramienta y contiene palabras clave como "optimiza", "inventario" e "inteligente", términos que los usuarios suelen emplear al buscar soluciones de este tipo.
- Meta Description:
<meta name="description" content="StockSip es una plataforma digital diseñada para ayudar a licorerías y proveedores a gestionar sus inventarios de forma eficiente. Recibe alertas de vencimiento, mejora tus decisiones de compra y evita pérdidas gracias a recomendaciones inteligentes basadas en tu historial de productos.">
Esta descripción amplía la explicación del producto, destacando sus beneficios clave y diferenciadores, a la vez que integra términos como “plataforma digital”, “alertas”, “decisiones de compra” y “recomendaciones inteligentes”.
- Meta Keywords:
<meta name="keywords" content="gestión de inventarios, licorerías, proveedores, plataforma de stock, control de vencimiento, optimización de productos, sugerencias de compra, StockSip">
Un conjunto seleccionado de palabras y frases clave que abarca tanto el público objetivo (licorerías, proveedores) como funcionalidades (control, stock, sugerencias).
- Meta Author:
<meta name="author" content="Equipo StockSip – Diseño UX/UI y Desarrollo Web">
Incluye una referencia al equipo responsable del diseño y desarrollo del producto, lo cual puede apoyar en términos de confianza y atribución de contenido.
Web Application – Dashboard Principal
- Title:
<title>Panel de Control – StockSip | Visualiza, gestiona y optimiza tu inventario</title>
Este título complementa el nombre de la aplicación con un llamado a la acción claro y directo, enfocado en los principales objetivos que el usuario puede lograr desde el dashboard.
- Meta Description:
<meta name="description" content="Explora tu panel de control personalizado en StockSip. Administra tu inventario, accede a reportes detallados, recibe sugerencias de compra y controla tus productos a punto de vencer. Toda la información que necesitas, en un solo lugar.">
Redactado con una estructura clara y centrada en la funcionalidad. Refuerza el valor del dashboard como núcleo operativo de la aplicación, destacando acciones prácticas que el usuario puede realizar.
- Meta Keywords:
<meta name="keywords" content="dashboard de inventario, stock inteligente, gestión operativa, productos por vencer, reportes automáticos, control de licorerías, sugerencias de compra, plataforma StockSip">
En esta lista se incluyen palabras clave enfocadas en la experiencia dentro del entorno de aplicación, usando términos que reflejan una intención de uso concreta (ej. “dashboard de inventario”, “reportes automáticos”).
- Meta Author:
<meta name="author" content="Equipo de Desarrollo Web – StockSip, 2025">
Agrega también el año del lanzamiento del producto para reforzar la actualidad del sistema y su vigencia.
Dentro de la sección Inventario, el sistema de búsqueda está integrado de forma simple pero efectiva para que el usuario pueda localizar productos rápidamente. Se utiliza un campo de búsqueda principal centrado en la parte superior de la tabla, acompañado de botones de acción. Este campo permite buscar por nombre de producto o tipo (por ejemplo: “Whiskey”, “Vino”).
Búsqueda en el inventario
Filtros de Búsqueda
Al realizar una búsqueda, los usuarios pueden refinar los resultados mediante una variedad de criterios clave que les permiten adaptar la visualización a sus necesidades específicas:
- Categoría: Posibilidad de filtrar por tipo de licor o bebida, tales como destilados, vinos, cervezas, espumantes, etc.
- Disponibilidad por zona: Permite verificar si un producto está disponible en alguna zona creada por el usuario.
Resultados de Búsqueda
Los resultados se presentan en un formato visual tipo tabla, diseñado para proporcionar información clave de forma rápida. Cada fila en la tabla incluye:
- Nombre del producto
- Tipo
- Precio
- Fecha de caducidad
- Stock actual
- Stock mínimo
Se implementa una codificación por colores para facilitar la interpretación visual de las tendencias:
- Verde: Indica un stock aceptable
- Rojo: Indica un riesgo en el stock
Búsqueda Avanzada (Proveedores)
StockSip incluye una función de búsqueda avanzada especialmente diseñada para proveedores de licores:
- Guías de conservación por tipo de producto: Acceso exclusivo a documentos y recomendaciones técnicas que detallan las mejores prácticas para la conservación de diferentes tipos de licores (temperatura, humedad, tiempo de almacenamiento recomendado, etc.).
- Planes de reabastecimiento: Herramienta que permite proyectar necesidades de reposición de stock basándose en históricos de venta, frecuencia y patrones de consumo.
La navegación en StockSip está diseñada para facilitar el recorrido del usuario de manera clara y rápida. En el landing page se implementa una barra de navegación fija con las secciones clave para el visitante. Estas son:
- Inicio
- ¿Cómo funciona?
- Beneficios
- Contacto
- Empezar
Barra de navegación fija
En la aplicación web, se implementa una barra lateral fija con íconos, la cual permite el acceso directo a las funcionalidades clave como:
- Dashboard
- Inventario
- Alertas
- Reportes
- Compras
- Zonas
- Facturación
- Configuración
Cada sección está representada con un ícono claro y una etiqueta visible al pasar el cursor o expandir el menú, asegurando una navegación fluida.
Barra de navegación desplegable
Para el desarrollo del Landing Page de StockSip, se realizaron diversos bosquejos de baja fidelidad en la aplicación de diseño de interfaz Figma para crear la estructura de las pantallas del Landing Page de la solución.
Para el desarrollo del Landing Page de StockSip, se realizaron bosquejos de alta fidelidad en la aplicación Figma. Para el desarrollo de estas pantallas, se tomó como base los Wireframes previamente diseñados, sin embargo, estas pantallas poseen colores adecuados y la tipografía definida para las distintas secciones del Landing Page.
En esta sección se presentarán los wireframes de la aplicación, los cuales son bosquejos de baja fidelidad sobre las funcionalidades principales de nuestra solución. Finalmente, se dividieron estos wireframes en doce secciones.
En esta sección, el usuario podra crear su cuenta e iniciar seccion con la cuenta anteriormente creada. Podra elegir entre el rol de dueño de licoreria y proveedor. Tambien podra recuperar su contraseña mediante un codigo de confirmacion, el codigo le llegara a su correo que registro al crear su cuenta.
En esta sección, se presentan los perfiles de los dos tipos de usuarios. En el los usuarios podran cambiar sus datos personales, caracteristicas y podra cambiar el tipo de plan entre Plan Free y Plan Premium
En esta sección, los dos tipos de usuarios podran ver su dashboard, este contiene un resumen general, alertas recientes y accesos rapidos para las herramientas de la aplicacion.
En esta sección, el usuario podra ver las facturas que realizo, asi mismo, tambien puede crear comprobante cuando este por realizar una venta.
En esta sección, el usuario podra ver las alertas a mayor detalle. Vera cuanto de stock de cada producto cuenta en su almacen. Tambien podra ver los productos proximos a vencer.
En esta sección, el usuario podrá crear guías de conservación de vinos, diseñadas para orientar y apoyar a los nuevos ingresantes en el rubro de la licorería, proporcionando buenas prácticas y consejos esenciales para el manejo adecuado de estos productos.
En esta sección, el usuario podrá crear descuentos para sus productos y gestionar las promociones activas, permitiéndole visualizar, editar o desactivar los descuentos vigentes de manera sencilla y organizada.
En esta sección, el usuario podrá crear planes de reabastecimiento para su almacén, definiendo la frecuencia con la que renovará su inventario. Además, podrá visualizar y gestionar los planes ya creados, asegurando una mejor organización y un flujo constante de productos.
En esta sección, el usuario podrá generar reportes relacionados con pérdidas, remisiones internas, así como cuidados y conservación de sus productos, permitiéndole llevar un control detallado y mejorar la gestión de su inventario
En esta sección, el usuario podrá crear y editar las zonas de almacenamiento para sus productos, permitiéndole organizar mejor su inventario y llevar un control más preciso de su negocio.
En esta sección, el usuario podrá realizar órdenes de compra a los proveedores, enviando automáticamente los detalles —como los productos solicitados y las cantidades requeridas— al correo electrónico del proveedor, facilitando así una comunicación rápida y precisa.
En esta sección, el usuario podrá visualizar el catálogo del proveedor y realizar órdenes de compra de manera sencilla. A su vez, el proveedor tendrá la posibilidad de crear y gestionar sus propios catálogos, agregando la información necesaria de cada producto para facilitar la venta y mantener actualizada su oferta.
En esta sección, el usuario podrá gestionar su inventario utilizando diversas herramientas: agregar, editar y eliminar productos, registrar la salida de productos indicando el tipo de salida, y visualizar un resumen general del estado de todo su inventario, facilitando así un control más eficiente y organizado.
Un wireflow o flujo de pantalla es un diagrama donde se reúnen distintos wireframes realizados cuya finalidad es contar las metas del usuario con la aplicación y cómo las consiguen. Luego, los pasos para la creación de cada diagrama empiezan por la definición de un objetivo del usuario que desea cumplir. Luego, se define el flujo de tareas que se deben ser realizadas por el usuario en la aplicación para conseguir dicho objetivo. Y, finalmente, se traducen dichas tareas por pantallas y, también, se trazan decisiones en botones del wireframe.
- User Goal 1: Usuario desea registrarse en la aplicación
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, en este flujo se muestra el proceso para registrar una cuenta en la aplicación que empieza en el momento en el que el usuario accede a la aplicación web y continúa con el mismo usuario colocando inforamción requerida para crear una cuenta.
- User Goal 2: Usuario desea iniciar sesión con su cuenta en la aplicación
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, en este flujo se muestra el para iniciar sesión en la aplicación. Para ello, el usuario debe haber creado una cuenta previamente. Luego, debe colocar las credenciales de su cuenta en los recuadros e iniciar sesión.
- User Goal 3: Usuario desea cambiar su contraseña
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, en este flujo se muestra el proceso para recuperar la contraseña de una cuenta. Para ello, el usuario accede a la sección para realizar dicha acción y coloca el correo electrónico asociado a su cuenta. Luego, recibirá un código de verificación y con ese código podrá continuar al siguiente paso y crear una nueva contraseña.
- User Goal 4: Dueño de licorería desea visualizar su inventario
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, en este flujo se muestra el proceso para visualizar el inventario. Primero, el usuario debe iniciar sesión. A continuación, accederá al Dashboard que es la vista principal al iniciar sesión. Finalmente, debe dar clic en el botón de Inventario y podrá visualizarlo.
- User Goal 5: Dueño de licorería desea agregar un producto a su inventario
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, en este flujo se muestra el proceso para registrar un producto en un inventario digital. Para ello, el usuario deberá registrar toda la información relacionada al producto deseado. Finalmente, se debe guardar la información y el producto se mostrará en el inventario.
- User Goal 6: Dueño de licorería desea registrar la salida de un producto
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, en este flujo se muestra el proceso que sigue típicamente un dueño de licorería para registrar el motivo de salida de un producto de su negocio. Para ello, el usuario debe acceder al inventario y seleccionar el botón para registrar salida. Luego, deberá seleccionar el producto y el motivo de salida. Finalmente, guardar, y se completará el proceso.
- User Goal 7: Dueño de licorería desea conocer el estado de la salud de su inventario
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, en este flujo se muestra que para acceder a la sección de Salud del Inventario, se debe realizar una acción de scroll en la pantalla de inventario.
- User Goal 8: Dueño de licorería desea visualizar la sección Reportes
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, este flujo muestra que acceder a la sección de Reportes se puede conseguir desde la barra lateral izquierda al presionar el ícono que representa a dicha sección.
- User Goal 9: Dueño de licorería desea generar un nuevo reporte
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, este flujo muestra el proceso para registrar un nuevo reporte. Para ello, el dueño de licorería debe rellenar la información que se le solicita y guardar. De esta forma, se mostrará al recargar la sección.
- User Goal 10: Dueño de licorería desea saber si un producto se encuentra en una zona de almacenamiento determinada
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, este flujo inicia en la sección de zonas, donde el dueño de licorería usa la barra de navegación para escribir el nombre del producto que desea buscar. Finalmente, la aplicación mostrará las zonas en las que se encuentra almacenado dicho producto.
- User Goal 11: Dueño de licorería desea generar una nueva orden de compra
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, en este flujo se muestra un caso típico que puede ocurrir al intentar registrar una nueva orden de compra ya que los usuarios pueden olvidar completar algunos espacios solicitados. Es por ello, que al intentar registrar una orden con espacios incompletos, la aplicación muestra un mensaje de error.
- User Goal 12: Proveedor desea generar una nueva guía de conservación
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, se muestra que el proveedor accede a la sección de Guías de conservación desde la sección Reportes. Luego, usa el botón para crear una nueva guía y completa los espacios requeridos. Finalmente, guarda y se muestra la guía creada.
- User Goal 13: Usuario desea generar una nueva factura
Primero, se definen las tareas típicas que realizaría un usuario para completar este objetivo:
Luego, se muestra el resultado de la traducción de acción a pantallas. A continuación, se muestra que el usuario accede a la sección de facturación y usa el botón para registrar una nueva factura. Luego, completa los espacios requeridos para el registro exitoso. Finalmente, guarda la información y la factura se mostrará en la sección de facturación.
En esta sección se presentarán los mockups de la aplicación móvil, los cuales son bosquejos de media o alta fidelidad sobre las funcionalidades principales de nuestra solución. Para el diseño de los mockups, se partió de los wireframes realizados previamente.
Sección Inicio de Sesión/Registro:
Sección Inventario
Sección Alertas
Sección Zonas de Almacenamiento
Sección Guías de Conservación
Sección Órdenes de Compra
Sección Facturación
Sección Catálogo
Seccion Descuentos
Sección Planes de Reabastecimiento
Sección Dashboard
Sección Perfil
Un user flow o trayectoria del usuario es un diagrama que consiste en mostrar el trayecto del usuario representado por un diagrama de flujo e indica el camino que debe seguir el usuario para cumplir con un objetivo en específico en la aplicación. Además, el user flow debe determinar estos pasos para completar una experiencia digital satisfactoria para el usuario.
- User Goal 1: Usuario desea registrarse en la aplicación
Happy Path
En esta ruta esperada, el flujo concentra un proceso de registro de cuenta en la aplicación. Asimismo, el usuario es recibido por la pantalla principal y debe registrarse en la aplicación usando información que solicite el registro. Finalmente, al crease la cuenta, el usuario puede continuar con el uso de la aplicación. Cabe recalcar, que este flujo no toma en cuenta la elección de plan ya que los usuarios que se registran, automáticamente poseen un plan de uso gratuito que limita sus funciones.
Unhappy Paths
Estas rutas alternas toman en cuenta que el usuario ha colocado alguna información errónea que no pasó la verificación o que no completó uno o varios espacios requeridos para proceder con el registro.
- User Goal 2: Usuario desea iniciar sesión con su cuenta en la aplicación
Happy Path
En esta ruta esperada, el flujo representa el proceso de inicio de sesión del usuario para acceder a la aplicación. Cabe recalcar, que desde este flujo sí toma en cuenta la elección de plan. Asimismo, de ahora en adelante, se trabaja con usuarios que poseen el plan premium.
Unhappy Paths
En esta ruta alterna, el usuario ha colocado alguna información de su cuenta erróneamente, lo que prohibe, en ese instante, poder acceder a su cuenta.
- User Goal 3: Usuario desea cambiar su contraseña
Happy Path
En esta ruta esperada, el usuario inicia en un estado en el que no recuerda su contraseña para acceder a la aplicación. Para ello, deberá seguir el proceso para recuperación de contraseñas mediante el uso de su correo electrónico. Luego, recibirá un código de verificación que deberá introducir en la aplicación para poder crear una nueva contraseña.
Unhappy Paths
En esta ruta alterna, el usuario ha indicado un correo no registrado en la aplicación (si introduces un correo registrado, enviará un código de verificación a dicho correo aunque no sea tuyo). Por lo tanto, no recibirá ningún código de verificación y no podrá restaurar su contraseña.
- User Goal 4: Dueño de licorería desea visualizar su inventario
Happy Path
En esta ruta esperada, el dueño de licorería inicia sesión en su cuenta para, de esta manera, pueda acceder a la pantalla principal (dashboard). Finalmente, el usuario, mediante un clic, accede al inventario digital y puede visualizar sus productos.
- User Goal 5: Dueño de licorería desea agregar un producto a su inventario
Happy Path
En esta ruta esperada, el dueño de licorería accede al inventario digital y utiliza la función de agregación de productos. En la siguiente pantalla, rellena cada espacio requerido correctamente y guarda la información. A continuación, la aplicación asociará dicho producto a su almacén y se mostrará.
Unhappy Paths
En esta ruta alterna, el dueño de licorería intenta registrar un producto con información errónea o nula, lo cual no es posible y recibe un mensaje de error.
- User Goal 6: Dueño de licorería desea registrar la salida de un producto
Happy Path
En esta ruta esperada, el dueño de licorería desea registrar la razón por la cual uno o varios productos salieron de su negocio. Para ello, posee dos secciones que debe completar: el producto y la razón. No hay manera de provocar errores en esta pantalla.
- User Goal 7: Dueño de licorería desea conocer el estado de la salud de su inventario
Happy Path
En esta ruta esperada, el dueño de licorería desea visualizar el dashboard alternativo que muestra la salud de su inventario. Es por ello que realiza un scroll en la pantalla de su inventario y accede al lugar que desea visualizar.
- User Goal 8: Dueño de licorería desea visualizar la sección Reportes
Happy Path
En esta ruta esperada, el dueño de licorería accede a la sección Reportes desde la pantalla principal (puede acceder a la sección Reportes desde cualquier otra sección). Para ello, utiliza el ícono que representa a dicha sección y la aplicación lo redirigirá.
- User Goal 9: Dueño de licorería desea generar un nuevo reporte
Happy Path
En esta ruta, el dueño de licorería accede a la sección Reportes y selecciona el botón para registrar un nuevo reporte. Luego, rellena la inforamción que le solicita la aplicación correctamente. Finalmente, se procesa el registro y se muestra en la sección.
Unhappy Paths
En esta ruta alterna, el dueño de licorería intenta registrar un reporte con información errónea o incompleta, lo que no es posible. Por lo tanto, se le muestra un aviso de que su acción no ha sido procesada.
- User Goal 10: Dueño de licorería desea saber si un producto se encuentra en una zona de almacenamiento determinada
Happy Path
En esta ruta esperada, el dueño de licorería accede a la sección Zonas. Luego, utiliza la barra de navegación al colocar el nombre del producto que desea buscar. Finalmente, la aplicación encuentra el producto y las zonas en las que se encuentra y las muestra al usuario.
Unhappy Paths
En esta ruta alterna, el dueño de licorería intenta buscar el nombre de un producto no registrado en su almacén o que no ha sido colocado en alguna zona. Por lo tanto, la aplicación mostrará una sección vacía.
- User Goal 11: Dueño de licorería desea generar una nueva orden de compra
Happy Path
En esta ruta esperada, el dueño de licorería accede a la sección para realizar pedidos a los proveedores. Luego, selecciona el botón para generar una nueva orden. A continuación, el dueño de licorería completa la información requerida como productos a pedir y cantidad por cada uno. Finalmente, coloca el correo del proveedor al que desea hacer un pedido y envía.
Unhappy Paths
En esta ruta alterna, el dueño de licorería intenta registrar una orden de compra con información incompleta, lo cual, no es posible. Por lo tanto, recibe un mensaje de error,
- User Goal 12: Proveedor desea generar una nueva guía de conservación
Happy Path
En esta ruta esperada, el proveedor accede a la sección Reportes y hace clic en el botón de Conservación. A continuación, es dirigido a la sección donde puede visualizar sus guías creadas y botones para modificar y crear nuevas guías. Luego, el proveedor se dispone a generar una nueva guía. Para ello, completa la información requerida correctamente y guarda. Finalmente, se muestra toda la información que ha registrado el proveedor.
Unhappy Paths
En esta ruta alterna, el proveedor, por error o equivocación, intenta crear una guía de conservación con información faltante o errónea. Por lo tanto, no se crea su guía de conservación.
- User Goal 13: Usuario desea generar una nueva factura
Happy Path
En esta ruta esperada, el usuario accede a la sección Facturación donde puede visualizar sus facturas y botones para generar una nueva factura manualmente. A continuación, presiona el botón para registrar una nueva factura. Luego, completa los espacios requeridos correctamente y guarda la información.
Unhappy Paths
En esta ruta alterna, el usuario intenta registrar una factura con información errónea o faltante. Por lo tanto, no será posible registrar la factura.
En esta sección, se evidencian pruebas de uso de los prototipos de las aplicaciones para el entorno Web Browser. Además, se adjunta un video donde se usan los prototipos y las interacciones con el prototipo se basan en los User Flows descritos previamente.
Prototipo de StockSip
StockSip_Prototipo_Web_Browser.mp4
Para identificar nuestros Bounded Context, es necesario realizar un análisis estratégico del dominio. Este análisis se puede llevar a cabo utilizando las siguientes herramientas:
Para identificar los eventos de dominio, es recomendable realizar una sesión de Event Storming. Esta técnica permite visualizar y comprender el flujo de eventos dentro del dominio, facilitando la identificación de los Bounded Context.
- Bounded Context Inventory
- Bounded Context Order
- Bounded Context Authentication
- Bounded Context Payment
- Bounded Context Reporting
- Bounded Context Notification
El modelado del flujo de mensajes de dominio es una técnica que permite visualizar cómo los diferentes Bounded Contexts interactúan entre sí a través de eventos y comandos. Esta técnica ayuda a identificar las dependencias y las relaciones entre los distintos contextos, facilitando la comprensión del sistema en su conjunto.
- Escenario: Registrar un nuevo producto en el catálogo
- Escenario: Notificar el estado de un pedido
- Escenario: Registrar una nueva cuenta
Los Bounded Contexts son divisiones estratégicas dentro del dominio que permiten gestionar diferentes aspectos del sistema de manera independiente. Cada Bounded Context tiene su propio modelo de dominio, lo que facilita la evolución y el mantenimiento del sistema en su conjunto.
-
Bounded Context Inventory: Gestiona el control de inventario en almacenes, incluyendo ajustes de stock, registro de productos y seguimiento de movimientos, para garantizar disponibilidad y precisión en tiempo real.
-
Bounded Context Order: Gestiona el ciclo completo de órdenes (compra/venta), la configuración de catálogos (productos y promociones) y la planificación de reabastecimiento, asegurando disponibilidad de inventario y una experiencia fluida para clientes y proveedores.
-
Bounded Context Authentication: Gestiona la identidad de usuarios (dueños de licorerías y proveedores) y su acceso al sistema, incluyendo autenticación y autorización.
-
Bounded Context Payment: Gestionar las operaciones relacionadas con los pagos de los planes disponibles en la plataforma, incluyendo la suscripción, renovación, cancelación y validación de acceso según el estado del plan contratado.
-
Bounded Context Reporting: Genera documentación formal y reportes para el negocio, incluyendo:
- Remisión interna (movimiento entre almacenes)
- Guías de conservación/cuidados (para productos y almacenes especiales)
- Reportes de pérdidas (mermas, daños, vencimientos)
- Facturación (documentos legales para clientes)
- Bounded Context Notification: Gestiona y distribuye alertas estratégicas sobre eventos críticos del negocio, incluyendo:
- Notificaciones de productos próximos a vencer
- Actualizaciones de estado en órdenes de compra/venta
- Alertas tempranas de falta de stock
El Bounded Context Canvas es una herramienta visual que permite documentar y comprender mejor los diferentes Bounded Contexts dentro del dominio. A continuación se presentan ejemplos de Bounded Context Canvas para cada uno de los contextos identificados.
- Bounded Context Canvas - Inventory:
- Bounded Context Canvas - Order:
- Bounded Context Canvas - Authentication:
- Bounded Context Canvas - Payment:
- Bounded Context Canvas - Reporting:
- Bounded Context Canvas - Notification:
Es una metodología que organiza y estructura el software en base a los dominios de negocio, permitiendo una mejor comprensión y gestión de la complejidad del sistema. A continuación se presentan los diagramas que representan la arquitectura del software:
Un diagrama de contexto es una representación visual que muestra cómo un sistema interactúa con otros sistemas y actores externos. En el caso de StockSip, el diagrama de contexto ilustra las interacciones entre la aplicación y los usuarios, así como otros sistemas relevantes.
StockSip Context Diagram
Un diagrama de contenedores es una representación visual que muestra los diferentes contenedores (aplicaciones, bases de datos, servicios, etc.) que componen un sistema y cómo interactúan entre sí. En el caso de StockSip, el diagrama de contenedores ilustra la arquitectura general del sistema, incluyendo la aplicación web, la base de datos y otros componentes relevantes.
StockSip Container Diagram
Un diagrama de componentes es una representación visual que muestra los diferentes componentes de un contenedor y cómo interactúan entre sí. En el caso de StockSip, el diagrama de componentes ilustra la arquitectura interna de la aplicación web de cada bounded context.
- Reporting Context
StockSip Reporting Component Diagram
- Authentication Context
StockSip Authentication Component Diagram
- Order Context
StockSip Order Component Diagram
- Notification Context
StockSip Notification Component Diagram
- Inventory Context
StockSip Inventory Component Diagram
- Payment Context
StockSip Payment Component Diagram
A continuación, se adjunta el link de acceso a la vista del diagrama de clases diseñado en LucidChart: Link de acceso al Diagrama de Clases en LucidChart
En esta sección, se detallará el diccionario de las principales clases que se muestran en el diagrama de clases previamente mostrado.
- Profile: Es la clase que contiene la información personal y de contacto del usuario que se registra en la aplicación. Esta clase es la que interactúa con las otras clases de la aplicación.
- User: Es la clase que contiene información de cuenta de la persona que se registra en la aplicación.
- Role: Es un value object que indica si el usuario es proveedor de productos o dueño de una licorería.
- Membership: Es la clase que contiene la información de la membresía que adquiere un usuario en la aplicación.
- Address: Es un value object que contiene la información sobre la dirección geográfica de un usuario (lugar del local de venta).
- ProfileId: Es un value object que contiene al identificador único de cada perfil de usuario. Se usa en otras clases para evitar referenciar la clase Profile completa.
- ProviderId: Es un value object que contiene al identificador único de cada proveedor. Se usa en las órdenes de pedido para evitar referenciar la clase Provider completa.
- Money: Es un value object que sirve para crear valores de moneda válidos en la aplicación. Contiene un valor que puede ser decimal y una divisa.
- Report: Es una clase que contiene información de cada reporte que genere el usuario sobre el inventario o productos que posea.
- Invoice: Es una clase que contiene la información relacionada a la factura generada tras una compra al proveedor.
- SalesOrder: Es una clase que contiene un objeto PurchaseOrder. Es la clase que manipula el proveedor y posee estados para indicar cuándo será entregado.
- PurchaseOrder: Es una clase que contiene la lista de productos que va a solicitar el dueño de licorería al proveedor. Posee un método para calcular el precio total del pedido a ordenar.
- PurchaseOrderItem: Es una clase que contiene el detalle del producto que necesita el dueño de licorería y su cantidad deseada. Posee un método para calcular el subtotal del ítem.
- ReplenishmentPlan: Es una clase que contiene la información detallada del plan de reabastecimiento que posee un proveedor para enviar los pedidos de sus clientes. Posee un atributo "frequencyDays" que es una métrica de aproximación para saber cuánto tiempo le toma a un dueño de licorería a solicitar un pedido para abastecerse.
- ConservationGuide: Es una clase que contiene información sobre los cuidados que debe tener el dueño de licorería al tratar con los productos que adquiere
- Inventory: Es la clase principal de la aplicación. Contiene productos y el stock de cada uno. Además, genera alertas dependiendo del estado actual del almacén. Posee métodos para actualizar el stock de productos y actualizar el almacén en general (eliminar, agregar productos).
- Zone: Es una clase que contiene información sobre la zona en la que se encuentra el almacén. Por ejemplo: La zona de muestra de productos, el almacén general de productos, entre otros.
- Product: Es una clase que contiene todo el detalle de los productos tanto del proveedor como del dueño de licorería. Posee métodos para actualizar la información del producto, para colocar un stock mínimo que, si el número de stock es más bajo que el colocado, podrá generar notificaciones sobre bajo stock al usuario.
- ProductInfo: Es un value object que contiene la información más importante del producto como el nombre, cantidad de líquido, precio unitario y fecha de vencimiento.
- Provider: Es una clase que contiene información sobre un proveedor de productos.
- Alert: Es una clase que se usa para estructurar un mensaje de alerta o notificación que recibirá el usuario.
A continuación, se adjunta el link de acceso a la vista del diagrama de base de datos diseñado en Vertabelo. Link de acceso al Diagrama de Base de Datos
