ECOMMERCE 1999

Cristian José Ríos Álvarez

Gerardo Martínez Gómez
Alex Daniel Durango Ávila

Ing. Jorge Luis Escobar Reynel

UNIVERSIDAD DE CÓRDOBA

INGENIERIA DE SISTEMAS

MONTERIA – CORDOBA

2023-2
 Interfaces de usuario
1. landing-page
 El objetivo de esta ventana es presentar y destacar los aspectos clave de la
marca para atraer a los visitantes y motivarlos a explorar y participar en la
experiencia de compra. Contiene un encabezado en la parte superior de la
página donde el usuario puede navegar de manera fácil y directa a cada una
de las secciones de la página. además de un menú desplegable que le da la
posibilidad de acceder de manera directa a las vistas correspondientes a la
vitrina de productos, vitrina de productos en oferta y la página de contacto.
La primera sección de esta vista capta la atención del usuario y presenta la
esencia de la marca, la segunda sección destaca los aspectos únicos de la
marca y busca persuadir al usuario a considerar los productos, la tercera
sección le da al usuario la posibilidad de ver los productos destacados para
caballeros, damas y accesorios con el objetivo de despertar el interés del
usuario en las colecciones con mayor valoración y la última sección busca
motivar al usuario a explorar la colección completa de productos,
redirigiendo al usuario a la página de registro para iniciar su proceso de
compra.

2. registro

Esta página tiene como objetivo facilitar el proceso de registro para los
usuarios interesados en la marca. La estructura comienza con un
encabezado que incluye la identidad visual de la marca y un menú de
navegación sencillo que permite a los usuarios regresar a la página de
inicio o acceder a la sección de contacto. La página está diseñada con
un enfoque claro en la acción principal: el registro.
 La sección de registro está dividida en dos partes principales: una
imagen que agrega contexto visual y un formulario de registro. El
formulario solicita información esencial, como nombre de usuario y
contraseña, y proporciona un enlace directo para completar el proceso
de registro. Además, se incluye un enlace para aquellos que ya tienen
una cuenta, ofreciéndoles la opción de iniciar sesión en lugar de
registrarse nuevamente.
3. log-in

Esta página está diseñada para facilitar el proceso de inicio de sesión en

el sitio web. El diseño sigue una estructura clara y funcional para
brindar una experiencia de usuario eficiente. La página comienza con
un encabezado que muestra el logo de la marca y un menú de
navegación que permite a los usuarios acceder fácilmente a las
secciones clave del sitio, como la página de inicio y la sección de
contacto.
La sección principal de la página está dividida en dos partes: una
imagen llamativa que complementa la temática de inicio de sesión y un
formulario de inicio de sesión. El formulario solicita al usuario su
nombre de usuario y contraseña, con campos claramente etiquetados. Se
requiere que los campos de nombre de usuario y contraseña estén
completos para proceder, enfocándose en la seguridad e integridad de la
información del usuario.
 La página también incluye un enlace directo para aquellos que han
olvidado su contraseña, proporcionando una opción fácil para recuperar
el acceso a sus cuentas. Además, se presenta un enlace para los usuarios
que aún no tienen una cuenta, redirigiendo al usuario a la página de
registro para que puedan crear una cuenta.
4. vitrina de productos

Esta página está diseñada para mostrar y presentar la variedad de

productos disponibles en la tienda. La página comienza con un
encabezado que incluye el logo de 1999 Urbano y un menú de
navegación que permite a los usuarios acceder fácilmente a diferentes
secciones del sitio, como la página de inicio, la sección de productos,
ofertas y contacto.
 En la parte superior, se encuentra una barra de búsqueda que permite a
los usuarios buscar productos específicos. Además, hay íconos para
acceder a funciones rápidas, como la lista de favoritos y el carrito de
compras, brindando una experiencia de compra conveniente.
La sección principal de la página está compuesta por una serie de
productos, cada uno presentado con una imagen, nombre, descripción
del material, precio y opciones de talla. Cada producto también cuenta
con un botón "Añadir al carrito", facilitando a los usuarios agregar
productos a su carrito de compras.
5. detalle de producto

Esta página está diseñada para proporcionar información detallada sobre

un artículo específico y facilitar la compra del usuario. La página
comienza con un encabezado que incluye el logo de la marca y un menú
de navegación que permite a los usuarios acceder fácilmente a
diferentes secciones del sitio, como la página de inicio, la sección de
productos, ofertas y contacto. En la parte superior, se encuentra una
barra de búsqueda que permite a los usuarios buscar productos
específicos. Además, hay íconos para acceder a funciones rápidas, como
la lista de favoritos y el carrito de compras, brindando una experiencia
de compra conveniente.
 La sección principal de la página se enfoca en el detalle de un producto
específico. Se presenta una imagen del producto en la parte izquierda,
mientras que en la parte derecha se muestran detalles clave, como el
nombre del producto, precio, opciones de talla y cantidad. El diseño es
limpio y ordenado, facilitando la lectura y la toma de decisiones.
A continuación, se proporciona una descripción detallada del producto,
destacando las características clave y el estilo del artículo. Esta
descripción busca brindar al usuario información adicional que pueda
influir en su decisión de compra. Finalmente, se incluye un botón
"Agregar al Carrito" que redirige al usuario a la página de pago para
completar la transacción.
6. checkout

Esta página está diseñada para facilitar el proceso de compra de un

producto. La página comienza con el encabezado habitual que incluye
el logo de 1999 Urbano y un menú de navegación que permite a los
usuarios moverse entre las diferentes secciones del sitio e incluye un
botón de búsqueda, accesos rápidos a la lista de favoritos y al carrito de
compras para mejorar la experiencia general del usuario.
La sección principal de la página contiene un formulario de compra que
muestra la imagen y la información detallada del producto seleccionado.
El formulario incluye campos esenciales para completar la transacción:
● Talla y Cantidad: Los usuarios pueden seleccionar la talla
deseada y la cantidad del producto que desean comprar.

● Información del Comprador: Se recopila la información del

comprador, incluyendo el nombre, correo electrónico y dirección
de envío. Estos campos son marcados como obligatorios (atributo
required), asegurando que se proporcionen los detalles necesarios
para la entrega.

● Método de Pago: Se proporciona una lista desplegable que

permite a los usuarios seleccionar su método de pago preferido
entre tarjeta de crédito, PayPal o pago en efectivo contraentrega.

● Código de Descuento: Existe la opción de ingresar un código de

descuento para aplicar beneficios adicionales antes de la compra.

● Descripción del Producto: Se incluye una descripción adicional

del producto para recordar al usuario lo que está a punto de
comprar.

● Botón de Compra: El formulario concluye con un botón

"Comprar Ahora" que, al hacer clic, enviará la información del
formulario para procesar la compra.
7. vitrina de productos en oferta

Esta página está diseñada para presentar la variada selección de

productos en oferta en nuestra tienda. La página comienza con logo de
1999 Urbano y un menú de navegación que facilita la exploración de
diversas secciones, como la página de inicio, la sección de productos en
oferta y el área de contacto. Incluye una barra de búsqueda que te
permite buscar productos específicos. Además, se han incluido íconos
para acceder rápidamente a funciones como la lista de favoritos y el
carrito de compras.
 La sección principal de la página presenta una selección exclusiva de
productos en oferta. Cada producto se exhibe con una imagen atractiva,
su nombre, descripción del material, precio original y el precio de
oferta. Además, se proporcionan opciones de talla para adaptarse a tus
preferencias. Incluye un botón "Añadir al carrito" en cada producto
permitiéndole al usuario agregar fácilmente los artículos deseados al
carrito de compras.
8. detalle del producto en oferta

Esta página está diseñada para proporcionar información detallada sobre

un artículo específico en oferta y facilitar la compra del usuario. La
página comienza con un encabezado que incorpora el logo de 1999
Urbano y un menú de navegación que permite explorar de manera fácil
las diversas secciones del sitio, desde la página de inicio, un vista
general de los productos y los que se encuentran en oferta además de la
sección de contacto.
En la parte superior de la página, se encuentra una barra de búsqueda
que permite buscar productos de interés. Además, íconos que
proporcionan acceso rápido a funciones esenciales, como la lista de
favoritos y el carrito de compras, para una experiencia de compra sin
complicaciones.
 La sección principal de la página está dedicada a mostrar en detalle los
aspectos clave del producto en oferta. En los cuales incluye una imagen
del producto y detalles importantes, como el nombre del producto, el
precio original y el precio en oferta, opciones de talla y cantidad,
además de una descripción detallada del producto y finaliza con el
botón "Agregar al Carrito". Al hacer clic en este botón, se redirige el
usuario a la página de pago para productos en oferta. El diseño limpio y
ordenado facilita la lectura y la toma de decisiones, brindando toda la
información necesaria de un vistazo.
9. checkout producto en oferta

Esta página ha sido diseñada para simplificar el proceso de compra de

un producto en oferta. Comenzando con el encabezado estándar que
muestra el distintivo logo de 1999 Urbano y un menú de navegación
intuitivo que permite a los usuarios explorar las diversas secciones del
sitio. También se incluye una barra de búsqueda y accesos rápidos a la
lista de favoritos y al carrito de compras para mejorar la experiencia
general del usuario.
La sección principal de la página presenta un formulario de compra que
muestra tanto la imagen como la información detallada del producto de
interés. Un formulario diseñado para recopilar la información necesaria
para completar la transacción de manera fluida en el que se incluyen los
siguientes campos :

● Talla y Cantidad: Los usuarios pueden seleccionar la talla

deseada y la cantidad del producto que desean adquirir.

● Información del Comprador: Se recopilan datos cruciales del

comprador, como el nombre, correo electrónico y dirección de
envío. Estos campos se han marcado como obligatorios,
garantizando que se proporcionen los detalles necesarios para la
entrega.

● Método de Pago: Se ofrece una lista desplegable que permite a

los usuarios elegir su método de pago preferido entre tarjeta de
crédito, PayPal o pago en efectivo contraentrega.

● Código de Descuento: Se incluye la opción de ingresar un

código de descuento, brindando a los usuarios la oportunidad de
aplicar beneficios adicionales antes de realizar la compra.

● Descripción del Producto: Una descripción adicional del

producto se presenta para recordar al usuario las características
únicas de la "Playera Monster Tee Edition".

El formulario culmina con un llamativo botón "Comprar Ahora", que, al

hacer clic, enviará la información del formulario para procesar la
 compra de manera eficiente. Con un diseño claro y ordenado, esta
página ofrece una experiencia de compra fluida y directa para aquellos
usuarios que desean aprovechar la oferta exclusiva en este producto.
10. contacto
Esta página de contacto está diseñada para fomentar la comunicación
directa entre 1999 Urbano y sus usuarios. La página comienza con el
distintivo encabezado que presenta el logo de 1999 Urbano y un menú
de navegación que permite a los usuarios acceder fácilmente a
diferentes secciones del sitio, como la página de inicio, la sección de
productos, ofertas y, por supuesto, la sección de contacto.
En el área principal de la página, se destaca un llamativo mensaje:
"¡Conversemos!". Acompañado de un párrafo que invita a los visitantes
a hacer preguntas, sugerencias o simplemente saludar. Se incentiva a los
usuarios a completar el formulario de contacto o a ponerse en contacto
directo.
El formulario de contacto, ubicado en la siguiente sección, ofrece
campos bien etiquetados para nombre, correo electrónico y mensaje.
Estos campos son obligatorios, asegurando que la información necesaria
sea proporcionada para facilitar una respuesta efectiva. Al final del
formulario, se encuentra un botón "Enviar Mensaje" que permite a los
usuarios enviar fácilmente sus consultas.
Además del formulario de contacto, la página incluye dos secciones
adicionales:
● Sección de Inicio: Destaca las últimas tendencias en moda
urbana. Se anima a los usuarios a explorar la amplia gama de
productos que ofrece la tienda, con una llamada a la acción para
dirigirse a la página de inicio.

● Sección de Oferta: Invita a los usuarios a descubrir las últimas

ofertas y aprovechar descuentos exclusivos. Se muestra una
imagen representativa y se proporciona un enlace para ver todas
las ofertas disponibles.
La página concluye con un sencillo footer que incluye íconos de redes
sociales, proporcionando enlaces a las cuentas de Facebook, Instagram
y WhatsApp de 1999 Urbano.